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

جسلین ین

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

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

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

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

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

نقطه انفصال تخلفات 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 شروع کنید .

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

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

شماره Chromium: 1126824

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

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

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

ممیزی های جدید در 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 همیشه آزمایش کنید.

اجبار کردن وضعیت «:target» CSS

شماره Chromium: 1156628

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

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

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

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

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

عنصر تکراری

مسائل Chromium: 1150797 ، 1150797

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

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

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

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

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

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

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

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

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

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

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

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

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

شماره Chromium: 1152391

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

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

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

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

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

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

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

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

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

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

شماره کرومیوم: 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

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

شماره Chromium: 1152290

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

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

ثبت گزارش شبکه

شماره Chromium: 1028078

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

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

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

شیء را در کنسول کپی کنید

شی را در پنل Sources کپی کنید

مسائل Chromium: 1149859 ، 1148353

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

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

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

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

نام فایل را در پنل Sources کپی کنید

نام فایل را در قسمت Styles کپی کنید

شماره 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 یک رابط کاربری تمیز برای دستکاری پویا تایپوگرافی با یک سری از انواع ورودی بصری ارائه می دهد.

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

شماره Chromium: 1093229

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

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

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

فلکس باکس

شماره Chromium: 1139949

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

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

برگه نقض CSP

شماره Chromium: 1137837

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

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

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

APCA در Color Picker

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

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

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

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

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

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

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

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

،

jecelyn ین

اشکال زدایی پشتیبانی از انواع قابل اعتماد

نقطه شکست در مورد نقض نوع قابل اعتماد

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

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

در پانل منابع ، صفحه Sidebar Debugger را باز کنید. بخش نقاط ضعف نقض CSP را گسترش داده و کادر تأیید نقض نوع قابل اعتماد را قادر به مکث در مورد استثنائات کنید. خودتان آن را با این صفحه نمایشی امتحان کنید.

نقطه شکست در مورد نقض نوع قابل اعتماد

شماره کروم: 1142804

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

شماره پیوند را در صفحه منابع به برگه Issure

شماره کروم: 1150883

تصویر گره را فراتر از نمای Viewport ضبط کنید

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

در پانل Elements ، روی یک عنصر راست کلیک کرده و SCREENCESHOT CATCUTE را انتخاب کنید.

تصویر گره را فراتر از نمای Viewport ضبط کنید

شماره کروم: 1003629

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

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

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

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

برگه Trust Token برای درخواست های شبکه

شماره کروم: 1126824

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

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

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

ممیزی های جدید در فانوس دریایی 7:

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

  • گروه قابل نصب اکنون کاملاً با بررسی های قابلیت هایی که معیارهای قابل نصب Chrome را فعال می کنند ، تأمین می شود. اینها همان سیگنال هایی هستند که در صفحه مانیفست دیده می شوند.

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

شماره کروم: 772558

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

پشتیبانی از مجبور کردن CSS :target

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

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

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

مجبور کردن CSS `: حالت هدف

شماره کروم: 1156628

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

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

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

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

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

عنصر تکراری

مشکلات کروم: 1150797 ، 1150797

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

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

علاوه بر این ، شما می توانید کلید Shift را نگه دارید و روی Color Picker کلیک کنید تا از طریق نمایش های RGBA ، HSLA و HEX از مقدار رنگ چرخه چرخه بزنید.

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

شماره کروم: 1147016

میانبرهای جدید برای کپی کردن خصوصیات CSS

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

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

میانبرهای جدید برای کپی کردن خصوصیات CSS

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

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

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

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

شماره کروم: 1152391

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

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

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

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

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

شماره کروم: 997625

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

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

در صفحه Application > Pane Cookies ، متن را در جعبه متن وارد کنید تا کوکی ها را فیلتر کنید. در مثال ما در اینجا ، لیست را با "pref" فیلتر می کنیم. برای حذف کوکی های قابل مشاهده ، روی دکمه Clear Filtered Cookies کلیک کنید. متن فیلتر را پاک کنید و خواهید دید که کوکی های دیگر در لیست باقی می مانند. پیش از این ، شما فقط گزینه پاک کردن همه کوکی ها را داشتید.

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

شماره کروم: 978059

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

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

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

شماره کروم: 1012337

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

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

به تنظیمات > دستگاه ها بروید و روی Add Custom Device کلیک کنید ... بخش نکات مشتری عامل کاربر را برای ویرایش نکات مشتری گسترش دهید.

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

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

شماره کروم: 1073909

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

تنظیم "ورود به سیستم شبکه ضبط"

DevTools اکنون تنظیمات "ورود به سیستم شبکه" را ادامه می دهد. پیش از این ، DevTools هر زمان که یک صفحه بارگیری شود ، انتخاب کاربر را مجدداً تنظیم می کند.

ورود به سیستم شبکه

شماره کروم: 1122580

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

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

اتصالات WebTransport

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

شماره کروم: 1152290

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

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

ورود به سیستم شبکه

شماره کروم: 1028078

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

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

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

شیء را در کنسول کپی کنید

کپی کردن شی در پانل منابع

مشکلات کروم: 1149859 ، 1148353

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

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

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

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

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

نام پرونده را در صفحه سبک کپی کنید

شماره کروم: 1155120

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

اطلاعات جدید کارگران خدمات در نمای جزئیات فریم

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

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

اطلاعات کارگران خدمات در نمای جزئیات فریم

شماره کروم: 1122507

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

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

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

حافظه را اندازه گیری کنید

شماره کروم: 1139899

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

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

پیوند بازخورد

فریم در پانل عملکرد

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

فریم های افتاده

شماره کروم: 1075865

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

اکنون می توانید دستگاه های دو صفحه ای و تاشو را در Devtools تقلید کنید.

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

برای جابجایی بین حالت های تک صفحه یا صفحه تاشو و دو صفحه ای یا آشکار شده ، روی نماد Span New کلیک کنید.

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

صفحه نمایش دوگانه

شماره کروم: 1054281

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

تست مرورگر خودکار با ضبط کننده عروسکی

DevTools اکنون می تواند اسکریپت های Puppeteer را بر اساس تعامل شما با مرورگر تولید کند و باعث می شود تست مرورگر برای شما راحت تر شود. Puppeteer یک کتابخانه Node.js است که یک API سطح بالا برای کنترل کروم یا کروم از پروتکل Devtools فراهم می کند.

به این صفحه نمایشی بروید. پانل منابع را در DevTools باز کنید. برگه ضبط را در صفحه سمت چپ انتخاب کنید. ضبط جدید اضافه کنید و پرونده را نامگذاری کنید (به عنوان مثال Test01.JS).

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

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

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

ضبط کننده عروسک

شماره کروم: 1144127

ویرایشگر قلم در صفحه سبک

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

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

ویرایشگر قلم در صفحه سبک

شماره کروم: 1093229

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

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

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

فلکس باکس

شماره کروم: 1139949

برگه جدید تخلفات CSP

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

برگه نقض CSP

شماره کروم: 1137837

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

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

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

APCA در انتخاب رنگ

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

شماره کروم: 1121900

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

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

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

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

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.