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

Kayce Basques

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

• یک پنل حسابرسی جدید ، شامل آزمایش‌هایی برای برنامه‌های وب پیش‌رونده، عملکرد، دسترسی‌پذیری و بهترین شیوه‌ها.
• نشان‌های شخص ثالث . دریابید که کدام اشخاص ثالث درخواست‌های شبکه ارسال می‌کنند، به کنسول لاگین می‌کنند و جاوا اسکریپت را اجرا می‌کنند.
• ادامه به اینجا . یک حرکت جدید که می‌تواند گردش کار اشکال‌زدایی جاوا اسکریپت شما را سرعت بخشد.
• اشکال‌زدایی قابل پیش‌بینی برای جاوا اسکریپت ناهمزمان
• پیش‌نمایش اشیاء در کنسول .
• به‌روزرسانی‌های لحظه‌ای در برگه پوشش .
• یک منوی جدید برای انتخاب زمینه‌ها در کنسول .
• گزینه‌های ساده‌تر برای کنترل سرعت شبکه .
• ردیابی‌های پشته ناهمگام به طور پیش‌فرض روشن هستند .

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

ویژگی‌های جدید

پنل جدید Audits، ارائه شده توسط Lighthouse

پنل Audits اکنون توسط Lighthouse پشتیبانی می‌شود. Lighthouse مجموعه‌ای جامع از آزمایش‌ها را برای اندازه‌گیری کیفیت صفحات وب شما ارائه می‌دهد.

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

شکل ۱. گزارش لایت‌هاوس

برای حسابرسی یک صفحه:

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

فانوس دریایی در کنفرانس گوگل I/O '17

برای کسب اطلاعات بیشتر در مورد ادغام Lighthouse در DevTools، به گفتگوی DevTools در کنفرانس Google I/O 2017 که در زیر آمده است، نگاهی بیندازید.

به فانوس دریایی کمک کنید

لایت‌هاوس یک پروژه متن‌باز است. برای کسب اطلاعات بیشتر در مورد نحوه کار و چگونگی مشارکت در آن، به سخنرانی لایت‌هاوس در کنفرانس Google I/O 2017 که در زیر آمده است، مراجعه کنید.

ایده‌ای برای ممیزی Lighthouse دارید؟ آن را اینجا بنویسید!

نشان‌های شخص ثالث

از نشان‌های شخص ثالث استفاده کنید تا بینش بیشتری در مورد موجودیت‌هایی که درخواست‌های شبکه را در یک صفحه ارسال می‌کنند، به کنسول وارد می‌شوند و جاوا اسکریپت را اجرا می‌کنند، کسب کنید.

شکل ۲. نشانگر ماوس روی نشان شخص ثالث در پنل شبکه

شکل ۳. نگه داشتن ماوس روی نشان شخص ثالث در کنسول

برای فعال کردن نشان‌های شخص ثالث:

1. منوی فرمان را باز کنید.
2. دستور Show third party badges را اجرا کنید.

از گزینه گروه‌بندی بر اساس محصول در برگه‌های Call Tree و Bottom-Up برای گروه‌بندی فعالیت‌های ضبط عملکرد بر اساس موجودیت‌های شخص ثالثی که باعث ایجاد فعالیت‌ها شده‌اند، استفاده کنید. برای یادگیری نحوه تجزیه و تحلیل عملکرد با DevTools، به بخش «شروع با تجزیه و تحلیل عملکرد زمان اجرا» مراجعه کنید.

شکل ۴. گروه‌بندی بر اساس محصول در تب Bottom-Up

یک ژست جدید برای «ادامه به اینجا»

فرض کنید در خط ۲۵ یک اسکریپت متوقف شده‌اید و می‌خواهید به خط ۵۰ بروید. در گذشته، می‌توانستید یک نقطه توقف در خط ۵۰ تعیین کنید، یا روی خط کلیک راست کرده و گزینه «ادامه به اینجا» را انتخاب کنید. اما اکنون، یک حرکت سریع‌تر برای مدیریت این گردش کار وجود دارد.

هنگام حرکت در میان کدها، دکمه Command (مک) یا Control (ویندوز، لینوکس) را نگه دارید و سپس کلیک کنید تا به آن خط کد بروید. DevTools مقصدهای قابل پرش را با رنگ آبی برجسته می‌کند.

شکل ۵. ادامه تا اینجا

برای یادگیری اصول اولیه اشکال‌زدایی در DevTools ، به بخش «شروع اشکال‌زدایی جاوا اسکریپت» مراجعه کنید.

وارد حالت ناهمگام شوید

یکی از اهداف مهم تیم DevTools در آینده نزدیک، قابل پیش‌بینی کردن اشکال‌زدایی کدهای ناهمگام و ارائه تاریخچه کاملی از اجرای ناهمگام به شماست.

ژست حرکتی جدید برای «ادامه به اینجا» با کد ناهمزمان نیز کار می‌کند. وقتی دکمه‌های Command (مک) یا Control (ویندوز، لینوکس) را نگه می‌دارید، DevTools مقصدهای ناهمزمان قابل پرش را با رنگ سبز برجسته می‌کند.

برای مثال، دموی زیر را که از گفتگوی DevTools در I/O گرفته شده است، بررسی کنید.

تغییرات

پیش‌نمایش‌های آموزنده‌تر از اشیاء در کنسول

پیش از این، وقتی یک شیء را در کنسول ثبت یا ارزیابی می‌کردید، کنسول فقط Object نمایش می‌داد که چندان مفید نبود. اکنون، کنسول اطلاعات بیشتری در مورد محتوای شیء ارائه می‌دهد.

شکل 6. نحوه استفاده از کنسول برای پیش‌نمایش اشیاء

شکل 7. نحوه پیش‌نمایش اشیاء در کنسول

منوی انتخاب زمینه آموزنده‌تر در کنسول

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

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

شکل ۸. با نگه داشتن نشانگر ماوس روی یک iframe در منوی جدید Context Selection، آن در پنجره نمایش برجسته می‌شود.

به‌روزرسانی‌های لحظه‌ای در تب پوشش

هنگام ضبط پوشش کد در کروم ۵۹، تب Coverage فقط عبارت «در حال ضبط...» را نمایش می‌داد، بدون اینکه کد مورد استفاده قابل مشاهده باشد. اکنون، تب Coverage به صورت آنی کد مورد استفاده را به شما نشان می‌دهد.

شکل ۹. بارگیری و تعامل با یک صفحه با استفاده از برگه Coverage قدیمی

شکل 10. بارگیری و تعامل با یک صفحه با استفاده از برگه جدید Coverage

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

منوهای تنظیم سرعت شبکه در پنل‌های Network و Performance ساده شده‌اند و فقط شامل سه گزینه می‌شوند: Offline ، Slow 3G که در مکان‌هایی مانند هند رایج است و Fast 3G که در مکان‌هایی مانند ایالات متحده رایج است.

شکل ۱۱. گزینه‌های جدید کنترل سرعت شبکه

گزینه‌های تنظیم سرعت (throttling) برای مطابقت با سایر ابزارهای تنظیم سرعت در سطح هسته (kernel) اصلاح شده‌اند. DevTools دیگر معیارهای تأخیر، دانلود و آپلود را در کنار هر گزینه نشان نمی‌دهد، زیرا این مقادیر گمراه‌کننده بودند. هدف، مطابقت با تجربه واقعی هر گزینه است.

به طور پیش‌فرض، پشته‌های Async فعال هستند

کادر انتخاب Async از پنل منابع حذف شده است. ردیابی‌های پشته Async اکنون به طور پیش‌فرض فعال هستند. در گذشته، این گزینه به دلیل سربار عملکرد، اختیاری بود. اکنون سربار به اندازه کافی کم است که بتوان این ویژگی را به طور پیش‌فرض فعال کرد. اگر ترجیح می‌دهید ردیابی‌های پشته async غیرفعال باشند، می‌توانید آنها را در تنظیمات یا با اجرای دستور Do not capture async stack traces در منوی فرمان غیرفعال کنید.

ابزارهای توسعه (DevTools) در کنفرانس گوگل I/O 2017

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

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

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

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

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

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

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

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