موارد جدید در DevTools، Chrome 126، موارد جدید در DevTools، Chrome 126

سوفیا املیانوا
Sofia Emelianova
GitHub

بهبود پانل عملکرد

این نسخه چندین پیشرفت را در پنل Performance به ارمغان می آورد.

با حالت پیکربندی آهنگ به روز شده، آهنگ ها را جابه جا و پنهان کنید

اکنون می توانید با کلیک راست روی نام آهنگ و انتخاب پیکربندی آهنگ ها وارد حالت پیکربندی آهنگ شوید. دکمه ویرایش که به فضای اضافی نیاز داشت حذف شده است.

قبل و بعد از جایگزینی دکمه ویرایش با یک گزینه منو.

حالت پیکربندی آهنگ به شما امکان می دهد ترتیب آهنگ ها را تغییر دهید و آنها را پنهان کنید. برای جابجایی مسیر روی arrow_upward به بالا یا arrow_downward down کلیک کنید یا روی visibility_off hide کلیک کنید. برای خروج از حالت پیکربندی، روی Finish configuring tracks در پایین کلیک کنید. این پیکربندی برای ردیابی های جدید باقی می ماند اما برای جلسات بعدی DevTools نه.

شماره Chromium: 336266699 .

اسکریپت های موجود در نمودار شعله را نادیده بگیرید

نمودار شعله در مسیر اصلی پشتیبانی از لیست نادیده گرفته می شود. اکنون می توانید روی یک اسکریپت در نمودار کلیک راست کرده و گزینه Add script را برای نادیده گرفتن لیست انتخاب کنید.

گزینه منو برای افزودن اسکریپت به لیست نادیده گرفته شده، اسکریپت های علامت گذاری شده به عنوان نادیده گرفته شده و قوانین مربوطه در تنظیمات.

نمودار اسکریپت‌های نادیده گرفته شده را جمع می‌کند، آنها را به‌عنوان فهرست نادیده‌گرفته علامت‌گذاری می‌کند و در تنظیمات تنظیمات > فهرست نادیده‌گرفتن را به قوانین استثنای سفارشی اضافه می‌کند. اسکریپت های نادیده گرفته شده ذخیره می شوند تا زمانی که آنها را از ردیابی یا از قوانین استثنای سفارشی حذف نکنید.

شماره Chromium: 336266714 .

سی پی یو را 20 برابر کاهش دهید

منوی throttling CPU در تنظیمات Capture پانل Performance یک گزینه کاهش سرعت 20 برابری جدید دریافت می کند. بنابراین، اکنون می توانید با دقت بیشتری مسائل مربوط به عملکرد دنیای واقعی را حتی در رایانه های رده بالا بازتولید و تجزیه و تحلیل کنید.

قبل و بعد از افزودن گزینه '20x slowdonw' به 'Capture settings'.

شماره Chromium: 324978881 .

پانل اطلاعات آماری عملکرد منسوخ خواهد شد

پانل آزمایشی اطلاعات بینش عملکرد در سال 2024 منسوخ خواهد شد. تیم DevTools در حال کار بر روی یکپارچه کردن مفیدترین ویژگی های آن در پانل عملکرد است. پانل اطلاعات آماری عملکرد اکنون بنری را در بالا نشان می دهد که شما را در مورد منسوخ شدن آینده مطلع می کند.

بنر هشدار منسوخ شدن در پانل "اطلاعات آماری عملکرد".

برای کسب اطلاعات بیشتر، ابزار عملکرد در سال 2024 و بعد از آن را ببینید.

اگر بازخوردی در مورد اینکه چه چیزی کار می‌کند، چه چیزی نیست، و فکر می‌کنید چه چیزی می‌تواند بهتر انجام شود، دارید، می‌خواهیم از شما بشنویم .

کل رشته های هدر را جایگذاری کنید تا آنها را لغو کنید

وقتی سرصفحه‌ها را نادیده می‌گیرید ، اکنون می‌توانید کل رشته سرصفحه ( HEADER_NAME : VALUE ) را جای‌گذاری کنید و DevTools رشته را در : به نام سرصفحه و مقدار آن تقسیم می‌کند.

این عمل را در ویدیوی زیر مشاهده کنید.

هنگام ویرایش سرصفحه ها، پانل شبکه اکنون به شما هشدار می دهد اگر نویسه هایی غیر از حروف اعداد، خط فاصله و زیرخط وارد کرده باشید.

هشدار در کنار نام سرصفحه با نویسه‌های پشتیبانی‌نشده.

به‌علاوه، گزینه‌های منو لغو و دکمه‌های ویرایش برای chrome:// -URL غیرفعال هستند که با رفتار مورد نظر مطابقت دارد.

مسائل Chromium: 330967147 , 337012362 , 328210785 .

استفاده بیش از حد از حافظه را با فیلترهای جدید در عکس های فوری پیدا کنید

عکس‌های فوری پشته‌ای در پانل حافظه ، فیلترهای جدیدی دریافت می‌کنند که می‌توانند به شما کمک کنند موارد رایج استفاده ناکارآمد از حافظه، مانند رشته‌های تکراری، اشیاء حفظ شده توسط گره‌های DOM جدا شده و DevTools Console را پیدا کنید.

گزینه های قبل و بعد از افزودن فیلتر برای موارد رایج استفاده ناکارآمد از حافظه.

شماره Chromium: 337094903 .

سطل های ذخیره سازی را در Application > Storage بررسی کنید

اکنون می توانید سطل های ذخیره سازی را در یک درخت اختصاصی در بخش Application > Storage بررسی کنید. این درخت که قبلاً آزمایشی بود، به طور پیش فرض فعال شده است.

قبل و بعد از فعال کردن درخت سطل ذخیره سازی در بخش Storage.

شماره Chromium: 338094915 .

هشدارهای self-XSS را با پرچم خط فرمان غیرفعال کنید

اگر استفاده از Chrome را خودکار می‌کنید یا ابزارهای DevTools را از خط فرمان برای اشکال‌زدایی باز می‌کنید، اغلب می‌خواهید هشدار self-XSS را که در هر جلسه DevTools جدید ظاهر می‌شود، غیرفعال کنید.

گفتگوی هشدار self-xss در کنسول.

اکنون می‌توانید با ارسال پرچم خط فرمان --unsafely-disable-devtools-self-xss-warnings به Chrome، این گفتگو را غیرفعال کنید.

شماره Chromium: 41491762 .

فانوس دریایی 12.0.0

پنل Lighthouse اکنون Lighthouse 12.0.0 را اجرا می کند.

این به روز رسانی تعدادی تغییرات را به همراه دارد، از جمله حذف دسته PWA، سازماندهی مجدد دسته SEO، حذف کلی پس انداز، ممیزی های جدید و تغییرات حسابرسی. لیست کامل تغییرات را ببینید.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 772558 .

نکات برجسته متفرقه

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

  • کارایی :
    • تنظیمات ضبط آهسته ( فعال کردن ابزار دقیق رنگ پیشرفته و فعال کردن آمار انتخابگر CSS ) اکنون به طور خودکار در جلسه DevTools بعدی پاک می شود.
    • اکنون با بزرگنمایی نمودار شعله و تغییر داده ها، برگه Stats Selector به طور خودکار به پایین اسکرول نمی شود ( 337999939 ).
  • کنسول : میانبر Ctrl + ` اکنون کنسول موجود در کشو را تنها در صورتی می بندد که در فوکوس باشد ( 40875466 , 328210785 ).
  • تکمیل خودکار : تجزیه آدرس ثابت است ( 335409093 ، 335409707 ).
  • دسترس‌پذیری : اعلان‌های صفحه‌خوان برای رشته‌های بومی‌سازی شده ثابت هستند ( 324930007 ).
کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان می‌دهند به جدیدترین ویژگی‌های DevTools دسترسی داشته باشید، APIهای پلت‌فرم وب پیشرفته را آزمایش کنید و قبل از اینکه کاربرانتان این کار را انجام دهند، مشکلات موجود در سایت خود را پیدا کنید!

تماس با تیم Chrome DevTools

از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

فهرستی از همه چیزهایی که در سری چیزهای جدید در DevTools پوشش داده شده است.

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59 ،

سوفیا املیانوا
Sofia Emelianova
GitHub

بهبود پانل عملکرد

این نسخه پیشرفت های مختلفی را در پانل عملکرد به ارمغان می آورد.

حرکت و مخفی کردن آهنگ ها با حالت پیکربندی آهنگ به روز شده

اکنون می توانید با کلیک راست بر روی نام آهنگ و انتخاب آهنگ های پیکربندی ، حالت پیکربندی آهنگ را وارد کنید. دکمه ویرایش که به فضای اضافی نیاز داشت حذف شده است.

قبل و بعد از تعویض دکمه ویرایش با گزینه منو.

حالت پیکربندی آهنگ به شما امکان می دهد ترتیب آهنگ ها را تغییر داده و آنها را پنهان کنید. برای جابجایی مسیر به دور یا روی Arrow_Upward Up یا Arrow_Downward Down کلیک کنید یا روی Visibility_Off Hide کلیک کنید. برای خروج از حالت پیکربندی ، روی پایان پیکربندی آهنگ ها در پایین کلیک کنید. این پیکربندی برای آثار جدید ادامه دارد اما برای جلسات بعدی DevTools نیست.

شماره کروم: 336266699 .

اسکریپت های موجود در نمودار شعله را نادیده بگیرید

نمودار شعله در مسیر اصلی پشتیبانی لیست نادیده گرفته را اضافه می کند. اکنون می توانید روی یک اسکریپت در نمودار کلیک راست کرده و Add Script را برای نادیده گرفتن لیست انتخاب کنید.

گزینه منو برای اضافه کردن اسکریپت برای نادیده گرفتن لیست ، اسکریپت های مشخص شده به عنوان نادیده گرفته شده و قوانین مربوطه در تنظیمات.

نمودار اسکریپت‌های نادیده گرفته شده را جمع می‌کند، آنها را به‌عنوان فهرست نادیده‌گرفته علامت‌گذاری می‌کند و در تنظیمات تنظیمات > فهرست نادیده‌گرفتن را به قوانین استثنای سفارشی اضافه می‌کند. اسکریپت های نادیده گرفته شده ذخیره می شوند تا زمانی که آنها را از ردیابی یا از قوانین استثنای سفارشی حذف نکنید.

شماره کروم: 336266714 .

20 بار CPU را گاز بگیرید

منوی پرتاب CPU در تنظیمات ضبط پانل عملکرد ، گزینه جدید کندی 20x را به دست می آورد. بنابراین ، اکنون می توانید با دقت بیشتری در مورد عملکرد عملکرد در دنیای واقعی ، حتی در رایانه های سطح بالا ، تولید و تجزیه و تحلیل کنید.

گزینه قبل و بعد از اضافه کردن گزینه "20x slowdonw" به "تنظیمات ضبط".

شماره کروم: 324978881 .

پانل بینش عملکرد کاهش می یابد

پانل بینش عملکرد تجربی در سال 2024 مستهلک می شود. تیم DevTools در حال کار بر روی ادغام مفیدترین ویژگی های خود در پانل عملکرد است. پانل Performance Insights اکنون یک پرچم را در بالا نشان می دهد که شما را در مورد استهلاک آینده به شما اطلاع می دهد.

پرچم هشدار دهنده استهلاک در پانل "بینش عملکرد".

برای کسب اطلاعات بیشتر ، به ابزار عملکرد در سال 2024 و بعد از آن مراجعه کنید.

اگر بازخوردی در مورد آنچه کار می کند ، چه چیزی نیست ، و آنچه فکر می کنید می تواند بهتر انجام شود ، می خواهیم از شما بشنویم .

رشته های هدر را برای غلبه بر آنها چسباند

هنگام سرپرستی هدر ، اکنون می توانید یک رشته هدر کل ( HEADER_NAME : VALUE ) را بچسبانید و DevTools رشته را در : به یک نام هدر و مقدار آن تقسیم می کند.

این کار را در ویدیوی زیر مشاهده کنید.

در هنگام ویرایش هدر ، پنل شبکه اکنون به شما هشدار می دهد که اگر به غیر از الفبایی ها ، Hyphens و تأکید بر روی شخصیت های دیگری وارد کنید ، به شما هشدار می دهد.

هشدار در کنار نام هدر با شخصیت های پشتیبانی نشده.

علاوه بر این ، گزینه های منو و دکمه های ویرایش برای chrome:// -urls ، که با رفتار مورد نظر مطابقت دارد.

مشکلات کروم: 330967147 ، 337012362 ، 328210785 .

استفاده بیش از حد از حافظه را با فیلترهای جدید در عکس های پشته پیدا کنید

عکسهای فوری در پانل حافظه فیلترهای جدیدی دریافت می کنند که می تواند به شما در یافتن موارد مشترک استفاده از حافظه ناکارآمد ، مانند رشته های تکراری ، اشیاء حفظ شده توسط گره های DOM جدا شده و کنسول Devtools کمک کند.

قبل و بعد از اضافه کردن گزینه های فیلتر برای موارد مشترک استفاده از حافظه ناکارآمد.

شماره کروم: 337094903 .

سطل های ذخیره سازی را در برنامه> ذخیره سازی بازرسی کنید

اکنون می توانید سطل های ذخیره سازی را در یک درخت اختصاصی در بخش Application > Storage بازرسی کنید. این درخت ، قبلاً آزمایشی ، به طور پیش فرض فعال شده است.

قبل و بعد از فعال کردن درخت سطل های ذخیره سازی در بخش ذخیره سازی.

شماره کروم: 338094915 .

هشدارهای خود را با پرچم خط فرمان غیرفعال کنید

اگر استفاده از Chrome را به صورت خودکار انجام دهید یا در غیر این صورت devtools را از خط فرمان برای اشکال زدایی باز کنید ، اغلب می خواهید هشدار خود را که در هر جلسه جدید Devtools ظاهر می شود ، غیرفعال کنید.

گفتگوی هشدار دهنده خود در کنسول.

اکنون می توانید با عبور از پرچم فرمان خط --unsafely-disable-devtools-self-xss-warnings به Chrome ، این گفتگو را غیرفعال کنید.

شماره کروم: 41491762 .

فانوس دریایی 12.0.0

پانل Lighthouse اکنون 12.0.0 Lighthouse را اجرا می کند.

این به روزرسانی تعدادی از تغییرات ، از جمله حذف دسته PWA ، سازماندهی مجدد دسته سئو ، استهلاک پس انداز کلی ، ممیزی های جدید و تغییرات حسابرسی را به همراه می آورد. لیست کامل تغییرات را مشاهده کنید.

برای یادگیری اصول استفاده از پانل Lighthouse در DevTools ، به Lighthouse مراجعه کنید: سرعت وب سایت را بهینه کنید .

شماره کروم: 772558 .

نکات برجسته متفرقه

این برخی از اصلاحات و پیشرفت های قابل توجه در این نسخه است:

  • کارایی :
    • تنظیمات ضبط آهسته ( فعال کردن ابزار دقیق رنگ و فعال کردن آمار انتخاب CSS ) اکنون در جلسه بعدی DevTools به طور خودکار پاک می شود.
    • برگه Selector Stats اکنون به طور خودکار به پایین حرکت نمی کند زیرا نمودار شعله و تغییر داده ها را بزرگنمایی می کنید ( 33799939 ).
  • کنسول : میانبر Ctrl + ` اکنون کنسول را در کشو بسته می کند در صورت تمرکز ( 40875466 ، 328210785 ).
  • Autofill : تجزیه آدرس ثابت است ( 335409093 ، 335409707 ).
  • قابلیت دسترسی : اعلامیه های خواننده صفحه نمایش برای رشته های موضعی ثابت است ( 324930007 ).
کانال های پیش نمایش را بارگیری کنید

استفاده از Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش فرض خود در نظر بگیرید. این کانال های پیش نمایش به شما امکان دسترسی به جدیدترین ویژگی های DevTools ، آزمایش API های پلت فرم وب برآمدگی را می دهند و قبل از انجام کاربران ، در سایت خود مشکلی پیدا می کنند!

در تماس با تیم Chrome Devtools

برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری که مربوط به DevTools است ، از گزینه های زیر استفاده کنید.

  • یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهیدبیشتر > راهنما > گزارش مسائل DevTools در DevTools.
  • توییت در chromedevtools .
  • در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.
آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 Chrome 115 Chrome 114 Chrome 113 Chrome 112 Chrome 111 Chrome 110 Chrome 109 Chrome 108 Chrome 107 کروم 106 Chrome 105 Chrome 104 کروم 103 Chrome 102 Chrome 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 Chrome 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 Chrome 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 Chrome 73 کروم 72 Chrome 71 Chrome 70 Chrome 68 Chrome 67 Chrome 66 Chrome 65 Chrome 64 Chrome 63 Chrome 62 Chrome 61 Chrome 60 Chrome 59