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

Sofia Emelianova

حذف تدریجی کوکی‌های شخص ثالث

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

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

شماره کروم: ۱۴۶۶۳۱۰ .

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

افزونه ابزار تحلیل سندباکس حریم خصوصی برای DevTools با آخرین نسخه پیش‌انتشار ۰.۳.۲ در حال توسعه فعال است. این ابزار به شما امکان می‌دهد نحوه استفاده وب‌سایت خود از کوکی‌ها را درک کنید و در مورد APIهای جدید کروم که حریم خصوصی را حفظ می‌کنند، راهنمایی ارائه می‌دهد.

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

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

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

• نحوه انجام PSAT .
• برای پیش‌بینی اتفاقات احتمالی پس از اجرایی شدن حذف، یک محیط ارزیابی (Evaluation Environment) راه‌اندازی کنید.
• برای شناسایی جنبه‌هایی که تحت تأثیر قرار می‌گیرند، به اقدامات تحلیل عمومی مراجعه کنید.
• برای یادگیری نحوه تحلیل سناریوهای رایج، از جمله تجزیه و تحلیل، تجارت الکترونیک، سرویس‌های SSO، محتوای جاسازی‌شده و موارد دیگر، نمونه‌های نمایشی را در Analysis Scenarios بررسی کنید.

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

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

الگوی پیش‌فرض حذف برای node_modules

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

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

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

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

• استثنائاتی که در فریم‌های نادیده گرفته نشده در پشته فراخوانی (call stack) ثبت می‌شوند.
• خطاهایی که از فریم‌های نادیده گرفته نشده در پشته فراخوانی عبور می‌کنند. برای مثال، به تصویر صفحه مراجعه کنید.

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

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

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

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

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

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

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

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

• نقشه‌های منبع چیستند؟
• به جای استفاده از نقشه‌های منبع، کد اصلی خود را اشکال‌زدایی کنید

حالت ورودی جدید در طول اشکال‌زدایی از راه دور تغییر وضعیت می‌دهد

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

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

شماره کروم: ۱۴۱۰۴۳۳

پنل عناصر اکنون URL های مربوط به گره های #document را نشان می دهد

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

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

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

اکنون می‌توانید جزئیات سیاست امنیت محتوا (CSP) یک فریم بازرسی‌شده را مشاهده کنید. برای مشاهده جزئیات، به Application > Frames بروید، یک فریم را انتخاب کنید و به پایین اسکرول کنید تا به بخش سیاست امنیت محتوا (CSP) برسید .

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

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

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

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

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

پنجره‌ی «آیا به این کد اعتماد دارید؟» در Sources و هشدار self-XSS در Console

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

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

مشکل کروم: ۳۴۵۲۰۵

نقاط توقف شنونده رویداد در وب ورکرها و ورک‌لت‌ها

وقتی یک نقطه توقف رویداد را در Sources > Event Listener Breakpoints تنظیم می‌کنید، علاوه بر توقف موقت این رویداد در وب‌سایت شما، اشکال‌زدا اکنون هنگام وقوع رویداد مربوطه در یک web worker یا worklet از هر نوع، از جمله Shared Storage Worklet ، نیز متوقف می‌شود.

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

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

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

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

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

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

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

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

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

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

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

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

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

بهبودهای دسترسی

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

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

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

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

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

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

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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