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

کیس باسک
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پیش‌نمایش HTML در برگه پیش‌نمایش.

شکل ۴. پیش‌نمایش HTML در برگه پیش‌نمایش

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

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

لغوهای محلی اکنون با برخی از سبک‌های تعریف‌شده در HTML کار می‌کنند

زمانی که DevTools قابلیت Local Overrides را در کروم ۶۵ راه‌اندازی کرد، یکی از محدودیت‌های آن این بود که نمی‌توانست تغییرات استایل‌های تعریف‌شده در HTML را ردیابی کند. برای مثال، در شکل ۷ یک قانون استایل در head سند وجود دارد که برای عناصر h1 font-weight: bold اعلام می‌کند.

مثالی از سبک‌های تعریف‌شده در HTML

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

در کروم ۶۵، اگر تعریف font-weight را از طریق پنل DevTools Style تغییر می‌دادید، Local Overrides این تغییر را ردیابی نمی‌کرد. به عبارت دیگر، در بارگذاری مجدد بعدی، استایل به font-weight: bold برمی‌گشت. اما در کروم ۶۶، تغییراتی از این دست اکنون در طول بارگذاری صفحات باقی می‌مانند.

نکته‌ی اضافی: اسکریپت‌های چارچوب را نادیده بگیرید تا نقاط توقف شنونده‌ی رویداد (Event Listener Breakpoints) مفیدتر شوند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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