موارد جدید در DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

هدرهای پاسخ شبکه را نادیده بگیرید

اکنون می‌توانید هدرهای پاسخ را در پنل شبکه لغو کنید. پیش از این، برای آزمایش هدرهای پاسخ HTTP به دسترسی به وب سرور نیاز داشتید.

با لغو هدر پاسخ، می‌توانید به صورت محلی اصلاحاتی را برای هدرهای مختلف، از جمله موارد زیر (اما نه محدود به آنها) انجام دهید:

• هدرهای اشتراک‌گذاری منابع بین مبدا (CORS)
• سربرگ‌های سیاست-مجوزها
• هدرهای جداسازی بین مبدائی

برای لغو یک هدر، به Network > Headers > Response Headers بروید، موس را روی مقدار هدر نگه دارید، کلیک کنید و آن را ویرایش کنید.

همچنین می‌توانید هدرهای سفارشی اضافه کنید.

برای ویرایش همه لغوها در یک مکان، فایل .headers را در Sources > Overrides ویرایش کنید. در آنجا، می‌توانید روی Add override rule کلیک کنید تا چندین درخواست را با استفاده از wildcards ( * ) لغو کنید.

شماره کروم: ۱۲۸۸۰۲۳

بهبودهای اشکال‌زدایی Nuxt، Vite و Rollup

برای کمک به شما در تشخیص سریع‌تر مشکلات در حین اشکال‌زدایی، ردیابی پشته بهبود یافته اکنون فریم‌هایی را که از منابع تولید شده توسط Nuxt 3.3 یا بالاتر می‌آیند، پنهان می‌کند. DevTools از چنین فریم‌هایی صرف نظر می‌کند:

• در ردپاهای کنسول ، زیر لینک «نمایش تعداد فریم‌های بیشتر» (Show N more frames ) .
• در منابع > پشته فراخوانی ، زیر نمایش فریم‌های نادیده گرفته شده .

برای ارائه این بهبودها، تیم‌های DevTools، Nuxt، Vite و Rollup با همکاری یکدیگر، افزونه نقشه منبع x_google_ignoreList را به کار گرفتند:

• انتشار Nuxt 3.3
• گزینه‌های سرور Vite
• گزینه‌های پیکربندی Rollup

تیم DevTools مایل است از تیم‌های Nuxt، Vite و Rollup برای امکان‌پذیر کردن این امر قدردانی کند. ما از تلاش‌ها و همکاری شما که برای موفقیت این پیاده‌سازی ضروری بود، قدردانی می‌کنیم. مجدداً از مشارکت‌های شما متشکریم!

بهبودهای CSS در عناصر > سبک‌ها

ویژگی‌ها و مقادیر CSS نامعتبر

برای کمک به شما در تشخیص سریع‌تر مشکلات CSS ، اکنون کادر Styles حذف شده است:

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

تیم DevTools مایل است از Yisi (一丝) برای ارائه این بهبود قدردانی کند.

لینک‌هایی به فریم‌های کلیدی در ویژگی مختصرنویسی انیمیشن

ویژگی CSS خلاصه‌سازی animation اکنون شامل لینک‌هایی به @keyframes at-rules ‎ مربوطه است، بنابراین می‌توانید سریع‌تر در پنل Styles پیمایش کنید.

شماره کروم: ۱۴۲۰۶۵۶

تنظیمات جدید کنسول: تکمیل خودکار هنگام ورود

از نسخه قبلی (112) به بعد، می‌توانید کنسول DevTools را طوری پیکربندی کنید که وقتی Enter فشار می‌دهید، یک پیشنهاد تکمیل خودکار اعمال کند.

به طور پیش‌فرض، برای پذیرش پیشنهاد تکمیل خودکار، می‌توانید Tab یا Arrow right را فشار دهید. برای تکمیل خودکار با Enter ، کلید را فعال کنید. تنظیمات > کنسول > پیشنهاد تکمیل خودکار را در Enter بپذیرید .

علاوه بر این، متن یکی دیگر از تنظیمات اکنون کاربرپسندتر است: ارزیابی کد را به عنوان اقدام کاربر در نظر بگیرید .

شماره کروم: ۱۲۷۶۹۶۰

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

کادر محاوره‌ای باز کردن سریع در منوی فرمان (Command Menu) اکنون فایل‌های شخص ثالثِ فهرست‌شده در لیست نادیده‌گرفته‌شده را خاکستری می‌کند تا تأکید بیشتری بر فایل‌هایی که شما ایجاد کرده‌اید، داشته باشد.

شماره کروم: ۱۴۲۴۳۴۵ .

منسوخ شدن JavaScript Profiler: مرحله دوم

از همان اوایل کروم ۵۸ ، تیم DevTools قصد داشت در نهایت JavaScript Profiler را منسوخ کند و توسعه‌دهندگان Node.js و Deno را وادار کند تا از پنل Performance برای پروفایل‌بندی عملکرد CPU جاوا اسکریپت استفاده کنند.

نسخه ۱۱۳ DevTools فاز دوم از چهار فاز منسوخ شدن JavaScript Profiler را آغاز می‌کند. در طول این فاز، شما هنوز می‌توانید پنل را باز کنید اما رابط کاربری آن دیگر در دسترس نیست.

برای نمایش عملکرد CPU، روی «برو به پنل عملکرد» کلیک کنید.

شماره کروم: ۱۳۵۴۵۴۸ .

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

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

• اشکالی که باعث می‌شد pretty-printing در پنل Sources نام متغیرها با کاراکترهای یونیکد را به اشتباه مدیریت کند ( 1425055 ) برطرف شد.
• تب «مسائل» پیام جدیدی برای مشکلات تکمیل خودکار در مورد مقادیر HTML غیر استاندارد اضافه کرد ( 1399414 ).

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

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

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

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

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

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

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