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

جسلین ین

ویژگی پیش‌نمایش: پانل بینش عملکرد جدید

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

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

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

هنگامی که ضبط کامل شد، بینش عملکرد را در صفحه Insights دریافت می کنید. برای درک مشکل و رفع‌های احتمالی، روی هر مورد بینش (به عنوان مثال، درخواست مسدود کردن ارائه، تغییر طرح) کلیک کنید.

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

این یک ویژگی پیش‌نمایش برای کمک به توسعه‌دهندگان وب (به ویژه متخصصان غیرعملکردی) برای شناسایی و رفع مشکلات بالقوه عملکرد است. تیم ما فعالانه روی این ویژگی کار می کند و ما به دنبال بازخورد شما برای بهبودهای بیشتر هستیم.

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

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

اکنون می‌توانید تم‌های روشن و تیره را سریع‌تر شبیه‌سازی کنید (ویژگی رسانه CSS prefers-color-scheme ) با میانبرهای جدید در صفحه Styles .

پیش از این، مراحل بیشتری برای شبیه سازی تم ها در تب Rendering انجام می شد.

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

شماره Chromium: 1314299

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

DevTools اکنون سیاست امنیتی محتوا (CSP) را در تب Preview در پنل Network اعمال می کند.

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

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

امنیت را در تب پیش نمایش شبکه بهبود بخشید

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

بارگذاری مجدد در نقطه شکست بهبود یافته است

اکنون دیباگر اجرای اسکریپت را هنگام بارگذاری مجدد در نقطه شکست خاتمه می دهد.

به عنوان مثال، اسکریپت قبلاً هنگام تنظیم و بارگذاری مجدد در نقطه شکست ReactDOM در این نسخه نمایشی React ، وارد یک حلقه بی پایان شد. پانل منابع به دلیل حلقه بی پایان خراب شد.

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

بارگذاری مجدد در نقطه شکست بهبود یافته است

مشکلات Chromium: 1014415 ، 1004038 ، 1112863 ، 1134899

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

خطاهای اجرای اسکریپت را در کنسول مدیریت کنید

خطاها در حین ارزیابی اسکریپت در کنسول اکنون رویدادهای خطای مناسبی را ایجاد می کنند که کنترل کننده window.onerror را فعال می کند و به عنوان رویدادهای "error" در شی پنجره ارسال می شود.

خطاهای اجرای اسکریپت را در کنسول مدیریت کنید

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

بیان زنده را با Enter انجام دهید

پس از اتمام تایپ یک عبارت زنده ، می‌توانید روی Enter کلیک کنید تا آن را انجام دهید. پیش از این، زدن Enter منجر به اضافه شدن خطوط جدید می شد. این با سایر بخش‌های DevTools ناسازگار است.

برای افزودن یک خط جدید در ویرایشگر بیان زنده ، به جای آن از Shift + Enter استفاده کنید.

بیان زنده را با Enter انجام دهید

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

در شروع ضبط جریان کاربر را لغو کنید

می توانید ضبط را در هنگام شروع ضبط جریان کاربر لغو کنید. قبلا هیچ گزینه ای برای لغو ضبط وجود نداشت.

در شروع ضبط جریان کاربر را لغو کنید

شماره Chromium: 1257499

عناصر شبه هایلایت به ارث رسیده را در قسمت Styles نمایش دهید

شبه عناصر برجسته موروثی (به عنوان مثال ::selection ، ::spelling-error ، ::grammar-error ، و ::highlight ) را در قسمت Styles مشاهده کنید. قبلا این قوانین نمایش داده نمی شد.

همانطور که در مشخصات ذکر شد، هنگامی که چند سبک با هم تضاد دارند، آبشار سبک برنده را تعیین می کند. این ویژگی جدید به شما کمک می کند تا وراثت و اولویت قوانین را درک کنید.

عناصر شبه هایلایت به ارث رسیده را در قسمت Styles نمایش دهید

شماره Chromium: 1024156

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

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

  • اکنون صفحه Properties ویژگی های Accessor را با مقدار به طور پیش فرض نمایش می دهد. قبلا به اشتباه پنهان شده بود. ( 1309087 )
  • اکنون صفحه Styles به درستی قوانین @support لغو شده را به عنوان خط خطی نشان می دهد. پیش از این، قوانین اشتباه نبودند. ( 1298025 )
  • منطق قالب‌بندی CSS را در پنل Sources که باعث ایجاد چندین خط خالی در هنگام ویرایش CSS می‌شد، رفع شد. ( 1309588 )
  • گزینه Expand Recursively یک شی در کنسول را روی حداکثر 100 قرار دهید تا برای اجسام دایره ای برای همیشه ادامه پیدا نکند. ( 1272450 )

[تجربی] تغییرات CSS را کپی کنید

با این آزمایش، پنجره Styles تغییرات CSS شما را به رنگ سبز برجسته می کند. می توانید ماوس را روی قوانین تغییر یافته نگه دارید و روی دکمه کپی جدید در کنار آن کلیک کنید تا آن را کپی کنید.

جدای از آن، می‌توانید با کلیک راست روی هر قانون و انتخاب Copy all CSS تغییرات ، تمام تغییرات CSS را در اعلان‌ها کپی کنید.

یک دکمه کپی جدید نیز به تب تغییرات اضافه شده است تا به شما کمک کند تغییرات CSS خود را به راحتی پیگیری و کپی کنید!

تغییرات CSS را کپی کنید

شماره Chromium: 1268754

[تجربی] انتخاب رنگ خارج از مرورگر

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

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

انتخاب رنگ خارج از مرورگر

شماره Chromium: 1245191

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

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

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

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

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

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