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

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

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

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

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

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

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

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

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

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

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

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

مشکلات کرومیوم: ۱۴۶۵۷۸۵ ، ۱۴۷۰۵۳۲ ، ۱۴۶۹۳۵۹ .

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

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

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

مشکلات کرومیوم: ۷۹۲۱۰۱ ، ۱۴۶۹۷۷۶ .

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

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

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

آدرس‌های اینترنتی افزونه‌ها از جدول درخواست‌ها پنهان شده‌اند.

مشکلات کرومیوم: ۱۲۵۷۸۸۵ ، ۱۴۵۸۰۳ .

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

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

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

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

شماره کروم: ۱۱۵۳۹۵۶

پاسخ‌های Pretty-print برای زیرگروه‌های JSON

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

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

مشکل کروم: ۴۰۶۹۰۰

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

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

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

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

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

مشکلات کروم: ۱۴۶۳۹۰۱ ، ۱۳۸۰۹۶۴ .

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

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

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

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

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

مشکلات کرومیوم: ۱۴۵۹۱۹۳ ، ۱۳۳۶۵۹۹ .

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

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

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

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

  • هشدار تغییر فوری در مورد حذف تدریجی قریب‌الوقوع.
  • مسائل مربوط به کوکی‌های شخص ثالث.

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

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

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

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

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

مشکلات کرومیوم: ۱۴۵۸۸۳۹ ، ۱۴۶۲۶۹۳ ، ۱۴۶۶۳۱۰ .

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

تیم کروم در حال بازگرداندن پیش‌رندر کامل صفحات آینده‌ای است که کاربر احتمالاً به آنها پیمایش خواهد کرد. برای اینکه بتوانید این مشکل را برطرف کنید، DevTools بخش Preloading را به پنل Application اضافه می‌کند. پیش‌رندر و پیش‌رندر جدید (که در مجموع به عنوان "پیش‌بارگذاری پیمایشی" شناخته می‌شوند) از API Speculation Rules به جای link-based resource hints استفاده می‌کند.

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

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

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

شماره کروم: ۱۴۱۰۷۰۹ .

رنگ‌های جدید

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

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

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

شماره کروم: ۱۴۵۶۶۷۷ .

فانوس دریایی ۱۰.۴.۰

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

برای مثال:

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

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

مشکل کروم: ۷۷۲۵۵۸

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

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

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

شماره کروم: ۱۴۱۰۷۰۹ .

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

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

  • تودرتوسازی CSS : پنل عناصر اکنون کل زنجیره انتخابگر را برای فرزندان تودرتو ( 1172985 ) نشان می‌دهد.
  • اپلیکیشن > مانیفست اکنون بخشی به نام Window Controls Overlay دارد که بررسی می‌کند آیا مقدار display_override در مانیفست وجود دارد یا خیر و لینک‌هایی به مستندات مربوطه ارائه می‌دهد.
  • درختواره‌ی منابع > صفحات اکنون موارد زیر را انجام می‌دهد، از جمله ( 1442863 ) اما نه محدود به آن:
    • اگر تمام محتوای پوشه‌ها در فهرست نادیده گرفته شده باشد، آنها را خاکستری می‌کند.
    • اگر تمام محتوای پوشه‌ها از یک نقشه منبع باشد، آنها را به رنگ نارنجی درمی‌آورد.
  • عملکرد : تنظیمات ضبط اکنون به طور خودکار هنگام شروع ضبط پنهان می‌شوند ( ۱۴۵۵۴۹۸ ).
  • منابع > ویرایشگر رفتار Ctrl + Arrow (ویندوز) و Opt + Arrow (مک) ( 1468208 ) را بازیابی کرد.
  • گزینه‌ی «انیمیشن‌ها > مکث همه » اکنون وضعیت خود را در طول بارگذاری صفحات حفظ می‌کند ( ۱۴۴۶۰۴۶ ).
  • برنامه > ذخیره‌سازی > ذخیره‌سازی کش به بخش برنامه > ذخیره‌سازی > کش ( ۱۴۶۲۶۲۲ ) منتقل شد.
  • برخی از متون رابط کاربری و راهنماها بهبود یافته‌اند: راهنمای ابزار همزمانی سخت‌افزار ، متون فیلتر شبکه و یک گزینه در منوی اصلی ، بزرگ‌نویسی حروف در نمای درختی برنامه ، متون Network > Headers ، Sources > Overrides و متون Filesystem .

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

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

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

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

شماره کروم: ۱۴۲۴۸۷۹ .

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

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

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

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

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

شماره کروم: ۱۴۶۹۳۴۵

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

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

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

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

قابلیت‌های جدید در DevTools

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