موارد جدید در 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 پوشش داده شده است.