چیزهای جدید در 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 کامل هر منبع شبکه استفاده کنید.

تصویری از ستون‌های Path و URL جدید در پانل Network.

روی هدر جدول 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

،

کیس باس

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

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

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

تصویری از کنسول در Chrome 78 نشان می دهد که اجازه می دهد تا بازگرداندن مجدد شکست بخورد.

اکنون ، کنسول اجازه می دهد تا دوباره تنظیم شود:

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

شماره Chromium #1004193

اشکال زدایی وب سایت بهبود یافته

DevTools شروع به پشتیبانی از استاندارد اشکال زدایی کوتوله کرده است ، به این معنی که افزایش پشتیبانی برای قدم گذاشتن بر روی کد ، تنظیم نقاط شکست و حل آثار پشته در زبان های منبع شما در DevTools است. برای داستان کامل ، اشکال زدایی WebAssembly را در Devtools Chrome بهبود بخشید.

تصویری از اشکال زدایی جدید WebAnsembly با کوتوله.

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

زنجیره های آغازگر را در برگه آغازگر درخواست کنید

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

تصویری از زنجیره آغازگر درخواست در برگه آغازگر

پس از ورود به فعالیت شبکه در پنل شبکه ، روی یک منبع کلیک کنید و سپس به برگه آغازگر بروید تا زنجیره آغازگر درخواست آن را مشاهده کنید:

  • منبع بازرسی جسورانه است. در تصویر بالا ، 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 شد.

شماره Chromium #842488

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

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

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

شماره کروم #988253

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

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

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

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

شماره کروم #993366

رشته های کاربر و عامل به روز شده

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

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

تصویری از منوی عامل کاربر در برگه شرایط شبکه.

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

شماره Chromium #1029031

به روزرسانی های پانل حسابرسی

UI پیکربندی جدید

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

UI پیکربندی جدید.

به روزرسانی برگه پوشش

در هر عملکرد یا حالت پوشش هر بلوک

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

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

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

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

شماره Chromium #1004203

کانال های پیش نمایش را بارگیری کنید

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

در تماس با تیم Chrome Devtools

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

  • یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهیدبیشتر > راهنما > گزارش مسائل DevTools در DevTools.
  • توییت در chromedevtools .
  • در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

کروم 126

کروم 125

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

کروم 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

Chrome 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

Chrome 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

کروم 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59