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

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

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

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

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

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

شماره Chromium: 1466310 .

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

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

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

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

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

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

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

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

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

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

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

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

شماره Chromium: 1496301 .

در حال حاضر استثناها در صورت شناسایی یا عبور از کدهای نادیده گرفته نشده، اجرا را متوقف می کنند

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

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

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

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

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

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

مسائل Chromium: 1489312 ، 1291064 .

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

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

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

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

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

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

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

شماره Chromium: 1410433 .

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

برای اینکه بتوانید iframe ها را راحت تر اشکال زدایی کنید، اکنون پنل Elements documentURL در کنار گره های #document نمایش می دهد.

قبل و بعد documentURL را در کنار #document node نشان می دهد.

موضوع Chromium: 1376976 .

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

اکنون می توانید جزئیات سیاست امنیتی محتوا (CSP) یک قاب بازرسی شده را مشاهده کنید. برای مشاهده جزئیات، به Application > Frames بروید، یک قاب را انتخاب کنید و به قسمت Content Security Policy (CSP) بروید.

بخش Content Security Policy که در تب Application قرار دارد.

شماره Chromium: 1424714 .

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

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

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

مسائل Chromium: 1492460 ، 1489721 .

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

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

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

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

شماره Chromium: 345205 .

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

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

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

شماره Chromium: 1445175 .

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

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

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

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

شماره Chromium: 1448214 .

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

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

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

شماره Chromium: 1478888 .

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

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

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

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

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

مسائل Chromium: 772558 .

بهبود دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • اکنون صفحه‌خوان‌ها وضعیت (چک شده یا بدون علامت) چک باکس‌ها را در زیر Sources > Breakpoints اعلام می‌کنند.
  • اکنون می‌توانید با صفحه‌کلید به موارد Hide مانند این منوی کشویی دسترسی پیدا کنید.

مسائل Chromium: 1488645 ، 1484918 .

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

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

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

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

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

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

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

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

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