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

کیسی باسکی

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

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

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

پنل ممیزی جدید، طراحی شده توسط Lighthouse

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

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

گزارش فانوس دریایی

شکل 1 . گزارش فانوس دریایی

برای ممیزی یک صفحه:

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

فانوس دریایی در Google I/O '17

برای کسب اطلاعات بیشتر در مورد ادغام Lighthouse در DevTools، بحث DevTools از Google I/O '17 را در زیر بررسی کنید.

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

Lighthouse یک پروژه متن باز است. برای کسب اطلاعات بیشتر در مورد نحوه عملکرد و نحوه مشارکت در آن، گفتگوی Lighthouse از Google I/O '17 را در زیر بررسی کنید.

ایده ای برای ممیزی فانوس دریایی دارید؟ آن را اینجا ارسال کنید!

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

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

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

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

ماوس را روی یک نشان شخص ثالث در کنسول قرار دهید

شکل 3 . ماوس را روی یک نشان شخص ثالث در کنسول قرار دهید

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

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

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

گروه بندی بر اساس محصول در برگه پایین به بالا

شکل 4 . گروه بندی بر اساس محصول در برگه پایین به بالا

یک حرکت جدید برای Continue to Here

فرض کنید در خط 25 یک اسکریپت مکث کرده اید، و می خواهید به خط 50 بروید. در گذشته، می توانید یک نقطه شکست در خط 50 تعیین کنید، یا روی خط کلیک راست کرده و Continue to here را انتخاب کنید. اما اکنون، یک حرکت سریع‌تر برای مدیریت این گردش کار وجود دارد.

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

به اینجا ادامه دهید

شکل 5 . ادامه به اینجا

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

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

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

ژست جدید برای Continue to Here همچنین با کد ناهمزمان کار می کند. هنگامی که Command (Mac) یا Control (ویندوز، لینوکس) را نگه می دارید، DevTools مقاصد ناهمزمان قابل پرش را با رنگ سبز برجسته می کند.

برای مثال، نسخه ی نمایشی زیر را از بحث DevTools در I/O بررسی کنید.

تغییرات

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

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

چگونه کنسول برای پیش نمایش اشیاء استفاده می کرد

شکل 6 . چگونه کنسول برای پیش نمایش اشیاء استفاده می کرد

چگونه کنسول اکنون اشیا را پیش‌نمایش می‌کند

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

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

منوی Context Selection Console اکنون اطلاعات بیشتری در مورد زمینه های موجود ارائه می دهد.

  • عنوان توضیح می دهد که هر مورد چیست.
  • زیرنویس زیر عنوان دامنه ای را که مورد از آنجا آمده است را توصیف می کند.
  • ماوس را روی یک زمینه iframe نگه دارید تا آن را در نمای نمای برجسته کنید.

منوی جدید انتخاب زمینه

شکل 8 . نگه داشتن ماوس روی یک iframe در منوی جدید انتخاب زمینه، آن را در پنجره دید برجسته می کند

به‌روزرسانی‌های بی‌درنگ در برگه پوشش

هنگام ضبط پوشش کد در Chrome 59، برگه Coverage فقط «ضبط...» را نشان می‌دهد، بدون اینکه کد مورد استفاده را مشخص کند. اکنون، تب Coverage به شما در زمان واقعی نشان می دهد که چه کدی استفاده می شود.

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

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

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

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

گزینه های ساده تر مهار شبکه

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

گزینه های جدید مهار شبکه

شکل 11 . گزینه های جدید مهار شبکه

گزینه‌های throttling برای مطابقت با سایر ابزارهای throttling در سطح هسته بهینه‌سازی شده‌اند. DevTools دیگر معیارهای تأخیر، بارگیری و بارگذاری را در کنار هر گزینه نشان نمی‌دهد، زیرا آن مقادیر گمراه‌کننده بودند. هدف تطابق با تجربه واقعی هر گزینه است.

به طور پیش‌فرض پشته‌های همگام‌سازی روشن است

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

DevTools در Google I/O '17

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

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

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

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

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

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

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