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

کیسی باسکی

ویژگی‌های جدید و تغییرات عمده‌ای که به DevTools در Chrome 66 می‌آیند عبارتند از:

در ادامه بخوانید یا نسخه ویدیویی یادداشت‌های انتشار را تماشا کنید.

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

ستون Initiator در پنل Network به شما می گوید که چرا یک منبع درخواست شده است. به عنوان مثال، اگر جاوا اسکریپت باعث واکشی تصویر شود، ستون Initiator خط کد جاوا اسکریپت را نشان می دهد که باعث درخواست شده است.

قبلاً، اگر چارچوب شما درخواست‌های شبکه را در یک wrapper پیچیده می‌کرد، ستون Initiator چندان مفید نخواهد بود. همه درخواست‌های شبکه به یک خط کد بسته بندی اشاره داشتند.

چیزی که واقعاً در این سناریو می خواهید این است که کد برنامه ای را که باعث درخواست می شود ببینید. اکنون این امکان وجود دارد:

  1. ماوس را روی ستون Initiator نگه دارید. پشته تماس که باعث درخواست شده است در یک پاپ آپ ظاهر می شود.
  2. روی تماسی که می‌خواهید از نتایج آغازگر پنهان شود، راست کلیک کنید.
  3. افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید. اکنون ستون Initiator هر تماسی را از اسکریپت که نادیده گرفته اید پنهان می کند.

نادیده گرفتن 'requests.js'.

شکل 1 . نادیده گرفتن requests.js

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

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

چاپ زیبا در برگه های پیش نمایش و پاسخ

تب Preview در پانل Network اکنون منابع را به طور پیش فرض زیبا چاپ می کند که تشخیص دهد آن منابع کوچک شده اند.

برگه Preview محتویات analytics.js را به طور پیش فرض به زیبایی چاپ می کند.

شکل 2 . برگه Preview محتویات analytics.js را به طور پیش فرض به زیبایی چاپ می کند

برای مشاهده نسخه unminified یک منبع، از تب Response استفاده کنید. همچنین می‌توانید از طریق دکمه Format جدید، منابع را به صورت دستی از تب Response چاپ کنید.

چاپ زیبای دستی محتویات analytics.js از طریق دکمه Format.

شکل 3 . چاپ زیبای دستی محتویات analytics.js از طریق دکمه Format

پیش نمایش محتوای HTML در تب Preview

قبلاً، تب Preview در پانل Network کد یک منبع HTML را در موقعیت‌های خاص نشان می‌داد، در حالی که پیش‌نمایش HTML را در موقعیت‌های دیگر ارائه می‌داد. اکنون تب Preview همیشه یک رندر اولیه از HTML را انجام می دهد. در نظر گرفته نشده است که یک مرورگر کامل باشد، بنابراین ممکن است HTML را دقیقاً همانطور که انتظار دارید نمایش ندهد. اگر می‌خواهید کد HTML را ببینید، روی تب Response کلیک کنید یا روی یک منبع کلیک راست کرده و Open in Sources panel را انتخاب کنید.

پیش نمایش HTML در تب Preview.

شکل 4 . پیش نمایش HTML در تب Preview

تنظیم خودکار بزرگنمایی در حالت دستگاه

هنگامی که در حالت دستگاه هستید، منوی کشویی Zoom را باز کرده و تنظیم خودکار بزرگنمایی را انتخاب کنید تا هر زمان که جهت دستگاه را تغییر می‌دهید اندازه درگاه نمایش به طور خودکار تغییر کند.

Local Overrides اکنون با برخی از سبک های تعریف شده در HTML کار می کند

زمانی که DevTools Local Overrides را در Chrome 65 راه اندازی کرد، یک محدودیت این بود که نمی توانست تغییرات سبک های تعریف شده در HTML را ردیابی کند. به عنوان مثال، در شکل 7 یک قانون سبک در head سند وجود دارد که font-weight: bold برای عناصر h1 پررنگ.

نمونه ای از سبک های تعریف شده در HTML

شکل 5 . نمونه ای از سبک های تعریف شده در HTML

در Chrome 65، اگر اعلان font-weight از طریق صفحه DevTools Style تغییر دهید، Local Overrides تغییر را ردیابی نخواهد کرد. به عبارت دیگر، در بارگذاری مجدد بعدی، سبک به font-weight: bold . اما در کروم 66، تغییراتی مانند این اکنون در بارگذاری صفحه ادامه دارند.

نکته پاداش: اسکریپت های چارچوب را نادیده بگیرید تا نقاط شکست شنونده رویداد را مفیدتر کنید

زمانی که من ویدیوی شروع با اشکال زدایی جاوا اسکریپت را ایجاد کردم، برخی از بینندگان اظهار داشتند که نقاط شکست شنونده رویداد برای برنامه های ساخته شده در بالای چارچوب ها مفید نیستند، زیرا شنوندگان رویداد اغلب در کد فریمورک پیچیده می شوند. به عنوان مثال، در شکل 8 من یک نقطه شکست click را در DevTools تنظیم کرده ام. وقتی روی دکمه در دمو کلیک می کنم، DevTools به طور خودکار در خط اول کد شنونده مکث می کند. در این مورد، در کد Wrapper Vue.js در خط 1802 مکث می کند، که چندان مفید نیست.

نقطه شکست کلیک در کد Wrapper Vue.js متوقف می شود.

شکل 6 . نقطه شکست click در کد Wrapper Vue.js متوقف می شود

از آنجایی که اسکریپت Vue.js در یک فایل جداگانه است، می توانم آن اسکریپت را از صفحه Call Stack نادیده بگیرم تا این نقطه شکست click مفیدتر کنم.

نادیده گرفتن اسکریپت Vue.js از صفحه Call Stack.

شکل 7 . نادیده گرفتن اسکریپت Vue.js از صفحه Call Stack

دفعه بعد که روی دکمه کلیک می کنم و نقطه شکست click را فعال می کنم، کد Vue.js را بدون مکث در آن اجرا می کند و سپس در اولین خط کد در شنونده برنامه من مکث می کند، جایی که من واقعاً می خواستم در تمام مدت مکث کنم.

اکنون نقطه شکست کلیک روی کد شنونده برنامه متوقف می شود.

شکل 8 . اکنون نقطه شکست click روی کد شنونده برنامه متوقف می شود

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

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

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

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

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

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