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

Jecelyn Yeen

پشتیبانی از اشکال زدایی برای نقض Trusted Types

نقطه انفصال تخلفات Trusted Type

اکنون می توانید نقاط شکست را تنظیم کنید و موارد استثنا را در موارد نقض نوع مورد اعتماد در پانل منابع مشاهده کنید.

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

در پنل Sources ، صفحه نوار کناری دیباگر را باز کنید. بخش CSP Violation Breakpoints را باز کنید و کادر بررسی Trusted Type نقض را فعال کنید تا در موارد استثنا متوقف شود. خودتان آن را با این صفحه نمایشی امتحان کنید.

شماره Chromium: 1142804

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

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

شماره Chromium: 1150883

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

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

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

شماره Chromium: 1003629

تب جدید Trust Tokens برای درخواست های شبکه

درخواست های شبکه Trust Token را با تب جدید Trust Tokens بررسی کنید.

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

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

شماره Chromium: 1126824

فانوس دریایی 7 در پنل Lighthouse

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

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

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

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

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

شماره Chromium: 772558

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

پشتیبانی از اجبار CSS :target

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

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

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

شماره Chromium: 1156628

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

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

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

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

• مک: Shift + Option + ⬇️
• پنجره / لینوکس: Shift + Alt + ⬇️

مسائل Chromium: 1150797 ، 1150797

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

اکنون صفحه Styles انتخابگرهای رنگ را برای ویژگی های CSS سفارشی نشان می دهد.

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

شماره کرومیوم: 1147016

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

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

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

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

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

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

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

شماره Chromium: 1152391

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

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

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

به پنل Application رفته و قسمت Cookies را انتخاب کنید. هر کوکی موجود در لیست را انتخاب کنید. برای مشاهده کوکی رمزگشایی شده، کادر جدید Show URL decoded را فعال کنید.

شماره Chromium: 997625

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

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

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

شماره Chromium: 978059

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

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

شماره Chromium: 1012337

نکات کاربر-عامل مشتری را برای دستگاه های سفارشی ویرایش کنید

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

به Settings > Devices رفته و روی Add custom device... کلیک کنید. برای ویرایش نکات مشتری، بخش User Agent Client hints را گسترش دهید.

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

شماره Chromium: 1073909

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

تنظیمات "ثبت گزارش شبکه" را ادامه دهید

DevTools اکنون در تنظیم "Record Network log" باقی می ماند. پیش از این، DevTools انتخاب کاربر را هر زمان که صفحه‌ای بارگذاری مجدد می‌شود، بازنشانی می‌کرد.

شماره کرومیوم: 1122580

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

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

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

شماره Chromium: 1152290

"آنلاین" به "بدون درنگ" تغییر نام داد

گزینه شبیه سازی شبکه "آنلاین" اکنون به "No Throttling" تغییر نام داده است.

شماره Chromium: 1028078

گزینه های کپی جدید در کنسول، پانل منابع و صفحه سبک ها

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

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

مسائل Chromium: 1149859 ، 1148353

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

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

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

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

شماره Chromium: 1155120

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

اطلاعات New Service Workers در نمای جزئیات قاب

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

در پانل برنامه ، یک فریم با سرویس‌کاران را گسترش دهید، سپس یک سرویس‌کار را در زیر درخت Service Workers انتخاب کنید تا جزئیات را مشاهده کنید.

شماره Chromium: 1122507

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

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

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

شماره Chromium: 1139899

بازخورد خود را از برگه Issues ارائه دهید

اگر زمانی می‌خواهید پیام مشکلی را بهبود ببخشید، به تب Issues از Console یا More Settings > More tools > Issues > بروید تا برگه Issues را باز کنید. یک پیام مشکل را باز کنید و روی آیا پیام مشکل برای شما مفید است کلیک کنید؟ ، سپس می توانید بازخورد خود را در پاپ آپ ارائه دهید.

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

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

شماره Chromium: 1075865

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

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

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

روی نماد دهانه جدید کلیک کنید تا بین وضعیت‌های تک صفحه‌ای یا تاشده و دو صفحه‌نمایش یا بازشده جابه‌جا شوید.

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

شماره Chromium: 1054281

ویژگی های تجربی

تست مرورگر را با Puppeteer Recorder به صورت خودکار انجام دهید

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

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

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

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

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

شماره Chromium: 1144127

ویرایشگر فونت در قسمت Styles

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

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

شماره Chromium: 1093229

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

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

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

شماره کرومیوم: 1139949

برگه جدید نقض CSP

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

شماره Chromium: 1137837

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

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

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

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

شماره کرومیوم: 1121900

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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