این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

اسکریپت را در پنل شبکه نادیده بگیرید
تنظیم خودکار بزرگنمایی در حالت دستگاه
چاپ زیبا در برگه های پیش نمایش و پاسخ
پیش نمایش محتوای HTML در برگه پیش نمایش
لغو محلی با سبک های داخل HTML

توجه: در chrome://version بررسی کنید چه نسخه‌ای از Chrome را اجرا می‌کنید. اگر از نسخه قبلی استفاده می کنید، این ویژگی ها وجود نخواهند داشت. اگر نسخه بعدی را اجرا می کنید، ممکن است این ویژگی ها تغییر کرده باشند. Chrome تقریباً هر 6 هفته یکبار به نسخه اصلی جدید به‌روزرسانی خودکار می‌شود.

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

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

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

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

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

ماوس را روی ستون Initiator نگه دارید. پشته تماس که باعث درخواست شده است در یک پاپ آپ ظاهر می شود.
روی تماسی که می‌خواهید از نتایج آغازگر پنهان شود، راست کلیک کنید.
افزودن اسکریپت را برای نادیده گرفتن لیست انتخاب کنید. اکنون ستون 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 در پانل 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 ما بنویسید.