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

Kayce Basques

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

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

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

اکنون، کنسول اجازه تعریف مجدد را می‌دهد:

مشکل کرومیوم شماره ۱۰۰۴۱۹۳

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

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

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

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

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

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

• منبع بازرسی‌شده پررنگ است. در تصویر بالا، https://web.dev/default-627898b5.js منبع بازرسی‌شده است.
• منابعی که بالای منبع بازرسی‌شده قرار دارند، آغازگرها (initiator) هستند. در تصویر بالا، 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 شده است.

مشکل کرومیوم شماره ۸۴۲۴۸۸

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

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

مشکل کرومیوم شماره ۹۸۸۲۵۳

ستون‌های URL و مسیر در پنل Network

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

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

مشکل کرومیوم شماره ۹۹۳۳۶۶

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

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

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

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

مشکل کرومیوم شماره ۱۰۲۹۰۳۱

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

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

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

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

حالت‌های پوشش به ازای هر تابع یا به ازای هر بلوک

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

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

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

مشکل کرومیوم شماره ۱۰۰۴۲۰۳

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

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

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

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

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

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

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