این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Sofia Emelianova

Jecelyn Yeen

هدرهای پاسخ شبکه را لغو کنید

اکنون می‌توانید سرصفحه‌های پاسخ را در پانل شبکه لغو کنید. قبلاً برای آزمایش هدرهای پاسخ HTTP به وب سرور نیاز داشتید.

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

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

خطای CORS با نادیده گرفتن هدر رفع شد.

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

اضافه کردن هدر سفارشی

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

در حال ویرایش همه موارد لغو

شماره Chromium: 1288023 .

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

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

در Console Traces، در زیر پیوند Show N more frames .
در منابع > پشته تماس ، در زیر نمایش قاب های فهرست شده نادیده گرفته شود .

ردیابی پشته قبل و بعد از فعال کردن فهرست نادیده گرفتن شخص ثالث.

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

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

بهبودهای CSS در Elements > Styles

خواص و مقادیر CSS نامعتبر است

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

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

نام دارایی نامعتبر و ارزش دارایی نامعتبر است.

تیم DevTools می‌خواهد از Yisi (一丝) برای ایجاد این پیشرفت تشکر کند.

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

ویژگی کوتاه‌نویسی animation CSS اکنون حاوی پیوندهایی به @keyframes at-rules است، بنابراین می‌توانید سریع‌تر در پنجره Styles پیمایش کنید.

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

شماره Chromium: 1420656 .

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

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

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

چک باکس مربوطه در تنظیمات.

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

شماره Chromium: 1276960 .

گفتگوی باز سریع در منوی فرمان اکنون فایل‌های شخص ثالث فهرست‌شده نادیده گرفته شده را خاکستری می‌کند تا تاکید بیشتری بر فایل‌هایی که شما نوشته‌اید باشد.

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

شماره Chromium: 1424345 .

حذف پروفایل جاوا اسکریپت: مرحله دوم

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

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

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

منسوخ شدن پروفایل جاوا اسکریپت.

شماره Chromium: 1354548 .

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

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

اشکالی را برطرف کرد که باعث شد چاپ زیبا در پانل منابع به اشتباه نام متغیرها را با کاراکترهای یونیکد مدیریت کند ( 1425055 ).
برگه Issues پیام جدیدی برای مشکلات تکمیل خودکار در مورد مقادیر غیر استاندارد HTML اضافه کرد ( 1399414 ).

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

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

تماس با تیم Chrome DevTools

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

پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
توییت در @ChromeDevTools .
نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

معیارهای عملکرد را در پانل عملکرد تجسم کنید
گره های متنی را در درخت DOM برجسته کنید
مسیر JS را در یک گره DOM کپی کنید
به‌روزرسانی‌های پنل حسابرسی ، از جمله ممیزی جدید که کتابخانه‌های JS و کلمات کلیدی جدید را برای دسترسی به پنل حسابرسی از منوی فرمان شناسایی می‌کند.
نکته امتیاز: از حالت دستگاه برای بررسی درخواست های رسانه استفاده کنید (ویدئو)