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

Jecelyn Yeen

پشتیبانی از اشکال‌زدایی برای نقض انواع قابل اعتماد (Trusted Types)

نقطه توقف در نقض‌های نوع مورد اعتماد

اکنون می‌توانید در پنل منابع ، نقاط شکست را تنظیم کرده و استثنائات مربوط به تخلفات نوع معتبر (Trusted Type Violations) را دریافت کنید.

API مربوط به Trusted Types به شما کمک می‌کند تا از آسیب‌پذیری‌های اسکریپت‌نویسی بین‌سایتی مبتنی بر DOM جلوگیری کنید. در اینجا یاد بگیرید که چگونه با Trusted Types برنامه‌هایی بنویسید، بررسی کنید و از آسیب‌پذیری‌های DOM XSS در امان باشید.

در پنل منابع ، پنل کناری اشکال‌زدا را باز کنید. بخش نقاط شکست نقض CSP را گسترش دهید و کادر انتخاب تخلفات نوع اعتماد (Trusted Type violation) را فعال کنید تا روی استثنائات مکث کنید. خودتان با این صفحه آزمایشی آن را امتحان کنید.

مشکل کرومیوم: ۱۱۴۲۸۰۴

مشکل را در پنل منابع به برگه مشکلات پیوند دهید

پنل منابع اکنون یک نماد هشدار در کنار خطی که Trusted Type را نقض می‌کند، نشان می‌دهد. برای پیش‌نمایش استثنا، ماوس را روی آن نگه دارید. برای گسترش برگه مشکلات (issues) روی آن کلیک کنید، جزئیات بیشتری در مورد استثناها و راهنمایی در مورد نحوه رفع آنها ارائه می‌دهد.

مشکل کرومیوم: ۱۱۵۰۸۸۳

گرفتن اسکرین شات از گره، فراتر از نمای دید

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

در پنل عناصر ، روی یک عنصر کلیک راست کرده و گزینه Capture node screenshot را انتخاب کنید.

مشکل کرومیوم: ۱۰۰۳۶۲۹

تب جدید توکن‌های اعتماد برای درخواست‌های شبکه

درخواست‌های شبکه توکن اعتماد را با تب جدید توکن‌های اعتماد بررسی کنید.

توکن اعتماد (Trust Token) یک API جدید برای کمک به مبارزه با کلاهبرداری و تشخیص ربات‌ها از انسان‌های واقعی، بدون ردیابی غیرفعال است. یاد بگیرید چگونه با توکن‌های اعتماد (Trust Tokens) شروع به کار کنید .

پشتیبانی بیشتر از اشکال‌زدایی در نسخه‌های بعدی ارائه خواهد شد.

مشکل کرومیوم: ۱۱۲۶۸۲۴

فانوس دریایی ۷ در پنل فانوس دریایی

پنل لایت‌هاوس اکنون لایت‌هاوس ۷ را اجرا می‌کند. برای مشاهده لیست کامل تغییرات، یادداشت‌های انتشار را بررسی کنید.

ممیزی‌های جدید در Lighthouse 7:

• پیش‌بارگذاری تصویر Largest Contentful Paint (LCP) . بررسی می‌کند که آیا تصویر مورد استفاده توسط عنصر LCP از قبل بارگذاری شده است یا خیر تا زمان LCP شما بهبود یابد.
• مشکلات ثبت‌شده در پنل Issues . فهرستی از مشکلات حل‌نشده در پنل Issues را نشان می‌دهد.
• برنامه‌های وب پیش‌رونده (PWA) . دسته‌بندی PWA به طور قابل توجهی تغییر کرد.

• گروه Installable اکنون کاملاً توسط بررسی‌های قابلیتی که معیارهای نصب Chrome را فعال می‌کنند، پشتیبانی می‌شود. اینها همان سیگنال‌هایی هستند که در پنل Manifest مشاهده می‌شوند.

  • بررسی «ثبت یک سرویس ورکر…» به گروه PWA Optimized منتقل می‌شود و بررسی «استفاده از HTTPS» اکنون به عنوان بخشی از بررسی کلیدی «الزامات نصب‌پذیری» گنجانده شده است.
  • گروه « سریع و قابل اعتماد » حذف شده است. از آنجایی که بررسی «الزامات نصب» اصلاح‌شده شامل بررسی قابلیت آفلاین نیز می‌شود، بررسی «صفحه فعلی و start_url در حالت آفلاین با مقدار ۲۰۰ پاسخ می‌دهند» حذف شده است. بررسی «بارگذاری صفحه در شبکه تلفن همراه به اندازه کافی سریع است» نیز حذف شده است.

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

به‌روزرسانی‌های پنل عناصر

پشتیبانی از اعمال حالت :target

اکنون می‌توانید از DevTools برای اعمال و بررسی وضعیت CSS :target استفاده کنید.

در پنل عناصر ، یک عنصر را انتخاب کنید و وضعیت عنصر را تغییر دهید. برای اعمال و بررسی استایل‌ها، کادر انتخاب :target فعال کنید.

وقتی هش موجود در URL و شناسه یک عنصر یکسان هستند، از شبه کلاس :target برای استایل‌دهی به عنصر استفاده کنید. برای امتحان کردن خودتان، این نسخه آزمایشی را بررسی کنید. این ویژگی جدید DevTools به شما امکان می‌دهد چنین استایل‌هایی را بدون نیاز به تغییر دستی URL به طور مداوم، آزمایش کنید.

مشکل کرومیوم: ۱۱۵۶۶۲۸

میانبر جدید برای کپی کردن عنصر

از میانبر جدید عنصر کپی برای کپی کردن فوری یک عنصر استفاده کنید.

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

روش دیگر، می‌توانید عنصر را با میانبرهای صفحه کلید کپی کنید:

• مک: Shift + Option + ⬇️
• ویندوز/ لینوکس: Shift + Alt + ⬇️

مشکلات کروم: ۱۱۵۰۷۹۷ ، ۱۱۵۰۷۹۷

انتخابگرهای رنگ برای ویژگی‌های CSS سفارشی

پنجره‌ی استایل‌ها اکنون انتخابگرهای رنگ را برای ویژگی‌های CSS سفارشی نشان می‌دهد.

علاوه بر این، می‌توانید کلید Shift را نگه دارید و روی انتخابگر رنگ کلیک کنید تا بین نمایش‌های RGBA، HSLA و Hex مقدار رنگ جابجا شوید.

مشکل کرومیوم: ۱۱۴۷۰۱

میانبرهای جدید برای کپی کردن ویژگی‌های CSS

اکنون می‌توانید با چند میانبر جدید، ویژگی‌های CSS را سریع‌تر کپی کنید.

در پنل عناصر ، یک عنصر را انتخاب کنید. سپس، روی یک کلاس CSS یا یک ویژگی CSS در پنل Styles کلیک راست کنید تا مقدار آن کپی شود.

گزینه‌های کپی برای کلاس CSS:

• کپی کردن انتخابگر . نام انتخابگر فعلی را کپی کنید.
• کپی کردن قانون . قانون انتخابگر فعلی را کپی می‌کند.
• کپی کردن همه اعلان‌ها : تمام اعلان‌ها تحت قانون فعلی، از جمله ویژگی‌های نامعتبر و دارای پیشوند را کپی کنید.

گزینه‌های کپی برای ویژگی CSS:

• کپی کردن اعلان . اعلان خط فعلی را کپی کنید.
• کپی کردن ویژگی . ویژگی خط فعلی را کپی می‌کند.
• کپی کردن مقدار : مقدار خط فعلی را کپی می‌کند.

مشکل کرومیوم: ۱۱۵۲۳۹۱

به‌روزرسانی‌های کوکی‌ها

گزینه جدید برای نمایش کوکی‌های رمزگشایی‌شده با URL

اکنون می‌توانید در پنل کوکی‌ها ، مقدار کوکی‌های رمزگشایی‌شده با URL را مشاهده کنید.

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

مشکل کرومیوم: ۹۹۷۶۲۵

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

دکمه‌ی «پاک کردن همه‌ی کوکی‌ها» در پنل «کوکی‌ها» اکنون با دکمه‌ی «پاک کردن کوکی‌های فیلتر شده» جایگزین شده است.

در پنل Application > Cookies ، متن مورد نظر را در کادر متن وارد کنید تا کوکی‌ها فیلتر شوند. در مثال ما، لیست را بر اساس "PREF" فیلتر می‌کنیم. برای حذف کوکی‌های قابل مشاهده، روی دکمه Clear filtered cookies کلیک کنید. متن فیلتر را پاک کنید و خواهید دید که سایر کوکی‌ها در لیست باقی می‌مانند. پیش از این، فقط می‌توانستید همه کوکی‌ها را پاک کنید.

مشکل کرومیوم: ۹۷۸۰۵۹

گزینه جدید برای پاک کردن کوکی‌های شخص ثالث در پنل ذخیره‌سازی

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

مشکل کرومیوم: ۱۰۱۲۳۳۷

ویرایش نکات کلاینت User-Agent برای دستگاه‌های سفارشی

اکنون می‌توانید نکات مربوط به کلاینت User-Agent را برای دستگاه‌های سفارشی ویرایش کنید.

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

User-Agent Client Hints جایگزینی برای رشته‌های User-Agent هستند که به توسعه‌دهندگان امکان می‌دهند به اطلاعات مربوط به مرورگر کاربر به روشی با حفظ حریم خصوصی و ارگونومیک دسترسی داشته باشند. برای اطلاعات بیشتر در مورد User-Agent Client Hints به web.dev/user-agent-client-hints/ مراجعه کنید.

مشکل کرومیوم: ۱۰۷۳۹۰۹

به‌روزرسانی‌های پنل شبکه

تنظیم «ثبت گزارش شبکه» را حفظ کنید

DevTools اکنون تنظیم «ثبت گزارش شبکه» را حفظ می‌کند. پیش از این، DevTools هر زمان که صفحه بارگذاری مجدد می‌شد، انتخاب کاربر را بازنشانی می‌کرد.

مشکل کرومیوم: ۱۱۲۲۵۸۰

مشاهده اتصالات WebTransport در پنل Network

پنل شبکه اکنون اتصالات WebTransport را نمایش می‌دهد.

WebTransport یک API جدید است که پیام‌رسانی کلاینت-سرور را با تأخیر کم، دوطرفه و ارائه می‌دهد. برای کسب اطلاعات بیشتر در مورد موارد استفاده آن و نحوه ارائه بازخورد در مورد آینده پیاده‌سازی، به web.dev/webtransport/ مراجعه کنید.

مشکل کرومیوم: ۱۱۵۲۲۹۰

«آنلاین» به «بدون محدودیت سرعت» تغییر نام داد

گزینه شبیه‌سازی شبکه «آنلاین» اکنون به «بدون گلوگاه» تغییر نام داده است.

مشکل کرومیوم: ۱۰۲۸۰۷۸

گزینه‌های کپی جدید در پنل Console، Sources و Styles

میانبرهای جدید برای کپی کردن شیء در پنل Console و Sources

اکنون می‌توانید مقادیر اشیاء را با کلیدهای میانبر جدید در پنل Console و Sources کپی کنید. این قابلیت به خصوص زمانی که یک شیء بزرگ (مثلاً یک آرایه طولانی) برای کپی کردن دارید، مفید است.

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

میانبرهای جدید برای کپی کردن نام فایل در پنل منابع و پنل سبک‌ها

اکنون می‌توانید با کلیک راست روی نام فایل، آن را کپی کنید:

• یک فایل در پنل منابع ، یا
• نام فایل در پنل Styles در پنل Elements

برای کپی کردن نام فایل، از منوی زمینه، گزینه کپی کردن نام فایل را انتخاب کنید.

مشکل کرومیوم: ۱۱۵۵۱۲۰

به‌روزرسانی‌های نمای جزئیات قاب

اطلاعات جدید Service Workerها در نمای جزئیات Frame

DevTools اکنون سرویس ورکرهای اختصاصی را در زیر فریمی که آنها را ایجاد می‌کند، نمایش می‌دهد.

در پنل Application ، کادر مربوط به service worker ها را باز کنید، سپس یک service worker را در زیر درخت Service Workers انتخاب کنید تا جزئیات آن را مشاهده کنید.

مشکل کرومیوم: ۱۱۲۲۵۰۷

اطلاعات حافظه را در نمای جزئیات قاب اندازه‌گیری کنید

وضعیت API performance.measureMemory() اکنون در بخش در دسترس بودن API نمایش داده می‌شود.

API جدید performance.measureMemory() میزان استفاده از حافظه کل صفحه وب را تخمین می‌زند. در این مقاله یاد بگیرید که چگونه با استفاده از این API جدید، میزان کل استفاده از حافظه صفحه وب خود را کنترل کنید.

مشکل کرومیوم: ۱۱۳۹۸۹۹

از برگه مشکلات، بازخورد ارائه دهید

اگر می‌خواهید پیام یک مشکل را بهبود دهید، از طریق کنسول یا تنظیمات بیشتر > ابزارهای بیشتر > مشکلات > به برگه مشکلات بروید تا برگه مشکلات باز شود. پیام مشکل را باز کنید و روی « آیا پیام مشکل برای شما مفید است؟» کلیک کنید، سپس می‌توانید در پنجره بازشو بازخورد خود را ارائه دهید.

فریم‌های از دست رفته در پنل عملکرد

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

مشکل کرومیوم: ۱۰۷۵۸۶۵

شبیه‌سازی صفحه نمایش تاشو و دو صفحه‌ای در حالت دستگاه

اکنون می‌توانید دستگاه‌های دو صفحه‌ای و تاشو را در DevTools شبیه‌سازی کنید.

پس از فعال کردن نوار ابزار دستگاه ، یکی از این دستگاه‌ها را انتخاب کنید: Surface Duo یا Samsung Galaxy Fold .

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

همچنین می‌توانید ویژگی‌های Experimental Web Platform را فعال کنید تا به ویژگی جدید CSS media screen-spanning و JavaScript getWindowSegments API دسترسی پیدا کنید. آیکون آزمایشی، وضعیت پرچم ویژگی‌های Experimental Web Platform را نمایش می‌دهد. وقتی پرچم روشن باشد، این آیکون برجسته می‌شود. به chrome://flags بروید و پرچم را تغییر دهید.

مشکل کرومیوم: ۱۰۵۴۲۸۱

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

خودکارسازی تست مرورگر با Puppeteer Recorder

DevTools اکنون می‌تواند اسکریپت‌های Puppeteer را بر اساس تعامل شما با مرورگر تولید کند و خودکارسازی تست مرورگر را برای شما آسان‌تر کند. Puppeteer یک کتابخانه Node.js است که یک API سطح بالا برای کنترل Chrome یا Chromium از طریق پروتکل DevTools ارائه می‌دهد.

به این صفحه آزمایشی بروید. پنل منابع (Sources) را در DevTools باز کنید. تب ضبط (Recording) را در پنل سمت چپ انتخاب کنید. یک ضبط جدید اضافه کنید و نام فایل را (مثلاً test01.js) قرار دهید.

برای شروع ضبط تعامل، روی دکمه ضبط در پایین کلیک کنید. سعی کنید فرم روی صفحه را پر کنید. مشاهده کنید که دستورات Puppeteer به طور مناسب به فایل اضافه می‌شوند. برای توقف ضبط، دوباره روی دکمه ضبط کلیک کنید.

برای اجرای اسکریپت، راهنمای شروع به کار در سایت رسمی Puppeteer را دنبال کنید.

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

مشکل کرومیوم: ۱۱۴۴۱۲۷

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

ویرایشگر فونت جدید، یک ویرایشگر popover در پنل Styles برای ویژگی‌های مربوط به فونت است که به شما کمک می‌کند تایپوگرافی ایده‌آل خود را برای صفحه وب خود پیدا کنید.

این popover یک رابط کاربری تمیز برای دستکاری پویای تایپوگرافی با مجموعه‌ای از انواع ورودی‌های بصری فراهم می‌کند.

مشکل کرومیوم: ۱۰۹۳۲۲۹

ابزارهای اشکال‌زدایی CSS flexbox

DevTools از آخرین نسخه، پشتیبانی آزمایشی برای اشکال‌زدایی flexbox اضافه کرده است.

DevTools اکنون یک خط راهنما رسم می‌کند تا به شما در تجسم بهتر ویژگی align-items در CSS کمک کند. ویژگی gap در CSS نیز پشتیبانی می‌شود. در مثال ما، CSS gap: 12px; داریم. به الگوی هاشور برای هر فاصله توجه کنید.

مشکل کرومیوم: ۱۱۳۹۹۴۹

تب جدید تخلفات CSP

تمام موارد نقض سیاست امنیت محتوا (CSP) را در یک نگاه در برگه جدید CSP Violations مشاهده کنید. این برگه جدید آزمایشی است که باید کار با صفحات وب با مقدار زیادی نقض CSP و Trusted Type را آسان‌تر کند.

مشکل کرومیوم: ۱۱۳۷۸۳۷

محاسبه کنتراست رنگ جدید - الگوریتم کنتراست ادراکی پیشرفته (APCA)

الگوریتم کنتراست ادراکی پیشرفته (APCA) جایگزین نسبت کنتراست دستورالعمل‌های AA / AAA در انتخابگر رنگ می‌شود.

APCA روشی جدید برای محاسبه کنتراست بر اساس تحقیقات مدرن در مورد ادراک رنگ است. در مقایسه با دستورالعمل‌های AA/AAA، APCA بیشتر وابسته به زمینه است. کنتراست بر اساس ویژگی‌های مکانی متن (وزن و اندازه فونت)، رنگ (تفاوت روشنایی درک شده بین متن و پس‌زمینه) و زمینه (نور محیط، محیط اطراف، هدف مورد نظر از متن) محاسبه می‌شود.

مثال نشان می‌دهد که آستانه APCA برابر با ۳۸٪ است. نسبت کنتراست باید با مقدار ذکر شده مطابقت داشته باشد یا از آن بیشتر باشد. این مقدار بر اساس وزن و اندازه فونت، با مراجعه به این جدول جستجوی APCA محاسبه می‌شود.

مشکل کرومیوم: ۱۱۲۱۹۰۰

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

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

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

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

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

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

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