چیزهای جدید در DevTools (Chrome 120)

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

حذف مرحله کوکی شخص ثالث

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

این چک باکس. چک باکس شامل کردن مسائل کوکی شخص ثالث به طور پیش‌فرض برای همه کاربران Chrome فعال شده است، بنابراین برگه مشکلات اکنون به شما در مورد کوکی‌هایی هشدار می‌دهد که تحت تأثیر منسوخ شدن آتی و حذف تدریجی کوکی‌های شخص ثالث قرار خواهند گرفت. برای جلوگیری از دیدن این مسائل می توانید کادر انتخاب را در هر زمان پاک کنید.

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

شماره Chromium: 1466310 .

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

برنامه افزودنی ابزار تجزیه و تحلیل Sandbox برای DevTools با جدیدترین نسخه قبل از انتشار 0.3.2 در حال توسعه است. این ابزار به شما امکان می دهد که چگونه وب سایت شما از کوکی ها استفاده می کند و راهنمایی هایی را در مورد API های جدید Chrome حفظ حریم خصوصی ارائه می دهد.

برای تجزیه و تحلیل کوکی های خود:

  1. افزونه را در کروم نصب کنید .
  2. وب سایت خود را در یک برگه واحد برای بهترین تجزیه و تحلیل باز کنید.
  3. DevTools را باز کرده و به پانل Sandbox Privacy بروید. این پانل ممکن است در پشت آن پنهان باشد برگه های بیشتر دکمه کشویی در بالا
  4. بخش کوکی ها را باز کرده و روی تجزیه و تحلیل این برگه کلیک کنید. اگر این ابزار هیچ کوکی پیدا نکرد ، دوباره بارگیری کنید.

ابزار تجزیه و تحلیل جعبه ایمنی حریم خصوصی.

برای کسب اطلاعات بیشتر در مورد نحوه استفاده از ابزار تجزیه و تحلیل ماسهبازی حریم خصوصی (PSAT) ، به موارد زیر مراجعه کنید:

  • PSAT's How To .
  • برای پیش بینی آنچه که احتمالاً پس از شروع استهلاک اتفاق می افتد ، یک محیط ارزیابی را تنظیم کنید.
  • برای شناسایی جنبه های تحت تأثیر ، به اقدامات تجزیه و تحلیل عمومی مراجعه کنید.
  • برای یادگیری نحوه تجزیه و تحلیل سناریوهای رایج، از جمله تجزیه و تحلیل، تجارت الکترونیک، خدمات SSO، محتوای جاسازی شده و موارد دیگر، نمونه‌های نمایشی را در سناریوهای تحلیلی بررسی کنید.

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

فهرست نادیده گرفتن پیشرفته

الگوی خروج پیش‌فرض برای node_modules

این نسخه بیان منظم پیش فرض را به عنوان یک قانون محرومیت سفارشی در آن امکان پذیر می کند تنظیمات. تنظیمات > فهرست نادیده گرفته شود . برای کمک به شما فقط روی کد خود تمرکز کنید ، اشکال زدایی اکنون اسکریپت ها را از /node_modules/ و /bower_components/ به طور پیش فرض می کند. شما می توانید این قانون را در هر زمان و در تنظیمات غیرفعال کنید.

قبل و بعد از اضافه کردن یک بیان منظم.

شماره Chromium: 1496301 .

استثنائات اکنون در صورت گرفتار یا عبور از کد غیر نادیده گرفته شده ، اجرای آن را متوقف می کنند

وقتی کد را با چک باکس. مکث در استثنائات گرفتار بررسی شده ، اشکال زدایی اکنون اجرای استثنائات گرفتار زیر را متوقف می کند ، چه همزمان و چه همزمان:

  • استثنائاتی که در قاب های غیر نادیده گرفته شده در پشته تماس گرفته شده است.
  • استثنائاتی را گرفتند که از قاب های غیر نادیده گرفته شده در پشته تماس عبور می کنند. برای مثال، اسکرین شات را ببینید.

مکث در یک استثناء گرفتار که از طریق کد غیر نادیده گرفته شده است.

برای آزمایش این رفتار ، این صفحه نمایشی را باز کنید:

  1. DevTools> منابع را باز کنید ، پوشه hidden به لیست نادیده بگیرید و بررسی کنید چک باکس. مکث در مورد استثناهای گرفتار شده
  2. در صفحه ، در زیر لیست "گرفتار" سناریوها ، روی دکمه های مختلف کلیک کرده و اجرای مکث را در موارد ذکر شده مشاهده کنید.

برای توقف موقت اجرا بر روی استثناهای کشف شده و/یا کشف نشده (در صورت علامت زدن) در تماس‌های ناهمزمان، Debugger به دنبال کنترل‌کننده‌های رد در میان وعده‌ها می‌گردد. با شروع این نسخه، Debugger دیگر پیش‌بینی نمی‌کند که Promise.finally() استثنایی را بگیرد، مشابه اینکه بلاک try...finally هیچ استثنایی را نمی‌گیرد.

مسائل Chromium: 1489312 ، 1291064 .

x_google_ignoreList در نقشه های منبع به ignoreList تغییر نام داد

مشخصات نقشه های منبع، فیلد ignoreList را به جای x_google_ignoreList اتخاذ کرده است و DevTools اکنون از نام جدید با یک بازگشت به نام قدیمی پشتیبانی می کند. Frameworks و Bundlers اکنون می توانند از نام فیلد جدید استفاده کنند.

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

برای اطلاعات بیشتر در مورد نقشه های منبع، نگاه کنید به:

تغییر حالت ورودی جدید در حین اشکال زدایی از راه دور

اکنون می توانید هنگام اشکال زدایی یک برگه Chrome از راه دور ، بین لمس و ورودی ماوس جابجا شوید. به عنوان مثال، هنگامی که یک نمونه کروم را با --remote-debugging-port=<port> اجرا می کنید و از طریق chrome://inspect/#devices به این هدف شبکه متصل می شوید.

برای دیدن حالت ورودی در عمل ، فیلم را تماشا کنید.

شماره Chromium: 1410433 .

اکنون پنل Elements نشانی‌های اینترنتی را برای گره‌های #document نشان می‌دهد

برای اینکه به شما اجازه می دهد تا Iframes را راحت تر کنید ، پانل عناصر اکنون documentURL در کنار گره های #document نمایش می دهد.

Documenturl قبل و بعد از گره #document shows را نشان می دهد.

موضوع Chromium: 1376976 .

سیاست امنیتی محتوا موثر در پنل برنامه

اکنون می توانید جزئیات خط مشی امنیت محتوا (CSP) یک قاب بازرسی را مشاهده کنید. برای مشاهده جزئیات ، به برنامه کاربردی > فریم ها بروید ، یک قاب را انتخاب کرده و به بخش خط مشی امنیت محتوا (CSP) بروید.

بخش خط مشی امنیت محتوا واقع در برگه برنامه.

شماره Chromium: 1424714 .

بهبود اشکال زدایی انیمیشن

در تب انیمیشن ها ، اکنون می توانید:

  • برای تنظیم سر بازی ، در هر نقطه روی عنوان Timeline کلیک کنید. اگر در حال حاضر بازی می کرد و در غیر این صورت متوقف می شود ، این انیمیشن همچنان بازی می کند. قبلاً باید آن را بکشید.
  • برای دیدن نام های کامل انیمیشن ، ستون نام را تغییر اندازه دهید.

مسائل Chromium: 1492460 ، 1489721 .

آیا به این کد اعتماد دارید؟ گفتگو در Sources و هشدار self-XSS در کنسول

این چک باکس. نشان دادن هشدار در مورد خود XSS هنگام چسباندن آزمایش کد به طور پیش فرض فعال شده است. Self-XSS (اسکریپت نویسی خود متقابل سایت) حمله ای است که شما را فریب می دهد تا کدهای مخرب را در DevTools قرار دهید و به مهاجم اجازه می دهد تا کنترل حساب های وب و اطلاعات شخصی شما را در دست بگیرد.

اگر شما یک کاربر جدید DevTools هستید و سعی در چسباندن کد دارید ، پانل منابع اکنون به شما نشان می دهد که آیا به این کد اعتماد دارید؟ گفتگو و کنسول اکنون هشدار مشابهی را نشان می دهد. فقط کدی را که می فهمید چسبانده و خودتان را مرور کرده اید. برای چسباندن، در صورت درخواست allow pasting تایپ کنید. هنگامی که یک بار چسباندن یک بار مجاز شد ، هشدار هرگز دوباره نشان داده نمی شود.

"آیا به این کد اعتماد دارید؟" هنگام چسباندن کد به منابع گفتگو کنید.

شماره Chromium: 345205 .

نقاط شکست شنونده رویداد در کارگران وب و ورکلت ها

هنگامی که نقطه انفصال رویدادی را در Sources > Event Liner Breakpoints تنظیم می کنید، علاوه بر توقف در این رویداد در وب سایت خود، Debugger اکنون همچنین هنگامی که رویداد مربوطه در یک وب کارگر یا worklet از هر نوع، از جمله Worklet ذخیره سازی اشتراکی اتفاق می افتد، متوقف می شود.

هنگامی که یک کارگر سرویس با عملکرد تنظیمات تنظیم شده تماس می گیرد ، اشکال زدایی مکث کرد.

شماره Chromium: 1445175 .

نشان رسانه جدید برای <audio> و <video>

اکنون می توانید نشان جدید رسانه را برای عناصر <audio> و <video> در پانل عناصر فعال کنید. وقتی روی نشان کلیک می کنید ، شما را به پانل رسانه می برد ، بنابراین می توانید این عناصر را اشکال زد.

نشان رسانه جدید برای برچسب های صوتی و تصویری فعال شده است.

این ویژگی در حال توسعه است و بیشتر بهبود می یابد. تیم DevTools دوست دارد از جونسو (جرمی) یو بخاطر فرود این پیشرفت ابراز قدردانی کند.

شماره Chromium: 1448214 .

پیش بارگذاری به بارگذاری گمانه زنی تغییر نام داد

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

قبل و بعد از تغییر نام از پیش بارگذاری در بارگیری سوداگرانه.

شماره Chromium: 1478888 .

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

پنل Lighthouse اکنون Lighthouse 11.2.0 را اجرا می کند. لیست کامل تغییرات را ببینید.

این بروزرسانی شامل تعمیرات اساسی در گروه عملکرد است. بینش عملکرد اکنون بر اساس تأثیر تخمین زده شده آنها در معیارهای عملکرد به ثمر رسیده و در اولویت قرار می گیرد. علاوه بر این ، سنج نمره عملکرد شامل اطلاعات دقیق تر در مورد چگونگی تأثیر هر متریک بر نمره است.

تعمیرات اساسی قبل و بعد از عملکرد

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

مسائل Chromium: 772558 .

بهبود دسترسی

این نسخه پیشرفت های دسترسی زیر را دارد:

  • خوانندگان صفحه نمایش اکنون وضعیت (بررسی یا بررسی نشده) از کادر انتخاب تحت منابع > نقاط شکست را اعلام می کنند.
  • اکنون می توانید با صفحه کلید به موارد مخفی مانند این منوی کشویی دسترسی پیدا کنید.

مسائل Chromium: 1488645 ، 1484918 .

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

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

  • عملکرد : نشانگر LCP که گاهی از دست رفته در ضبط ( 1487136 ) ثابت شده است.
  • بارهای سوداگرانه: URL های کامل را برای اهداف موجود در منوی کشویی در پنل شبکه ( 1471020 ) ثابت کرد.
  • پوشش :
    • پوشش خط به خط ثابت برای کد زیبا چاپ شده ( 1464974 ).
    • اطلاعات پوشش اکنون در بارگیری مجدد صفحه ( 1494457 ) به روز شده است.
  • کنسول :
    • انتخاب متن جزئی ثابت در پیام ها ( 1487449 ).
    • رفع سوسو زدن کشویی به طور خودکار ( 1487453 ).
    • پرانتز پشتیبانی شده در مسیرهای پشته و URL در آثار پشته ( 1473926 ).
  • منابع : از برجسته سازی نحو Typescript using کلمه کلیدی ( 1490515 ) پشتیبانی می کند.
  • منوی باز سریع اکنون روشهای خصوصی را نشان می دهد ( 1492957 ).
  • برنامه > خدمات پس زمینه : نوار اکشن برتر اکنون هنگام تغییر اندازه متن متن را می بندد ( 1487276 ).
  • عناصر > سبک ها :
    • رفع وضوح متغیرهای CSS ارثی برای عناصر شکاف دار ( 1492162 ).
    • هنگام غیرفعال کردن یک ویژگی CSS ، اکنون نظرات آن برای رفع شکستگی نحو ( 1101224 ) سلب شده است.
  • شبکه : اکنون ستون Priority یک راهنمای ابزار با اطلاعات اولویت اولیه را نشان می‌دهد (هنگامی که ردیف‌های درخواست بزرگ علامت زده می‌شوند، همین مورد نشان داده می‌شود) ( 1495735 ).
  • محرومیت ها:
    • تنظیم فرمت رنگ در نسخه های قبلی غیرفعال شده است و اکنون حذف شده است.
    • گزینه حذف همه گزینه در منابع اکنون به دلیل استفاده کم پس از ساده تر کردن Overrides ( 1473681 ) حذف شده است.

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

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

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

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

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

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