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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

با Enter عبارت زنده را اجرا کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

[آزمایشی] کپی کردن تغییرات CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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