موارد جدید در DevTools (Chrome 117)

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

بهبود پنل شبکه

حتی سریعتر محتوای وب را به صورت محلی لغو کنید

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

برای لغو محتوای وب، پانل شبکه را باز کنید، روی یک درخواست کلیک راست کرده و گزینه Override content را انتخاب کنید.

گزینه های لغو در منوی کشویی درخواست.

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

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

پس از تنظیم موارد لغو، DevTools شما را به Sources > Overrides > Editor می برد تا به شما امکان می دهد محتوای وب را لغو کنید .

توجه داشته باشید که منابع نادیده گرفته شده با نشان داده شده است ذخیره شد. در پنل شبکه نشانگر را روی نماد نگه دارید تا ببینید چه چیزی لغو شده است.

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

مسائل Chromium: 1465785 ، 1470532 ، 1469359 .

نادیده گرفتن محتوای XHR و واکشی درخواست‌ها

اکنون می توانید محتوای XHR را نادیده بگیرید و درخواست ها را علاوه بر سرصفحه های پاسخ آنها واکشی کنید. با چنین نادیده‌گیری‌هایی، می‌توانید پاسخ‌های API را برای اشکال‌زدایی صفحه وب خود مسخره کنید، حتی اگر باطن و API شما هنوز آماده نباشند.

DevTools در حال حاضر از لغو محتوا برای انواع درخواست‌های زیر پشتیبانی می‌کند: تصاویر (به عنوان مثال، avif، png)، فونت‌ها، fetch و XHR، اسکریپت‌ها (css و js)، و اسناد (html). DevTools اکنون گزینه Override content را برای انواع پشتیبانی نشده خاکستری می کند.

مسائل Chromium: 792101 ، 1469776 .

پنهان کردن درخواست های افزونه کروم

برای کمک به تمرکز بر روی کدی که می نویسید و فیلتر کردن درخواست های نامربوط ارسال شده توسط برنامه های افزودنی که ممکن است در Chrome نصب کرده باشید، پانل شبکه یک فیلتر جدید دریافت می کند.

برای فیلتر کردن همه درخواست‌های ارسال شده به URL chrome-extension:// ، بررسی کنید چک باکس. پنهان کردن URL های برنامه افزودنی

URL های برنامه افزودنی از جدول درخواست ها پنهان شده اند.

مسائل Chromium: 1257885 ، 1458803 .

کدهای وضعیت HTTP قابل خواندن توسط انسان

کد وضعیت در هدر درخواست اکنون متنی قابل خواندن توسط انسان را در کنار کدهای وضعیت HTTP نشان می دهد، بنابراین می توانید سریعتر بفهمید که چه اتفاقی برای درخواست افتاده است.

قبل و بعد از نمایش کدهای وضعیت HTTP قابل خواندن توسط انسان.

همچنین می توانید ماوس را روی کد وضعیت موجود در جدول درخواست نگه دارید تا همان متن را مشاهده کنید.

شماره Chromium: 1153956 .

پاسخ های چاپی زیبا برای انواع فرعی JSON

تب Response برای یک درخواست با یک application/[subtype]+json زیرنوع MIME (به عنوان مثال، ld+json ، hal+json و موارد دیگر) اکنون پاسخ را به درستی تجزیه می کند و به شما امکان می دهد آن را زیبا کنید.

قبل و بعد از تجزیه یک زیرنوع برنامه/json در پیش نمایش پاسخ شبکه.

شماره کرومیوم: 406900 .

عملکرد: تغییرات در اولویت واکشی برای رویدادهای شبکه را ببینید

اکنون پانل عملکرد دو فیلد اولویت را در خلاصه یک رویداد در مسیر شبکه نشان می‌دهد: اولویت اولیه و اولویت (نهایی)، به جای اولویت تنها. با استفاده از این فیلد اضافی، اکنون می توانید ببینید که آیا اولویت واکشی رویداد تغییر می کند یا خیر و ترتیب دانلودها را تغییر دهید. برای اطلاعات بیشتر، بهینه سازی بارگیری منبع با Fetch Priority API را ببینید.

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

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

ستون Priority در پنل Network.

مسائل Chromium: 1463901 ، 1380964 .

تنظیمات منابع به طور پیش‌فرض فعال می‌شوند: تا کردن کد و فایل خودکار آشکار می‌شود

را تنظیمات. تنظیمات > تنظیمات > چک باکس. گزینه تاشو کد اکنون به طور پیش فرض فعال است. این گزینه به شما امکان می دهد بلوک های کد را تا کنید.

برای تا کردن یک بلوک کد، نشانگر را روی شماره خط کنار ابتدای بلوک نگه دارید و روی آن کلیک کنید فرو ریختن. نماد جمع کردن روی {...} کلیک کنید تا دوباره بلوک گسترش یابد.

علاوه بر این، تنظیمات. تنظیمات > تنظیمات > چک باکس. آشکارسازی خودکار فایل‌ها در نوار کناری اکنون به‌طور پیش‌فرض نیز فعال است.

این تنظیم باعث می‌شود که درخت فایل در منابع > صفحه ، فایل فعلی را در ویرایشگر باز کند، وقتی برگه‌ها را تغییر می‌دهید.

مسائل Chromium: 1459193 ، 1336599 .

اشکال زدایی بهبود یافته مشکلات کوکی های شخص ثالث

کروم در تلاش برای کمک به ساخت وب خصوصی‌تر و به موازات به‌روزرسانی‌های مرورگرهای دیگر ، طرح Privacy Sandbox را معرفی کرد. این ابتکار اساساً حریم خصوصی را در وب افزایش می‌دهد و می‌تواند یک وب سالم و با پشتیبانی از تبلیغات را به گونه‌ای حفظ کند که کوکی‌های شخص ثالث را منسوخ کند. Privacy Sandbox دارای یک جدول زمانی تدریجی است که به شما امکان می دهد به راحتی با تغییرات سازگار شوید.

از قبل می‌توانید نحوه رفتار Chrome را پس از حذف مرحله کوکی شخص ثالث آزمایش کنید. برای انجام این کار، Chrome را از خط فرمان با پرچم --test-third-party-cookies-phaseout اجرا کنید. برای اینکه بدانید این پرچم چه کاری انجام می دهد، به اشکال زدایی کوکی ها مراجعه کنید.

صرف نظر از نحوه اجرای Chrome (با یا بدون پرچم)، تب Issues اکنون دارای چک باکس. شامل چک باکس مشکلات کوکی شخص ثالث که به طور پیش‌فرض برای همه کاربران جدید Chrome فعال است و در نتیجه گزارش می‌دهد:

  • اخطار تغییر ناگهانی در مورد مرحله آتی.
  • مشکلات مربوط به کوکی های شخص ثالث.

اگر می‌خواهید به‌عنوان یک کاربر فعلی Chrome، هشدارهای کوکی‌ها را در مورد حذف مرحله آینده ببینید، حتماً این کادر را علامت بزنید.

برای آزمایش این، کوکی‌ها را در این صفحه نمایشی بررسی کنید.

مشکلات کوکی شخص ثالث در برگه مشکلات گزارش شده است.

علاوه بر این، چک باکس. فیلتر کوکی‌های پاسخ مسدود شده در پانل شبکه تغییر شکل داده شده است تا مشخص شود فقط کوکی‌های پاسخ مسدود شده را نشان می‌دهد.

چک باکس فعال است و فقط درخواست‌هایی را نشان می‌دهد که کوکی‌های پاسخ مسدود شده دارند.

مسائل Chromium: 1458839 ، 1462693 ، 1466310 .

اشکال زدایی پیش بارگذاری در پنل برنامه

تیم کروم در حال بازگرداندن کامل پیش‌اجرای صفحات آینده است که کاربر احتمالاً به آن‌ها می‌رود. DevTools برای اینکه بتوانید این را اشکال زدایی کنید، بخش Preloading را به پنل Application اضافه می کند. واکشی و پیش‌اجرای جدید (که در مجموع به عنوان "پیش بارگیری ناوبری" شناخته می‌شود) از API قوانین گمانه‌زنی استفاده می‌کند تا از راهنمایی‌های منبع مبتنی بر پیوند .

در این صفحه نمایشی ، در بخش Application > Preloading ، می توانید بررسی کنید:

  • قوانین حدس و گمان که تمام مجموعه قوانین موجود در صفحه فعلی را فهرست می کند.
  • پیش بارگیری هایی که همه URL های واکشی شده و از پیش اجرا شده را از مجموعه قوانین فهرست می کند.
  • این صفحه که وضعیت از پیش اجرا شده صفحه فعلی را فهرست می کند.

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

شماره Chromium: 1410709 .

رنگ های جدید

شاید قبلاً متوجه شده باشید که DevTools اکنون ظاهر تازه‌ای دارد که بهتر با Chrome هماهنگ می‌شود. یکی از عوامل موثر، طرح رنگ جدید است.

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

این نسخه (117) بهبودهای UX بیشتری را برای DevTools به ارمغان می‌آورد، که هم قبلاً ذکر شد و هم فهرست‌بندی شده است، از جمله تعدادی از متون بهبود یافته UI.

شماره Chromium: 1456677 .

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

پنل Lighthouse اکنون Lighthouse 10.4.0 را اجرا می کند. مهمتر از همه، این نسخه ممیزی های دسترسی جدید را برای موارد زیر اضافه می کند:

به عنوان مثال:

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

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

شماره Chromium: 772558 .

افزونه اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است

پسوند اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است و در مخزن frontend DevTools قرار دارد. این برنامه افزودنی قابلیت اشکال زدایی را در DevTools برای برنامه های C++ که در WebAssembly کامپایل شده اند، فعال می کند. برای اطلاعات بیشتر، Debug C/C++ WebAssembly را ببینید.

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

شماره Chromium: 1410709 .

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

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

  • CSS Nesting : پانل Elements اکنون کل زنجیره انتخابگر را برای کودکان تودرتو نشان می دهد ( 1172985 ).
  • Application > Manifest اکنون یک بخش Overlay Controls Window دارد که بررسی می کند آیا مقدار display_override در Manifest وجود دارد یا خیر و پیوندهایی به اسناد مربوطه ارائه می دهد.
  • درخت Sources > Page اکنون موارد زیر را انجام می دهد، از جمله ( 1442863 ) اما نه محدود به آن:
    • اگر تمام محتوای آنها در فهرست نادیده گرفته شود، پوشه ها خاکستری می شوند.
    • پوشه ها را به رنگ نارنجی رنگ می کند اگر تمام محتوای آنها از نقشه منبع باشد.
  • عملکرد : تنظیمات ضبط اکنون به طور خودکار هنگام شروع ضبط پنهان می شوند ( 1455498 ).
  • Sources > Editor رفتار Ctrl + Arrow (Win) و Opt + Arrow (MacOs) را بازیابی کرد ( 1468208 ).
  • Animations > Pause all toggle اکنون وضعیت خود را در بارگذاری صفحه حفظ می کند ( 1446046 ).
  • Application > Storage > Cache storage به بخش Application > Storage > Cache منتقل شد ( 1462622 ).
  • برخی از متون رابط کاربری و نکات ابزار بهبود یافته اند: نکته ابزار همزمانی سخت افزار ، متون فیلتر شبکه و گزینه منوی اصلی ، حروف بزرگ در نمای درختی برنامه ، شبکه > متن سرصفحه ها ، منابع > لغو و متون فایل سیستم .

ویژگی های آزمایشی جدید

شبیه سازی رندر جدید: prefers-reduced-transparency

کاربران وب‌سایت شما ممکن است شروع به فعال کردن ویژگی جدید آزمایشی prefers-reduced-transparency CSS در دستگاه‌های خود کنند تا ترجیح خود را برای کاهش جلوه‌های شفاف نشان دهند. ممکن است برای افزایش دسترسی به وب سایت خود، این اولویت را در نظر بگیرید. برای کمک به شما، تب Rendering drawer اکنون می‌تواند prefers-reduced-transparency: reduce ، بنابراین می‌توانید یک راه‌حل را نمونه‌سازی کنید و نحوه رفتار وب‌سایت خود را در این مورد آزمایش کنید.

برای آزمایش این ویژگی در Chrome، ویژگی‌های پلتفرم وب آزمایشی را در chrome://flags فعال کنید.

شماره Chromium: 1424879 .

مانیتور پروتکل پیشرفته

Chrome DevTools از پروتکل Chrome DevTools Protocol (CDP) برای ابزارسازی، بازرسی، اشکال زدایی و نمایه مرورگرهای Chrome استفاده می کند. اگر یک توسعه‌دهنده Chromium یا DevTools هستید، مانیتور پروتکل راهی برای مشاهده تمام درخواست‌ها و پاسخ‌های CDP ارائه شده توسط DevTools و ارسال دستورات CDP در اختیار شما قرار می‌دهد.

مانیتور پروتکل یک رابط جدید دریافت می کند که به شما امکان می دهد دستورات CDP را آسان تر بسازید و ارسال کنید. حالا دیگر لازم نیست دستورات و پارامترهای آنها را در مستندات جستجو کنید، DevTools آنها را به شما پیشنهاد می کند.

در گوشه سمت راست پایین تب کشوی مانیتور پروتکل ، کلیک کنید پنل سمت چپ باز است ویرایشگر دستور CDP را نشان دهید ، یک هدف را انتخاب کنید، یک دستور را تایپ کنید، در صورت نیاز یکی از موارد پیشنهادی را انتخاب کنید، مقادیر پارامتر را مشخص کنید و کلیک کنید ارسال کنید. ارسال فرمان ( Ctrl/Cmd + Enter ).

تعیین و ارسال دستور CDP.

شماره Chromium: 1469345 .

کانال های پیش نمایش را دانلود کنید

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

با تیم Chrome DevTools در تماس باشید

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

چیزهای جدید در DevTools

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

،

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

بهبود پنل شبکه

حتی سریعتر محتوای وب را به صورت محلی لغو کنید

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

برای لغو محتوای وب، پانل شبکه را باز کنید، روی یک درخواست کلیک راست کرده و گزینه Override content را انتخاب کنید.

گزینه های لغو در منوی کشویی درخواست.

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

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

پس از تنظیم موارد لغو، DevTools شما را به Sources > Overrides > Editor می برد تا به شما امکان می دهد محتوای وب را لغو کنید .

توجه داشته باشید که منابع نادیده گرفته شده با نشان داده شده است ذخیره شد. در پنل شبکه نشانگر را روی نماد نگه دارید تا ببینید چه چیزی لغو شده است.

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

مسائل Chromium: 1465785 ، 1470532 ، 1469359 .

نادیده گرفتن محتوای XHR و واکشی درخواست‌ها

اکنون می توانید محتوای XHR را نادیده بگیرید و درخواست ها را علاوه بر سرصفحه های پاسخ آنها واکشی کنید. با چنین نادیده‌گیری‌هایی، می‌توانید پاسخ‌های API را برای اشکال‌زدایی صفحه وب خود مسخره کنید، حتی اگر باطن و API شما هنوز آماده نباشند.

DevTools در حال حاضر از لغو محتوا برای انواع درخواست‌های زیر پشتیبانی می‌کند: تصاویر (به عنوان مثال، avif، png)، فونت‌ها، fetch و XHR، اسکریپت‌ها (css و js)، و اسناد (html). DevTools اکنون گزینه Override content را برای انواع پشتیبانی نشده خاکستری می کند.

مسائل Chromium: 792101 ، 1469776 .

پنهان کردن درخواست های افزونه کروم

برای کمک به تمرکز بر روی کدی که می نویسید و فیلتر کردن درخواست های نامربوط ارسال شده توسط برنامه های افزودنی که ممکن است در Chrome نصب کرده باشید، پانل شبکه یک فیلتر جدید دریافت می کند.

برای فیلتر کردن همه درخواست‌های ارسال شده به URL chrome-extension:// ، بررسی کنید چک باکس. پنهان کردن URL های برنامه افزودنی

URL های برنامه افزودنی از جدول درخواست ها پنهان شده اند.

مسائل Chromium: 1257885 ، 1458803 .

کدهای وضعیت HTTP قابل خواندن توسط انسان

کد وضعیت در هدر درخواست اکنون متنی قابل خواندن توسط انسان را در کنار کدهای وضعیت HTTP نشان می دهد، بنابراین می توانید سریعتر بفهمید که چه اتفاقی برای درخواست افتاده است.

قبل و بعد از نمایش کدهای وضعیت HTTP قابل خواندن توسط انسان.

همچنین می توانید ماوس را روی کد وضعیت موجود در جدول درخواست نگه دارید تا همان متن را مشاهده کنید.

شماره Chromium: 1153956 .

پاسخ های چاپی زیبا برای انواع فرعی JSON

تب Response برای یک درخواست با یک application/[subtype]+json زیرنوع MIME (به عنوان مثال، ld+json ، hal+json و موارد دیگر) اکنون پاسخ را به درستی تجزیه می کند و به شما امکان می دهد آن را زیبا کنید.

قبل و بعد از تجزیه یک زیرنوع برنامه/json در پیش نمایش پاسخ شبکه.

شماره کرومیوم: 406900 .

عملکرد: تغییرات در اولویت واکشی برای رویدادهای شبکه را ببینید

اکنون پانل عملکرد دو فیلد اولویت را در خلاصه یک رویداد در مسیر شبکه نشان می‌دهد: اولویت اولیه و اولویت (نهایی)، به جای اولویت تنها. با استفاده از این فیلد اضافی، اکنون می توانید ببینید که آیا اولویت واکشی رویداد تغییر می کند یا خیر و ترتیب دانلودها را تغییر دهید. برای اطلاعات بیشتر، بهینه سازی بارگیری منبع با Fetch Priority API را ببینید.

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

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

ستون Priority در پنل Network.

مسائل Chromium: 1463901 ، 1380964 .

تنظیمات منابع به طور پیش‌فرض فعال می‌شوند: تا کردن کد و فایل خودکار آشکار می‌شود

را تنظیمات. تنظیمات > تنظیمات > چک باکس. گزینه تاشو کد اکنون به طور پیش فرض فعال است. این گزینه به شما امکان می دهد بلوک های کد را تا کنید.

برای تا کردن یک بلوک کد، نشانگر را روی شماره خط کنار ابتدای بلوک نگه دارید و روی آن کلیک کنید فرو ریختن. نماد جمع کردن روی {...} کلیک کنید تا دوباره بلوک گسترش یابد.

علاوه بر این، تنظیمات. تنظیمات > تنظیمات > چک باکس. آشکارسازی خودکار فایل‌ها در نوار کناری اکنون به‌طور پیش‌فرض نیز فعال است.

این تنظیم باعث می‌شود که درخت فایل در منابع > صفحه ، فایل فعلی را در ویرایشگر باز کند، وقتی برگه‌ها را تغییر می‌دهید.

مسائل Chromium: 1459193 ، 1336599 .

اشکال زدایی بهبود یافته مشکلات کوکی های شخص ثالث

کروم در تلاش برای کمک به ساخت وب خصوصی‌تر و به موازات به‌روزرسانی‌های مرورگرهای دیگر ، طرح Privacy Sandbox را معرفی کرد. این ابتکار اساساً حریم خصوصی را در وب افزایش می‌دهد و می‌تواند یک وب سالم و با پشتیبانی از تبلیغات را به گونه‌ای حفظ کند که کوکی‌های شخص ثالث را منسوخ کند. Privacy Sandbox دارای یک جدول زمانی تدریجی است که به شما امکان می دهد به راحتی با تغییرات سازگار شوید.

از قبل می‌توانید نحوه رفتار Chrome را پس از حذف مرحله کوکی شخص ثالث آزمایش کنید. برای انجام این کار، Chrome را از خط فرمان با پرچم --test-third-party-cookies-phaseout اجرا کنید. برای اینکه بدانید این پرچم چه کاری انجام می دهد، به اشکال زدایی کوکی ها مراجعه کنید.

صرف نظر از نحوه اجرای Chrome (با یا بدون پرچم)، تب Issues اکنون دارای چک باکس. شامل چک باکس مشکلات کوکی شخص ثالث که به طور پیش‌فرض برای همه کاربران جدید Chrome فعال است و در نتیجه گزارش می‌دهد:

  • اخطار تغییر ناگهانی در مورد مرحله آتی.
  • مشکلات مربوط به کوکی های شخص ثالث.

اگر می‌خواهید به‌عنوان یک کاربر فعلی Chrome، هشدارهای کوکی‌ها را در مورد حذف مرحله آینده ببینید، حتماً این کادر را علامت بزنید.

برای آزمایش این، کوکی‌ها را در این صفحه نمایشی بررسی کنید.

مشکلات کوکی شخص ثالث در برگه مشکلات گزارش شده است.

علاوه بر این، چک باکس. فیلتر کوکی‌های پاسخ مسدود شده در پانل شبکه تغییر شکل داده شده است تا مشخص شود فقط کوکی‌های پاسخ مسدود شده را نشان می‌دهد.

چک باکس فعال است و فقط درخواست‌هایی را نشان می‌دهد که کوکی‌های پاسخ مسدود شده دارند.

مسائل Chromium: 1458839 ، 1462693 ، 1466310 .

اشکال زدایی پیش بارگذاری در پنل برنامه

تیم کروم در حال بازگرداندن کامل پیش‌اجرای صفحات آینده است که کاربر احتمالاً به آن‌ها می‌رود. DevTools برای اینکه بتوانید این را اشکال زدایی کنید، بخش Preloading را به پنل Application اضافه می کند. واکشی و پیش‌اجرای جدید (که در مجموع به عنوان "پیش بارگیری ناوبری" شناخته می‌شود) از API قوانین گمانه‌زنی استفاده می‌کند تا از راهنمایی‌های منبع مبتنی بر پیوند .

در این صفحه نمایشی ، در بخش Application > Preloading ، می توانید بررسی کنید:

  • قوانین حدس و گمان که تمام مجموعه قوانین موجود در صفحه فعلی را فهرست می کند.
  • پیش بارگیری هایی که همه URL های واکشی شده و از پیش اجرا شده را از مجموعه قوانین فهرست می کند.
  • این صفحه که وضعیت از پیش اجرا شده صفحه فعلی را فهرست می کند.

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

شماره Chromium: 1410709 .

رنگ های جدید

شاید قبلاً متوجه شده باشید که DevTools اکنون ظاهر تازه‌ای دارد که بهتر با Chrome هماهنگ می‌شود. یکی از عوامل موثر، طرح رنگ جدید است.

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

این نسخه (117) بهبودهای UX بیشتری را برای DevTools به ارمغان می‌آورد، که هم قبلاً ذکر شد و هم فهرست‌بندی شده است، از جمله تعدادی از متون بهبود یافته UI.

شماره Chromium: 1456677 .

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

پنل Lighthouse اکنون Lighthouse 10.4.0 را اجرا می کند. مهمتر از همه، این نسخه ممیزی های دسترسی جدید را برای موارد زیر اضافه می کند:

به عنوان مثال:

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

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

شماره Chromium: 772558 .

افزونه اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است

پسوند اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است و در مخزن frontend DevTools قرار دارد. این برنامه افزودنی قابلیت اشکال زدایی را در DevTools برای برنامه های C++ که در WebAssembly کامپایل شده اند، فعال می کند. برای اطلاعات بیشتر، Debug C/C++ WebAssembly را ببینید.

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

شماره Chromium: 1410709 .

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

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

  • CSS Nesting : پانل Elements اکنون کل زنجیره انتخابگر را برای کودکان تودرتو نشان می دهد ( 1172985 ).
  • Application > Manifest اکنون یک بخش Overlay Controls Window دارد که بررسی می کند آیا مقدار display_override در Manifest وجود دارد یا خیر و پیوندهایی به اسناد مربوطه ارائه می دهد.
  • درخت Sources > Page اکنون موارد زیر را انجام می دهد، از جمله ( 1442863 ) اما نه محدود به آن:
    • اگر تمام محتوای آنها در فهرست نادیده گرفته شود، پوشه ها خاکستری می شوند.
    • پوشه ها را به رنگ نارنجی رنگ می کند اگر تمام محتوای آنها از نقشه منبع باشد.
  • عملکرد : تنظیمات ضبط اکنون به طور خودکار هنگام شروع ضبط پنهان می شوند ( 1455498 ).
  • Sources > Editor رفتار Ctrl + Arrow (Win) و Opt + Arrow (MacOs) را بازیابی کرد ( 1468208 ).
  • Animations > Pause all toggle اکنون وضعیت خود را در بارگذاری صفحه حفظ می کند ( 1446046 ).
  • Application > Storage > Cache storage به بخش Application > Storage > Cache منتقل شد ( 1462622 ).
  • برخی از متون رابط کاربری و نکات ابزار بهبود یافته اند: نکته ابزار همزمانی سخت افزار ، متون فیلتر شبکه و گزینه منوی اصلی ، حروف بزرگ در نمای درختی برنامه ، شبکه > متن سرصفحه ها ، منابع > لغو و متون فایل سیستم .

ویژگی های آزمایشی جدید

شبیه سازی رندر جدید: prefers-reduced-transparency

کاربران وب‌سایت شما ممکن است شروع به فعال کردن ویژگی جدید آزمایشی prefers-reduced-transparency CSS در دستگاه‌های خود کنند تا ترجیح خود را برای کاهش جلوه‌های شفاف نشان دهند. ممکن است برای افزایش دسترسی به وب سایت خود، این اولویت را در نظر بگیرید. برای کمک به شما، تب Rendering drawer اکنون می‌تواند prefers-reduced-transparency: reduce ، بنابراین می‌توانید یک راه‌حل را نمونه‌سازی کنید و نحوه رفتار وب‌سایت خود را در این مورد آزمایش کنید.

برای آزمایش این ویژگی در Chrome، ویژگی‌های پلتفرم وب آزمایشی را در chrome://flags فعال کنید.

شماره Chromium: 1424879 .

مانیتور پروتکل پیشرفته

Chrome DevTools از پروتکل Chrome DevTools Protocol (CDP) برای ابزارسازی، بازرسی، اشکال زدایی و نمایه مرورگرهای Chrome استفاده می کند. اگر یک توسعه‌دهنده Chromium یا DevTools هستید، مانیتور پروتکل راهی برای مشاهده تمام درخواست‌ها و پاسخ‌های CDP ارائه شده توسط DevTools و ارسال دستورات CDP در اختیار شما قرار می‌دهد.

مانیتور پروتکل یک رابط جدید دریافت می کند که به شما امکان می دهد دستورات CDP را آسان تر بسازید و ارسال کنید. حالا دیگر لازم نیست دستورات و پارامترهای آنها را در مستندات جستجو کنید، DevTools آنها را به شما پیشنهاد می کند.

در گوشه سمت راست پایین تب کشوی مانیتور پروتکل ، کلیک کنید پنل سمت چپ باز است ویرایشگر دستور CDP را نشان دهید ، یک هدف را انتخاب کنید، یک دستور را تایپ کنید، در صورت نیاز یکی از موارد پیشنهادی را انتخاب کنید، مقادیر پارامتر را مشخص کنید و کلیک کنید ارسال کنید. ارسال فرمان ( Ctrl/Cmd + Enter ).

تعیین و ارسال دستور CDP.

شماره Chromium: 1469345 .

کانال های پیش نمایش را دانلود کنید

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

با تیم Chrome DevTools در تماس باشید

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

چیزهای جدید در DevTools

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

،

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

بهبود پنل شبکه

حتی سریعتر محتوای وب را به صورت محلی لغو کنید

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

برای لغو محتوای وب، پانل شبکه را باز کنید، روی یک درخواست کلیک راست کرده و گزینه Override content را انتخاب کنید.

گزینه های لغو در منوی کشویی درخواست.

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

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

پس از تنظیم موارد لغو، DevTools شما را به Sources > Overrides > Editor می برد تا به شما امکان می دهد محتوای وب را لغو کنید .

توجه داشته باشید که منابع نادیده گرفته شده با نشان داده شده است ذخیره شد. در پنل شبکه نشانگر را روی نماد نگه دارید تا ببینید چه چیزی لغو شده است.

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

مسائل Chromium: 1465785 ، 1470532 ، 1469359 .

نادیده گرفتن محتوای XHR و واکشی درخواست‌ها

اکنون می توانید محتوای XHR را نادیده بگیرید و درخواست ها را علاوه بر سرصفحه های پاسخ آنها واکشی کنید. با چنین نادیده‌گیری‌هایی، می‌توانید پاسخ‌های API را برای اشکال‌زدایی صفحه وب خود مسخره کنید، حتی اگر باطن و API شما هنوز آماده نباشند.

DevTools در حال حاضر از لغو محتوا برای انواع درخواست‌های زیر پشتیبانی می‌کند: تصاویر (به عنوان مثال، avif، png)، فونت‌ها، fetch و XHR، اسکریپت‌ها (css و js)، و اسناد (html). DevTools اکنون گزینه Override content را برای انواع پشتیبانی نشده خاکستری می کند.

مسائل Chromium: 792101 ، 1469776 .

پنهان کردن درخواست های افزونه کروم

برای کمک به تمرکز بر روی کدی که می نویسید و فیلتر کردن درخواست های نامربوط ارسال شده توسط برنامه های افزودنی که ممکن است در Chrome نصب کرده باشید، پانل شبکه یک فیلتر جدید دریافت می کند.

برای فیلتر کردن همه درخواست‌های ارسال شده به URL chrome-extension:// ، بررسی کنید چک باکس. پنهان کردن URL های برنامه افزودنی

URL های برنامه افزودنی از جدول درخواست ها پنهان شده اند.

مسائل Chromium: 1257885 ، 1458803 .

کدهای وضعیت HTTP قابل خواندن توسط انسان

کد وضعیت در هدر درخواست اکنون متنی قابل خواندن توسط انسان را در کنار کدهای وضعیت HTTP نشان می دهد، بنابراین می توانید سریعتر بفهمید که چه اتفاقی برای درخواست افتاده است.

قبل و بعد از نمایش کدهای وضعیت HTTP قابل خواندن توسط انسان.

همچنین می توانید ماوس را روی کد وضعیت موجود در جدول درخواست نگه دارید تا همان متن را مشاهده کنید.

شماره Chromium: 1153956 .

پاسخ های چاپی زیبا برای انواع فرعی JSON

تب Response برای یک درخواست با یک application/[subtype]+json زیرنوع MIME (به عنوان مثال، ld+json ، hal+json و موارد دیگر) اکنون پاسخ را به درستی تجزیه می کند و به شما امکان می دهد آن را زیبا کنید.

قبل و بعد از تجزیه یک زیرنوع برنامه/json در پیش نمایش پاسخ شبکه.

شماره کرومیوم: 406900 .

عملکرد: تغییرات در اولویت واکشی برای رویدادهای شبکه را ببینید

اکنون پانل عملکرد دو فیلد اولویت را در خلاصه یک رویداد در مسیر شبکه نشان می‌دهد: اولویت اولیه و اولویت (نهایی)، به جای اولویت تنها. با استفاده از این فیلد اضافی، اکنون می توانید ببینید که آیا اولویت واکشی رویداد تغییر می کند یا خیر و ترتیب دانلودها را تغییر دهید. برای اطلاعات بیشتر، بهینه سازی بارگیری منبع با Fetch Priority API را ببینید.

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

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

ستون Priority در پنل Network.

مسائل Chromium: 1463901 ، 1380964 .

تنظیمات منابع به طور پیش‌فرض فعال می‌شوند: تا کردن کد و فایل خودکار آشکار می‌شود

را تنظیمات. تنظیمات > تنظیمات > چک باکس. گزینه تاشو کد اکنون به طور پیش فرض فعال است. این گزینه به شما امکان می دهد بلوک های کد را تا کنید.

برای تا کردن یک بلوک کد، نشانگر را روی شماره خط کنار ابتدای بلوک نگه دارید و روی آن کلیک کنید فرو ریختن. نماد جمع کردن روی {...} کلیک کنید تا دوباره بلوک گسترش یابد.

علاوه بر این، تنظیمات. تنظیمات > تنظیمات > چک باکس. آشکارسازی خودکار فایل‌ها در نوار کناری اکنون به‌طور پیش‌فرض نیز فعال است.

این تنظیم باعث می‌شود که درخت فایل در منابع > صفحه ، فایل فعلی را در ویرایشگر باز کند، وقتی برگه‌ها را تغییر می‌دهید.

مسائل Chromium: 1459193 ، 1336599 .

اشکال زدایی بهبود یافته مشکلات کوکی های شخص ثالث

کروم در تلاش برای کمک به ساخت وب خصوصی‌تر و به موازات به‌روزرسانی‌های مرورگرهای دیگر ، طرح Privacy Sandbox را معرفی کرد. این ابتکار اساساً حریم خصوصی را در وب افزایش می‌دهد و می‌تواند یک وب سالم و با پشتیبانی از تبلیغات را به گونه‌ای حفظ کند که کوکی‌های شخص ثالث را منسوخ کند. Privacy Sandbox دارای یک جدول زمانی تدریجی است که به شما امکان می دهد به راحتی با تغییرات سازگار شوید.

از قبل می‌توانید نحوه رفتار Chrome را پس از حذف مرحله کوکی شخص ثالث آزمایش کنید. برای انجام این کار، Chrome را از خط فرمان با پرچم --test-third-party-cookies-phaseout اجرا کنید. برای اینکه بدانید این پرچم چه کاری انجام می دهد، به اشکال زدایی کوکی ها مراجعه کنید.

صرف نظر از نحوه اجرای Chrome (با یا بدون پرچم)، تب Issues اکنون دارای چک باکس. شامل چک باکس مشکلات کوکی شخص ثالث که به طور پیش‌فرض برای همه کاربران جدید Chrome فعال است و در نتیجه گزارش می‌دهد:

  • اخطار تغییر ناگهانی در مورد مرحله آتی.
  • مشکلات مربوط به کوکی های شخص ثالث.

اگر می‌خواهید به‌عنوان یک کاربر فعلی Chrome، هشدارهای کوکی‌ها را در مورد حذف مرحله آینده ببینید، حتماً این کادر را علامت بزنید.

برای آزمایش این، کوکی‌ها را در این صفحه نمایشی بررسی کنید.

مشکلات کوکی شخص ثالث در برگه مشکلات گزارش شده است.

علاوه بر این، چک باکس. فیلتر کوکی‌های پاسخ مسدود شده در پانل شبکه تغییر شکل داده شده است تا مشخص شود فقط کوکی‌های پاسخ مسدود شده را نشان می‌دهد.

چک باکس فعال است و فقط درخواست‌هایی را نشان می‌دهد که کوکی‌های پاسخ مسدود شده دارند.

مسائل Chromium: 1458839 ، 1462693 ، 1466310 .

اشکال زدایی پیش بارگذاری در پنل برنامه

تیم کروم در حال بازگرداندن کامل پیش‌اجرای صفحات آینده است که کاربر احتمالاً به آن‌ها می‌رود. DevTools برای اینکه بتوانید این را اشکال زدایی کنید، بخش Preloading را به پنل Application اضافه می کند. واکشی و پیش‌اجرای جدید (که در مجموع به عنوان "پیش بارگیری ناوبری" شناخته می‌شود) از API قوانین گمانه‌زنی استفاده می‌کند تا از راهنمایی‌های منبع مبتنی بر پیوند .

در این صفحه نمایشی ، در بخش Application > Preloading ، می توانید بررسی کنید:

  • قوانین حدس و گمان که تمام مجموعه قوانین موجود در صفحه فعلی را فهرست می کند.
  • پیش بارگیری هایی که همه URL های واکشی شده و از پیش اجرا شده را از مجموعه قوانین فهرست می کند.
  • این صفحه که وضعیت از پیش اجرا شده صفحه فعلی را فهرست می کند.

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

شماره Chromium: 1410709 .

رنگ های جدید

شاید قبلاً متوجه شده باشید که DevTools اکنون ظاهر تازه‌ای دارد که بهتر با Chrome هماهنگ می‌شود. یکی از عوامل موثر، طرح رنگ جدید است.

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

این نسخه (117) بهبودهای UX بیشتری را برای DevTools به ارمغان می‌آورد، که هم قبلاً ذکر شد و هم فهرست‌بندی شده است، از جمله تعدادی از متون بهبود یافته UI.

شماره Chromium: 1456677 .

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

پنل Lighthouse اکنون Lighthouse 10.4.0 را اجرا می کند. مهمتر از همه، این نسخه ممیزی های دسترسی جدید را برای موارد زیر اضافه می کند:

به عنوان مثال:

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

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

شماره Chromium: 772558 .

افزونه اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است

پسوند اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است و در مخزن frontend DevTools قرار دارد. این برنامه افزودنی قابلیت اشکال زدایی را در DevTools برای برنامه های C++ که در WebAssembly کامپایل شده اند، فعال می کند. برای اطلاعات بیشتر، Debug C/C++ WebAssembly را ببینید.

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

شماره Chromium: 1410709 .

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

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

  • CSS Nesting : پانل Elements اکنون کل زنجیره انتخابگر را برای کودکان تودرتو نشان می دهد ( 1172985 ).
  • Application > Manifest اکنون یک بخش Overlay Controls Window دارد که بررسی می کند آیا مقدار display_override در Manifest وجود دارد یا خیر و پیوندهایی به اسناد مربوطه ارائه می دهد.
  • درخت Sources > Page اکنون موارد زیر را انجام می دهد، از جمله ( 1442863 ) اما نه محدود به آن:
    • اگر تمام محتوای آنها در فهرست نادیده گرفته شود، پوشه ها خاکستری می شوند.
    • پوشه ها را به رنگ نارنجی رنگ می کند اگر تمام محتوای آنها از نقشه منبع باشد.
  • عملکرد : تنظیمات ضبط اکنون به طور خودکار هنگام شروع ضبط پنهان می شوند ( 1455498 ).
  • Sources > Editor رفتار Ctrl + Arrow (Win) و Opt + Arrow (MacOs) را بازیابی کرد ( 1468208 ).
  • Animations > Pause all toggle اکنون وضعیت خود را در بارگذاری صفحه حفظ می کند ( 1446046 ).
  • Application > Storage > Cache storage به بخش Application > Storage > Cache منتقل شد ( 1462622 ).
  • برخی از متون رابط کاربری و نکات ابزار بهبود یافته اند: نکته ابزار همزمانی سخت افزار ، متون فیلتر شبکه و گزینه منوی اصلی ، حروف بزرگ در نمای درختی برنامه ، شبکه > متن سرصفحه ها ، منابع > لغو و متون فایل سیستم .

ویژگی های آزمایشی جدید

شبیه سازی رندر جدید: prefers-reduced-transparency

کاربران وب‌سایت شما ممکن است شروع به فعال کردن ویژگی جدید آزمایشی prefers-reduced-transparency CSS در دستگاه‌های خود کنند تا ترجیح خود را برای کاهش جلوه‌های شفاف نشان دهند. ممکن است برای افزایش دسترسی به وب سایت خود، این اولویت را در نظر بگیرید. برای کمک به شما، تب Rendering drawer اکنون می‌تواند prefers-reduced-transparency: reduce ، بنابراین می‌توانید یک راه‌حل را نمونه‌سازی کنید و نحوه رفتار وب‌سایت خود را در این مورد آزمایش کنید.

برای آزمایش این ویژگی در Chrome، ویژگی‌های پلتفرم وب آزمایشی را در chrome://flags فعال کنید.

شماره Chromium: 1424879 .

مانیتور پروتکل پیشرفته

Chrome DevTools از پروتکل Chrome DevTools Protocol (CDP) برای ابزارسازی، بازرسی، اشکال زدایی و نمایه مرورگرهای Chrome استفاده می کند. اگر یک توسعه‌دهنده Chromium یا DevTools هستید، مانیتور پروتکل راهی برای مشاهده تمام درخواست‌ها و پاسخ‌های CDP ارائه شده توسط DevTools و ارسال دستورات CDP در اختیار شما قرار می‌دهد.

مانیتور پروتکل یک رابط جدید دریافت می کند که به شما امکان می دهد دستورات CDP را آسان تر بسازید و ارسال کنید. حالا دیگر لازم نیست دستورات و پارامترهای آنها را در مستندات جستجو کنید، DevTools آنها را به شما پیشنهاد می کند.

در گوشه سمت راست پایین تب کشوی مانیتور پروتکل ، کلیک کنید پنل سمت چپ باز است ویرایشگر دستور CDP را نشان دهید ، یک هدف را انتخاب کنید، یک دستور را تایپ کنید، در صورت نیاز یکی از موارد پیشنهادی را انتخاب کنید، مقادیر پارامتر را مشخص کنید و کلیک کنید ارسال کنید. ارسال فرمان ( Ctrl/Cmd + Enter ).

تعیین و ارسال دستور CDP.

شماره Chromium: 1469345 .

کانال های پیش نمایش را دانلود کنید

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

با تیم Chrome DevTools در تماس باشید

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

چیزهای جدید در DevTools

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

،

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

بهبود پنل شبکه

حتی سریعتر محتوای وب را به صورت محلی لغو کنید

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

برای لغو محتوای وب، پانل شبکه را باز کنید، روی یک درخواست کلیک راست کرده و گزینه Override content را انتخاب کنید.

گزینه های لغو در منوی کشویی درخواست.

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

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

پس از تنظیم موارد لغو، DevTools شما را به Sources > Overrides > Editor می برد تا به شما امکان می دهد محتوای وب را لغو کنید .

توجه داشته باشید که منابع نادیده گرفته شده با نشان داده شده است ذخیره شد. در پنل شبکه نشانگر را روی نماد نگه دارید تا ببینید چه چیزی لغو شده است.

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

مسائل Chromium: 1465785 ، 1470532 ، 1469359 .

نادیده گرفتن محتوای XHR و واکشی درخواست‌ها

اکنون می توانید محتوای XHR را نادیده بگیرید و درخواست ها را علاوه بر سرصفحه های پاسخ آنها واکشی کنید. با چنین نادیده‌گیری‌هایی، می‌توانید پاسخ‌های API را برای اشکال‌زدایی صفحه وب خود مسخره کنید، حتی اگر باطن و API شما هنوز آماده نباشند.

DevTools در حال حاضر از لغو محتوا برای انواع درخواست‌های زیر پشتیبانی می‌کند: تصاویر (به عنوان مثال، avif، png)، فونت‌ها، fetch و XHR، اسکریپت‌ها (css و js)، و اسناد (html). DevTools اکنون گزینه محتوای Override را برای انواع پشتیبانی نشده از بین می برد.

مشکلات کروم: 792101 ، 1469776 .

پنهان کردن درخواست های افزونه کروم

برای کمک به شما در تمرکز روی کدی که نویسنده خود تمرکز کرده و درخواست های بی ربط ارسال شده توسط پسوندهایی را که ممکن است در Chrome نصب کرده اید ، فیلتر کنید ، پنل شبکه فیلتر جدیدی دریافت می کند.

برای فیلتر کردن تمام درخواست های ارسال شده به chrome-extension:// urls ، بررسی کنید چک باکس. URL های پسوند را مخفی کنید .

URL های پسوند پنهان از جدول درخواست ها.

مشکلات کروم: 1257885 ، 1458803 .

کدهای وضعیت HTTP قابل خواندن توسط انسان

کد وضعیت موجود در هدر درخواست اکنون متن قابل خواندن انسانی را در کنار کدهای وضعیت HTTP نشان می دهد ، بنابراین می توانید بفهمید که چه اتفاقی برای درخواست سریعتر افتاده است.

قبل و بعد از نمایش کدهای وضعیت HTTP قابل خواندن انسانی.

همچنین می توانید برای دیدن متن مشابه ، روی کد وضعیت در جدول درخواست شناور شوید.

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

پاسخ های چاپی زیبا برای انواع فرعی JSON

برگه پاسخ برای درخواست با یک application/[subtype]+json زیرگروه MIME (به عنوان مثال ، ld+json ، hal+json و دیگران) اکنون پاسخ را به درستی تجزیه می کند و به شما امکان می دهد آن را زیباتر کنید.

قبل و بعد از تجزیه یک زیرگروه برنامه/JSON در پیش نمایش پاسخ شبکه.

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

عملکرد: تغییرات در اولویت واکشی برای رویدادهای شبکه را ببینید

پانل عملکرد اکنون دو قسمت اولویت را در خلاصه یک رویداد در آهنگ شبکه نشان می دهد: اولویت اولیه و اولویت (نهایی) ، به جای فقط اولویت Singe. با استفاده از این قسمت اضافی ، اکنون می توانید ببینید که آیا اولویت اول این رویداد تغییر می کند و ترتیب بارگیری را تغییر می دهد یا خیر. برای اطلاعات بیشتر ، به بهینه سازی بارگیری منابع با API اولویت Fetch مراجعه کنید.

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

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

ستون اولویت در پنل شبکه.

مشکلات کروم: 1463901 ، 1380964 .

تنظیمات منابع به طور پیش‌فرض فعال می‌شوند: تا کردن کد و فایل خودکار آشکار می‌شود

را تنظیمات. تنظیمات > ترجیحات > چک باکس. گزینه تاشو کد اکنون به طور پیش فرض فعال است. این گزینه به شما امکان می دهد بلوک های کد را جمع کنید.

برای جمع کردن یک بلوک کد ، روی شماره خط کنار شروع بلوک حرکت کنید و روی روی کلیک کنید فرو ریختن. نماد فروپاشی. روی {...} کلیک کنید تا دوباره بلوک گسترش یابد.

علاوه بر این، تنظیمات. تنظیمات > ترجیحات > چک باکس. اکنون به طور خودکار پرونده ها را در نوار کناری نشان می دهد نیز به طور پیش فرض فعال شده است.

این تنظیم باعث می شود درخت فایل در منابع > صفحه هنگام تغییر برگه ها ، پرونده فعلی را در ویرایشگر باز کنید.

شماره های کروم: 1459193 ، 1336599 .

اشکال زدایی بهبود یافته مشکلات کوکی های شخص ثالث

Chrome در تلاش برای کمک به ساختن یک وب خصوصی تر و به موازات به روزرسانی توسط سایر مرورگرها ، ابتکار عمل Sandbox را معرفی کرد. این ابتکار اساساً باعث افزایش حریم خصوصی در وب می شود و می تواند یک وب سالم و پشتیبانی شده از تبلیغات را به گونه ای حفظ کند که کوکی های شخص ثالث را منسوخ کند. حریم خصوصی Sandbox دارای یک جدول زمانی فاز تدریجی است که به شما امکان می دهد تا به راحتی با تغییرات سازگار شوید.

در حال حاضر می توانید آزمایش کنید که Chrome چگونه پس از مرحله فاز کوکی شخص ثالث رفتار می کند. برای انجام این کار ، Chrome را از خط فرمان با پرچم --test-third-party-cookies-phaseout اجرا کنید. برای یادگیری اینکه این پرچم چه کاری انجام می دهد ، به کوکی های اشکال زدایی مراجعه کنید.

صرف نظر از نحوه اجرای Chrome (با یا بدون پرچم) ، برگه Issues اکنون دارای چک باکس. شامل کادر شماره کادر کلوچه های شخص ثالث که به طور پیش فرض برای همه کاربران جدید Chrome فعال شده است و در نتیجه گزارش می دهد:

  • هشدار تغییر در مورد مرحله آینده.
  • موضوعات مربوط به کوکی های شخص ثالث.

اگر می خواهید هشدارهای کوکی در مورد مرحله آینده به عنوان یک کاربر موجود Chrome را ببینید ، حتماً این کادر را بررسی کنید.

برای آزمایش این ، کوکی ها را در این صفحه نمایشی بازرسی کنید.

مسائل کوکی شخص ثالث گزارش شده در برگه موضوعات.

علاوه بر این، چک باکس. فیلتر کوکی های پاسخ مسدود شده در پنل شبکه مجدداً مورد استفاده قرار گرفته است تا روشن شود که فقط کوکی های پاسخ مسدود شده را نشان می دهد.

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

شماره های کروم: 1458839 ، 1462693 ، 1466310 .

اشکال زدایی پیش بارگذاری در پنل برنامه

تیم Chrome در حال بازگرداندن کامل صفحات آینده است که احتمالاً کاربر به آن حرکت می کند. برای اشکال زدایی این مسئله ، DevTools بخش از قبل بارگذاری را به پانل برنامه اضافه می کند. پیش نویس و پیش نویس جدید (که در مجموع به عنوان "پیش بارگذاری ناوبری" شناخته می شود) از API قوانین گمانه زنی استفاده می کند و نه به نکات مربوط به منابع مبتنی بر پیوند .

در این صفحه نسخه ی نمایشی ، در بخش برنامه > پیش بارگذاری ، می توانید بازرسی کنید:

  • قوانین حدس و گمان که تمام مجموعه های قانون موجود در صفحه فعلی را لیست می کند.
  • پیش بارگذاری شده که تمام URL های پیش ساخته و پیش ساخته را از مجموعه قانون لیست می کند.
  • این صفحه که وضعیت پیش نویس صفحه فعلی را نشان می دهد.

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

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

رنگ های جدید

شاید قبلاً متوجه شده باشید که Devtools اکنون ظاهری تازه دارد که بهتر با Chrome هماهنگ می شود. یکی از عوامل مؤثر ، طرح رنگ جدید است.

قبل و بعد از استفاده از رنگ های جدید.

این نسخه (117) پیشرفت های بیشتری را در Devtools ، که قبلاً ذکر شده و ذکر شده است ، به ارمغان می آورد ، از جمله تعدادی از متون UI بهبود یافته.

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

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

پانل Lighthouse اکنون Lighthouse 10.4.0 را اجرا می کند. مهمتر از همه ، این نسخه ممیزی های دسترسی جدید را برای موارد زیر اضافه می کند:

به عنوان مثال:

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

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

شماره Chromium: 772558 .

افزونه اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است

پسوند اشکال زدایی C/C ++ WebAssembly برای DevTools اکنون منبع باز است و در مخزن Devtools Frontend ساکن است. این برنامه افزودنی امکان اشکال زدایی در DevTools را برای برنامه های C ++ که در WebAssembly تهیه شده است ، امکان پذیر می کند. برای اطلاعات بیشتر ، به اشکال زدایی C/C ++ WebAssembly مراجعه کنید.

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

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

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

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

  • CSS Nesting : پانل عناصر اکنون کل زنجیره انتخابی برای کودکان تو در تو را نشان می دهد ( 1172985 ).
  • Application > Mistering Now دارای یک بخش Overlay Controls Windows است که آیا مقدار display_override در مانیفست موجود است و پیوندهایی را به مستندات مربوطه ارائه می دهد.
  • منابع > درخت صفحه اکنون موارد زیر را انجام می دهد ، از جمله اما محدود به ( 1442863 ):
    • اگر تمام محتوای آنها نادیده گرفته شود ، پوشه های خاکستری را از بین می برد.
    • پوشه های رنگ در نارنجی اگر تمام محتوای آنها از نقشه منبع باشد.
  • عملکرد : تنظیمات ضبط اکنون هنگام شروع ضبط به طور خودکار پنهان می شوید ( 1455498 ).
  • منابع > ویرایشگر رفتار Ctrl + Arrow (WIN) و OPT + Arrow (MACOS) ( 1468208 ) را ترمیم کرد.
  • انیمیشن ها > مکث همه ضامن اکنون وضعیت خود را در بارهای صفحه نگه می دارد ( 1446046 ).
  • برنامه > ذخیره سازی > ذخیره سازی حافظه نهان به برنامه > ذخیره سازی > بخش حافظه نهان ( 1462622 ) منتقل شد.
  • برخی از متون UI و وسایل ابزار بهبود یافته است: ابزار ابزار همزمانی سخت افزار ، متون فیلتر شبکه و گزینه اصلی منو ، سرمایه گذاری در نمای درخت برنامه ، شبکه> متن ها ، منابع> Overrides و متون سیستم فایل .

ویژگی های جدید آزمایشی

تقلید جدید رندر: prefers-reduced-transparency

کاربران وب سایت شما ممکن است شروع به فعال کردن ویژگی های جدید تجربی از ویژگی های رسانه ای CSS در دستگاه های خود prefers-reduced-transparency تا ترجیح آنها را برای کاهش اثرات شفاف نشان دهند. ممکن است برای افزایش دسترسی به وب سایت خود ، این اولویت را در نظر بگیرید. برای کمک به شما ، برگه کشو رندر هم اکنون می تواند از prefers-reduced-transparency: reduce ، بنابراین می توانید یک راه حل را نمونه برداری کنید و نحوه رفتار وب سایت شما در این مورد را آزمایش کنید.

برای آزمایش این ویژگی در Chrome ، ویژگی های پلت فرم وب آزمایشی را در chrome://flags فعال کنید.

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

مانیتور پروتکل پیشرفته

Chrome Devtools از پروتکل Chrome Devtools (CDP) برای مرورگرهای ساز ، بازرسی ، اشکال زدایی و پروفایل کروم استفاده می کند. اگر شما یک توسعه دهنده Chromium یا DevTools هستید ، مانیتور پروتکل راهی را برای مشاهده کلیه درخواست ها و پاسخ های CDP توسط DevTools و ارسال دستورات CDP در اختیار شما قرار می دهد.

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

در گوشه سمت راست پایین برگه کشو مانیتور پروتکل ، کلیک کنید پانل سمت چپ باز است. نمایش ویرایشگر فرمان CDP ، یک هدف را انتخاب کنید ، تایپ کردن یک دستور را شروع کنید ، در صورت لزوم یکی از پیشنهادهای پیشنهادی را انتخاب کنید ، مقادیر پارامتر را مشخص کنید و کلیک کنید ارسال کنید. ارسال فرمان ( Ctrl/CMD + Enter ).

مشخص کردن و ارسال دستور CDP.

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

کانال های پیش نمایش را دانلود کنید

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

با تیم Chrome DevTools در تماس باشید

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

چیزهای جدید در DevTools

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