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

کیسی باسکی

پشتیبانی از اعلان مجدد let و class در کنسول

اکنون کنسول از اعلان مجدد دستورات let و class پشتیبانی می کند. عدم توانایی در اعلام مجدد یک مزاحمت رایج برای توسعه دهندگان وب بود که از کنسول برای آزمایش کدهای جاوا اسکریپت جدید استفاده می کنند.

به عنوان مثال، قبلاً، هنگام اعلام مجدد یک متغیر محلی با let ، کنسول یک خطا ایجاد می کند:

تصویری از کنسول در کروم 78 که نشان می دهد اعلام مجدد اجازه ناموفق است.

اکنون، کنسول اجازه می دهد تا مجدداً اعلام شود:

تصویری از کنسول در کروم 80 که نشان می دهد اعلام مجدد اجازه موفقیت آمیز است.

Chromium شماره 1004193

بهبود اشکال زدایی WebAssembly

DevTools شروع به پشتیبانی از DWARF Debugging Standard کرده است، که به معنای افزایش پشتیبانی برای عبور از کد، تنظیم نقاط شکست و حل ردپای پشته در زبان های مبدأ شما در DevTools است. برای داستان کامل ، اشکال زدایی بهبود یافته WebAssembly را در Chrome DevTools بررسی کنید.

تصویری از اشکال زدایی WebAssembly جدید با استفاده از DWARF.

به روز رسانی پنل شبکه در تب Initiator Chains Initiator را درخواست کنید

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

اسکرین شات از یک Request Initiator Chain در تب Initiator

پس از ثبت فعالیت شبکه در پنل Network ، روی یک منبع کلیک کنید و سپس به تب Initiator بروید تا Request Initiator Chain آن را مشاهده کنید:

  • منبع بازرسی شده پررنگ است. در تصویر بالا، https://web.dev/default-627898b5.js منبع بازرسی شده است.
  • منابع بالای منبع بازرسی شده آغازگر هستند. در تصویر بالا، https://web.dev/bootstrap.js آغازگر https://web.dev/default-627898b5.js است. به عبارت دیگر، https://web.dev/bootstrap.js باعث درخواست شبکه برای https://web.dev/default-627898b5.js شد.
  • منابع زیر منبع بازرسی شده وابستگی ها هستند. در تصویر بالا، https://web.dev/chunk-f34f99f7.js یک وابستگی به https://web.dev/default-627898b5.js است. به عبارت دیگر، https://web.dev/default-627898b5.js باعث درخواست شبکه برای https://web.dev/chunk-f34f99f7.js شد.

شماره 842488 کرومیوم

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

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

تصویری از صفحه نمای کلی که منبع بازرسی شده را برجسته می کند.

Chromium شماره 988253

ستون های URL و مسیر در پانل شبکه

از ستون‌های Path و URL جدید در پانل Network برای مشاهده مسیر مطلق یا URL کامل هر منبع شبکه استفاده کنید.

تصویری از ستون‌های مسیر و URL جدید در پانل شبکه.

روی هدر جدول Waterfall کلیک راست کرده و مسیر یا URL را انتخاب کنید تا ستون های جدید نشان داده شوند.

Chromium شماره 993366

رشته های User-Agent به روز شده است

DevTools از تنظیم یک رشته User-Agent سفارشی از طریق زبانه Network Conditions پشتیبانی می کند. رشته User-Agent بر هدر HTTP User-Agent متصل به منابع شبکه و همچنین مقدار navigator.userAgent تأثیر می‌گذارد.

رشته های از پیش تعریف شده User-Agent به روز شده اند تا نسخه های مرورگر مدرن را منعکس کنند.

تصویری از منوی User Agent در برگه Network Conditions.

برای دسترسی به شرایط شبکه ، منوی فرمان را باز کرده و دستور Show Network Conditions را اجرا کنید.

Chromium شماره 1029031

به روز رسانی پنل حسابرسی UI پیکربندی جدید

رابط کاربری پیکربندی طراحی جدید و پاسخگو دارد و گزینه های پیکربندی throttling ساده شده اند. برای اطلاعات بیشتر در مورد تغییرات UI throttling به کنترل پنل حسابرسی مراجعه کنید.

رابط کاربری پیکربندی جدید.

به روز رسانی برگه پوشش حالت های پوشش هر عملکرد یا هر بلوک

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

منوی کشویی حالت پوشش.

اکنون پوشش باید با بارگذاری مجدد صفحه آغاز شود

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

Chromium شماره 1004203

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

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

تماس با تیم Chrome DevTools

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

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

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

کروم 126 کروم 125 کروم 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 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59