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

  • پیشنهاد یا بازخورد خود را از طریق 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