چیزهای جدید در 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 پوشش داده شده است.

،

جسلین ین

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

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

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

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

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

،

جسلین ین

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

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

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

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

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

،

جسلین ین

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

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

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

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

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

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

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

شماره کروم: 1270700

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

اکنون می توانید تم های سبک و تاریک را سریعتر (CSS Media Peature Prefers-Color-Scheme ) با میانبرهای جدید در صفحه سبک تقلید کنید.

پیش از این ، اقدامات بیشتری برای تقلید از مضامین در برگه رندر انجام می داد.

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

شماره کروم: 1314299

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

DevTools اکنون خط مشی امنیت محتوا (CSP) را در برگه پیش نمایش در پنل شبکه اعمال می کند.

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

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

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

شماره کروم: 833147

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

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

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

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

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

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

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

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

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

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

شماره کروم: 1295750

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

پس از اتمام تایپ کردن یک عبارت زنده ، می توانید برای انجام آن Enter کلیک کنید. پیش از این ، ضربه زدن به ENTER منجر به اضافه کردن خطوط جدید شد. این با سایر قسمت های Devtools مغایرت دارد.

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

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

شماره کروم: 1260744

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

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

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

شماره کروم: 1257499

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

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

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

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

شماره کروم: 1024156

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

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

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

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

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

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

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

کپی تغییرات CSS

شماره کروم: 1268754

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

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

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

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

شماره کروم: 1245191

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

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

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

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

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

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