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

Kayce Basques

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

• لغوهای محلی
• ابزارهای دسترسی جدید
• تب تغییرات
• سئو جدید و ممیزی عملکرد
• چندین ضبط در پنل عملکرد
• کد قابل اعتماد همراه با کارگران و کد ناهمزمان

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

لغوهای محلی

Local Overrides به شما امکان می دهد تغییراتی را در DevTools ایجاد کنید و این تغییرات را در بارگذاری صفحه حفظ کنید. قبلاً، هر تغییری که در DevTools ایجاد کرده بودید، هنگام بارگیری مجدد صفحه از بین می رفت. Local Override برای اکثر انواع فایل ها کار می کند، با چند استثنا. محدودیت ها را ببینید.

شکل 1 . تداوم تغییر CSS در بارگیری صفحه با لغوهای محلی

چگونه کار می کند:

• شما دایرکتوری را مشخص می کنید که DevTools باید تغییرات را در آن ذخیره کند.
• هنگامی که در DevTools تغییراتی ایجاد می کنید، DevTools یک کپی از فایل اصلاح شده را در دایرکتوری شما ذخیره می کند.
• هنگامی که صفحه را مجدداً بارگذاری می کنید، DevTools به جای منبع شبکه، فایل محلی و اصلاح شده را ارائه می دهد.

برای تنظیم Local Override :

1. پنل Sources را باز کنید.

2. تب Overrides را باز کنید.

   

   شکل 2 . تب Overrides

3. روی Setup Overrides کلیک کنید.

4. انتخاب کنید که می خواهید تغییرات خود را در کدام دایرکتوری ذخیره کنید.

5. در بالای نمای خود، روی Allow کلیک کنید تا به DevTools دسترسی خواندن و نوشتن به دایرکتوری داده شود.

6. تغییرات خود را انجام دهید

محدودیت ها

• DevTools تغییرات ایجاد شده در DOM Tree پانل Elements را ذخیره نمی کند. به جای آن HTML را در پانل منابع ویرایش کنید.
• اگر CSS را در قسمت Styles ویرایش کنید و منبع آن CSS یک فایل HTML باشد، DevTools تغییر را ذخیره نخواهد کرد. به جای آن فایل HTML را در پانل منابع ویرایش کنید.

ویژگی های مرتبط

• فضاهای کاری DevTools به طور خودکار منابع شبکه را به یک مخزن محلی نگاشت می کند. هر زمان که تغییری در DevTools ایجاد می‌کنید، این تغییر در مخزن محلی شما نیز ذخیره می‌شود.

تب تغییرات

تغییراتی را که به صورت محلی در DevTools انجام می دهید از طریق برگه تغییرات جدید ردیابی کنید.

شکل 3 . تب تغییرات

ابزارهای دسترسی جدید

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

صفحه دسترسی

برای بررسی ویژگی‌های دسترس‌پذیری عنصر انتخاب‌شده فعلی، از پنجره Accessibility در پانل Elements استفاده کنید.

شکل 4 . پنجره Accessibility ویژگی‌های ARIA و ویژگی‌های محاسبه‌شده عنصری را که در حال حاضر در درخت DOM در پانل Elements انتخاب شده است، و همچنین موقعیت آن را در درخت دسترسی نشان می‌دهد.

A11ycast Rob Dodson را در برچسب زیر بررسی کنید تا پنجره Accessibility را در عمل ببینید.

نسبت کنتراست در Color Picker

Color Picker اکنون نسبت کنتراست عناصر متن را به شما نشان می دهد. افزایش نسبت کنتراست عناصر متنی باعث می شود تا سایت شما برای کاربرانی که دارای اختلالات بینایی کم یا کمبود دید رنگی هستند در دسترس تر باشد. برای آشنایی بیشتر با نحوه تأثیر نسبت کنتراست بر دسترسی، به رنگ و کنتراست مراجعه کنید.

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

شکل 5 . بررسی نسبت کنتراست عنصر h1 برجسته شده

در شکل 5 ، دو علامت تیک کنار 4.61 به این معنی است که این عنصر با نسبت کنتراست توصیه شده افزایش یافته (AAA) مطابقت دارد. اگر فقط یک علامت داشت، به این معنی است که حداقل نسبت کنتراست توصیه شده (AA) را دارد.

روی نمایش بیشتر کلیک کنید برای گسترش بخش نسبت کنتراست . خط سفید در کادر Color Spectrum مرز بین رنگ‌هایی را نشان می‌دهد که نسبت کنتراست توصیه شده را دارند و آنهایی که ندارند. به عنوان مثال، از آنجایی که رنگ خاکستری در شکل 6 مطابق با توصیه ها است، به این معنی است که همه رنگ های زیر خط سفید نیز با توصیه ها مطابقت دارند.

شکل 6 . بخش گسترش یافته نسبت کنتراست

ویژگی های مرتبط

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

برای آشنایی با نحوه استفاده از پنل حسابرسی برای آزمایش دسترسی، به Run Lighthouse در Chrome DevTools مراجعه کنید، یا A11ycast را در زیر تماشا کنید.

ممیزی های جدید

Chrome 65 با دسته بندی کاملاً جدیدی از ممیزی SEO و بسیاری از ممیزی های عملکرد جدید عرضه می شود.

ممیزی های جدید سئو

اطمینان از اینکه صفحات شما هر یک از ممیزی های دسته بندی جدید سئو را می گذرانند، ممکن است به بهبود رتبه بندی موتور جستجوی شما کمک کند.

شکل 7 . دسته بندی جدید سئو حسابرسی

ممیزی عملکرد جدید

Chrome 65 همچنین با بسیاری از ممیزی‌های عملکرد جدید عرضه می‌شود:

• زمان راه اندازی جاوا اسکریپت زیاد است
• از سیاست کش ناکارآمد در دارایی های ثابت استفاده می کند
• از تغییر مسیر صفحه جلوگیری می کند
• سند از افزونه ها استفاده می کند
• CSS را کوچک کنید
• جاوا اسکریپت را کوچک کنید

پرف مهمه! پس از اینکه مای نت سرعت بارگذاری صفحه خود را تا 4 برابر بهبود بخشید، کاربران 43 درصد زمان بیشتری را در سایت سپری کردند، 34 درصد صفحات بیشتری را مشاهده کردند، نرخ پرش 24 درصد کاهش یافت و درآمد به ازای هر بازدید از صفحه مقاله 25 درصد افزایش یافت. بیشتر بدانید .

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

به روز رسانی های دیگر

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

کد قابل اعتماد همراه با کارگران و کد ناهمزمان

Chrome 65 به‌روزرسانی‌هایی را به Step Into ارائه می‌کند هنگام ورود به کدی که پیام‌ها را بین رشته‌ها و کدهای ناهمزمان ارسال می‌کند، را فشار دهید. اگر رفتار پله پله قبلی را می خواهید، می توانید از Step جدید استفاده کنید در عوض دکمه

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

وقتی وارد کدی می شوید که پیام ها را بین رشته ها ارسال می کند، DevTools اکنون به شما نشان می دهد که در هر رشته چه اتفاقی می افتد.

به عنوان مثال، برنامه در شکل 8 پیامی را بین رشته اصلی و رشته کارگر ارسال می کند. پس از ورود به فراخوانی postMessage() در رشته اصلی، DevTools در کنترل کننده onmessage در رشته کارگر مکث می کند. خود کنترل کننده onmessage یک پیام را به موضوع اصلی ارسال می کند. وارد شدن به این فراخوانی، DevTools را در رشته اصلی متوقف می‌کند.

شکل 8 . ورود به کد ارسال پیام در Chrome 65

هنگامی که در نسخه‌های قبلی کروم وارد کدی مانند این می‌شوید، کروم فقط سمت رشته اصلی کد را به شما نشان می‌دهد، همانطور که در شکل 9 مشاهده می‌کنید.

شکل 9 . ورود به کد ارسال پیام در Chrome 63

ورود به کدهای ناهمزمان

در هنگام ورود به کد ناهمزمان، DevTools اکنون فرض می کند که می خواهید در کد ناهمزمان که در نهایت اجرا می شود، مکث کنید.

به عنوان مثال، در شکل 10 پس از ورود به setTimeout() ، DevTools تمام کدهای منتهی به آن نقطه را در پشت صحنه اجرا می کند و سپس در تابعی که به setTimeout() ارسال می شود مکث می کند.

شکل 10 . ورود به کد ناهمزمان در کروم 65

همانطور که در شکل 11 می بینید، زمانی که وارد کدی مانند این در کروم 63 شدید، DevTools همزمان با اجرا شدن کد، مکث کرد.

شکل 11 . ورود به کد ناهمزمان در کروم 63

چندین ضبط در پنل عملکرد

اکنون پانل عملکرد به شما امکان می دهد تا حداکثر 5 ضبط را به طور موقت ذخیره کنید. هنگامی که پنجره DevTools خود را می بندید، ضبط ها حذف می شوند. برای اینکه با پنل Performance راحت شوید ، به شروع با تجزیه و تحلیل عملکرد زمان اجرا مراجعه کنید.

شکل 12 . انتخاب بین چندین ضبط در پانل عملکرد

پاداش: خودکار کردن اقدامات DevTools با Puppeteer 1.0

نسخه 1.0 Puppeteer، یک ابزار اتوماسیون مرورگر که توسط تیم Chrome DevTools نگهداری می شود، اکنون منتشر شده است. می‌توانید از Puppeteer برای خودکارسازی بسیاری از کارهایی که قبلاً فقط از طریق DevTools در دسترس بودند، مانند گرفتن اسکرین‌شات، استفاده کنید:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

همچنین دارای API برای بسیاری از کارهای اتوماسیون مفید است، مانند تولید PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

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

همچنین می‌توانید از Puppeteer برای افشای ویژگی‌های DevTools در حین مرور بدون باز کردن صریح DevTools استفاده کنید. برای مثال استفاده از ویژگی‌های DevTools بدون باز کردن DevTools را ببینید.

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

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

تماس با تیم Chrome DevTools

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

• پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

Kayce Basques

ویژگی های جدید به Devtools در Chrome 65 شامل موارد زیر است:

• نادیده گرفتن محلی
• ابزارهای دسترسی جدید
• برگه تغییرات
• حسابرسی جدید سئو و عملکرد
• ضبط های چندگانه در پانل عملکرد
• کدهای قابل اعتماد با کارگران و کد ناهمزمان

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

نادیده گرفتن محلی

غلبه های محلی به شما امکان می دهد تغییراتی در devtools ایجاد کنید و آن تغییرات را در بارهای صفحه نگه دارید. پیش از این ، هر تغییری که در DevTools ایجاد کرده اید ، هنگام بارگیری مجدد صفحه از بین می رود. نادیده گرفتن محلی برای اکثر انواع پرونده ها ، با چند استثنا. محدودیت ها را ببینید.

شکل 1 . ادامه یک تغییر CSS در بارهای صفحه با غلبه های محلی

چگونه کار می کند:

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

برای تنظیم نادیده گرفتن محلی :

1. پانل منابع را باز کنید.

2. برگه Overrides را باز کنید.

   

   شکل 2 . برگه Overrides

3. روی Setup Overrides کلیک کنید.

4. انتخاب کنید که کدام فهرست را می خواهید تغییرات خود را در آن ذخیره کنید.

5. در بالای دیدگاه خود ، روی اجازه دهید تا DevTools را بخواند و به دایرکتوری دسترسی پیدا کند.

6. تغییرات خود را انجام دهید

محدودیت ها

• DevTools تغییرات ایجاد شده در درخت DOM از پانل عناصر را ذخیره نمی کند. به جای آن ، HTML را در پانل منابع ویرایش کنید.
• اگر CSS را در صفحه سبک ویرایش کنید ، و منبع آن CSS یک فایل HTML است ، DevTools تغییر را ذخیره نمی کند. به جای آن ، پرونده HTML را در پانل منابع ویرایش کنید.

ویژگی های مرتبط

• فضای کاری DevTools به طور خودکار منابع شبکه را به یک مخزن محلی ترسیم می کند. هر زمان که در DevTools تغییر ایجاد کنید ، این تغییر در مخزن محلی شما نیز ذخیره می شود.

برگه تغییرات

تغییراتی را که به صورت محلی در DevTools از طریق برگه New Change ایجاد می کنید ، ردیابی کنید.

شکل 3 . برگه تغییرات

ابزارهای دسترسی جدید

از صفحه دسترسی جدید برای بازرسی از ویژگی های دسترسی یک عنصر استفاده کنید و نسبت کنتراست عناصر متنی موجود در انتخاب رنگ را بازرسی کنید تا اطمینان حاصل شود که آنها در دسترس کاربران با اختلالات کم نظیر یا کمبودهای دید رنگ هستند.

صفحه قابل دسترسی

برای بررسی خصوصیات دسترسی عنصر در حال حاضر انتخاب شده از صفحه دسترسی در پانل عناصر استفاده کنید.

شکل 4 . صفحه دسترسی ویژگی های ARIA و خصوصیات محاسبه شده را برای عنصری که در حال حاضر در درخت DOM در پنل عناصر انتخاب شده است ، و همچنین موقعیت آن در درخت دسترسی را نشان می دهد.

برای دیدن صفحه دسترسی در عمل ، از A11Ycast Rob Dodson در برچسب زدن در زیر دیدن کنید.

نسبت کنتراست در انتخاب رنگ

انتخاب کننده رنگ اکنون نسبت کنتراست عناصر متنی را به شما نشان می دهد. افزایش نسبت کنتراست عناصر متنی باعث می شود سایت شما در دسترس کاربران با اختلالات کم نظیر یا کمبودهای دید رنگ باشد. برای کسب اطلاعات بیشتر در مورد چگونگی تأثیر نسبت کنتراست بر دسترسی ، به رنگ و تضاد مراجعه کنید.

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

شکل 5 . بازرسی نسبت کنتراست عنصر h1 برجسته

در شکل 5 ، دو علامت در کنار 4.61 به این معنی است که این عنصر با نسبت کنتراست توصیه شده پیشرفته (AAA) مطابقت دارد. اگر فقط یک علامت چک داشته باشد ، این بدان معنی است که حداقل نسبت کنتراست توصیه شده (AA) را برآورده می کند.

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

شکل 6 . بخش نسبت کنتراست گسترش یافته

ویژگی های مرتبط

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

برای یادگیری نحوه استفاده از پانل حسابرسی برای آزمایش دسترسی ، به Lighthouse Run Lighthouse در Chrome Devtools مراجعه کنید ، یا A11Ycast را در زیر مشاهده کنید.

ممیزی های جدید

Chrome 65 با یک دسته کاملاً جدید از حسابرسی سئو و بسیاری از حسابرسی های عملکرد جدید کشتی می گیرد.

ممیزی های جدید سئو

اطمینان از اینکه صفحات شما هر یک از حسابرسی ها را در گروه جدید SEO منتقل می کند ممکن است به بهبود رتبه های موتور جستجو کمک کند.

شکل 7 . دسته جدید سئو ممیزی ها

ممیزی های عملکرد جدید

Chrome 65 همچنین با بسیاری از ممیزی های عملکرد جدید ارسال می شود:

• زمان بوت شدن JavaScript زیاد است
• از سیاست حافظه پنهان ناکارآمد در دارایی های استاتیک استفاده می کند
• از تغییر مسیر صفحه جلوگیری می کند
• سند از پلاگین ها استفاده می کند
• MINIFY CSS
• جاوا اسکریپت را کوچک کنید

مسائل عطر! بعد از اینکه MYNET سرعت بار صفحه خود را با 4 برابر بهبود بخشید ، کاربران 43 ٪ زمان بیشتری را در سایت گذراندند ، 34 ٪ صفحات بیشتر را مشاهده کردند ، نرخ گزاف گویی 24 ٪ کاهش یافت و درآمد در هر صفحه مقاله 25 ٪ افزایش یافت. بیشتر بدانید .

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

به روز رسانی های دیگر

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

کدهای قابل اعتماد با کارگران و کد ناهمزمان

Chrome 65 به روزرسانی ها را به مرحله وارد می کند دکمه هنگام ورود به کدی که پیام های بین موضوعات و کد ناهمزمان را منتقل می کند. اگر می خواهید رفتار پله قبلی را بخواهید ، می توانید از مرحله جدید استفاده کنید در عوض دکمه.

قدم زدن به کدی که پیام های بین موضوعات را منتقل می کند

وقتی وارد کدی می شوید که پیام های بین موضوعات را منتقل می کند ، DevTools اکنون به شما نشان می دهد که در هر موضوع چه اتفاقی می افتد.

به عنوان مثال ، برنامه در شکل 8 پیام بین موضوع اصلی و موضوع کارگر را منتقل می کند. پس از قدم گذاشتن به postMessage() با موضوع اصلی ، Devtools در قسمت onmessage در موضوع کارگر مکث می کند. خود کنترل کننده onmessage پیامی را به موضوع اصلی ارسال می کند. قدم زدن به آن تماس ، مکث های Devtools را در موضوع اصلی قرار می دهد.

شکل 8 . قدم به کد پست پیام در Chrome 65

هنگامی که در نسخه های قبلی Chrome به کدهایی مانند این رفتید ، Chrome فقط به شما نشان می دهد که قسمت اصلی کد کد را نشان می دهد ، همانطور که در شکل 9 مشاهده می کنید.

شکل 9 . قدم زدن به کد گذر پیام در Chrome 63

قدم به کد ناهمزمان

DevTools هنگام قدم گذاشتن به کد ناهمزمان ، اکنون فرض می کند که می خواهید در کد ناهمزمان که در نهایت اجرا می شود ، مکث کنید.

به عنوان مثال ، در شکل 10 پس از قدم گذاشتن به setTimeout() ، DevTools تمام کد منتهی به آن نقطه را پشت صحنه اجرا می کند ، و سپس در عملکردی که به setTimeout() .

شکل 10 . قدم زدن به کد ناهمزمان در Chrome 65

هنگامی که در Chrome 63 به کد مانند این وارد شدید ، Devtools در کد مکث کرد ، همانطور که در شکل 11 مشاهده می کنید.

شکل 11 . قدم زدن به کد ناهمزمان در Chrome 63

ضبط های چندگانه در پانل عملکرد

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

شکل 12 . انتخاب بین ضبط های متعدد در پانل عملکرد

جایزه: اقدامات DevTools را با Puppeteer 1.0 خودکار کنید

نسخه 1.0 Puppeteer ، یک ابزار اتوماسیون مرورگر که توسط تیم Chrome Devtools نگهداری می شود ، اکنون خارج است. شما می توانید از Puppeteer برای خودکار سازی بسیاری از وظایف که قبلاً فقط از طریق DevTools در دسترس بودند ، استفاده کنید ، مانند ضبط تصاویر:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

همچنین دارای API برای بسیاری از کارهای اتوماسیون به طور کلی مفید مانند تولید PDF است:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

شروع سریع برای کسب اطلاعات بیشتر را ببینید.

همچنین می توانید از Puppeteer برای افشای ویژگی های DevTools در حالی که مرور می کنید بدون اینکه به صراحت باز کردن devtools را باز کنید ، استفاده کنید. برای مثال با استفاده از ویژگی های DevTools بدون باز کردن DevTools مراجعه کنید.

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

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

در تماس با تیم Chrome Devtools

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

• یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
• با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهید > راهنما > گزارش مسائل DevTools در DevTools.
• توییت در chromedevtools .
• در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

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

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

Kayce Basques

New features coming to DevTools in Chrome 65 include:

• Local Overrides
• New accessibility tools
• The Changes tab
• New SEO and performance audits
• Multiple recordings in the Performance panel
• Reliable code stepping with workers and asynchronous code

Read on, or watch the video version of these release notes, below.

Local Overrides

Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types, with a couple of exceptions. See Limitations .

شکل 1 . Persisting a CSS change across page loads with Local Overrides

چگونه کار می کند:

• You specify a directory where DevTools should save changes.
• When you make changes in DevTools, DevTools saves a copy of the modified file to your directory.
• When you reload the page, DevTools serves the local, modified file, rather than the network resource.

To set up Local Overrides :

1. Open the Sources panel.

2. Open the Overrides tab.

   

   شکل 2 . The Overrides tab

3. Click Setup Overrides .

4. Select which directory you want to save your changes to.

5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.

6. تغییرات خود را انجام دهید

محدودیت ها

• DevTools doesn't save changes made in the DOM Tree of the Elements panel. Edit HTML in the Sources panel instead.
• If you edit CSS in the Styles pane, and the source of that CSS is an HTML file, DevTools won't save the change. Edit the HTML file in the Sources panel instead.

ویژگی های مرتبط

• Workspaces . DevTools automatically maps network resources to a local repository. Whenever you make a change in DevTools, that change gets saved to your local repository, too.

The Changes tab

Track changes that you make locally in DevTools via the new Changes tab.

شکل 3 . The Changes tab

New accessibility tools

Use the new Accessibility pane to inspect the accessibility properties of an element, and inspect the contrast ratio of text elements in the Color Picker to ensure that they're accessible to users with low-vision impairments or color-vision deficiencies.

Accessibility pane

Use the Accessibility pane on the Elements panel to investigate the accessibility properties of the currently-selected element.

شکل 4 . The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Check out Rob Dodson's A11ycast on labeling below to see the Accessibility pane in action.

Contrast ratio in the Color Picker

The Color Picker now shows you the contrast ratio of text elements. Increasing the contrast ratio of text elements makes your site more accessible to users with low-vision impairments or color-vision deficiencies. See Color and contrast to learn more about how contrast ratio affects accessibility.

Improving the color contrast of your text elements makes your site more usable for all users. In other words, if your text is grey with a white background, that's hard for anyone to read.

شکل 5 . Inspecting the contrast ratio of the highlighted h1 element

In Figure 5 , the two checkmarks next to 4.61 means that this element meets the enhanced recommended contrast ratio (AAA) . If it only had one checkmark, that would mean it met the minimum recommended contrast ratio (AA) .

Click Show More to expand the Contrast Ratio section. The white line in the Color Spectrum box represents the boundary between colors that meet the recommended contrast ratio, and those that don't. For example, since the grey color in Figure 6 meets recommendations, that means that all of the colors below the white line also meet recommendations.

شکل 6 . The expanded Contrast Ratio section

ویژگی های مرتبط

The Audits panel has an automated accessibility audit for ensuring that every text element on a page has a sufficient contrast ratio.

See Run Lighthouse in Chrome DevTools , or watch the A11ycast below, to learn how to use the Audits panel to test accessibility.

New audits

Chrome 65 ships with a whole new category of SEO audits, and many new performance audits.

New SEO audits

Ensuring that your pages pass each of the audits in the new SEO category may help improve your search engine rankings.

شکل 7 . The new SEO category of audits

New performance audits

Chrome 65 also ships with many new performance audits:

• JavaScript boot-up time is high
• Uses inefficient cache policy on static assets
• Avoids page redirects
• Document uses plugins
• Minify CSS
• جاوا اسکریپت را کوچک کنید

Perf matters! After Mynet improved their page load speed by 4X, users spent 43% more time on the site, viewed 34% more pages, bounce rates dropped 24%, and revenue increased 25% per article pageview. بیشتر بدانید .

نکته If you want to improve the load performance of your pages, but don't know where to start, try the Audits panel. You give it a URL, and it gives you a detailed report on many different ways you can improve that page. شروع کنید .

به روز رسانی های دیگر

• New, manual accessibility audits
• Updates to the WebP audit to make it more inclusive of other next-generation image formats
• A rehaul of the accessibility score
• If an accessibility audit is not applicable for a page, that audit no longer counts towards the accessibility score
• Performance is now the top section in reports

Reliable code stepping with workers and asynchronous code

Chrome 65 brings updates to the Step Into button when stepping into code that passes messages between threads, and asynchronous code. If you want the previous stepping behavior, you can use the new Step button, instead.

Stepping into code that passes messages between threads

When you step into code that passes messages between threads, DevTools now shows you what happens in each thread.

For example, the app in Figure 8 passes a message between the main thread and the worker thread. After stepping into the postMessage() call on the main thread, DevTools pauses in the onmessage handler in the worker thread. The onmessage handler itself posts a message back to the main thread. Stepping into that call pauses DevTools back in the main thread.

شکل 8 . Stepping into message-passing code in Chrome 65

When you stepped into code like this in earlier versions of Chrome, Chrome only showed you the main-thread-side of the code, as you can see in Figure 9 .

شکل 9 . Stepping into message-passing code in Chrome 63

Stepping into asynchronous code

When stepping into asynchronous code, DevTools now assumes that you want to pause in the the asynchronous code that eventually runs.

For example, in Figure 10 after stepping into setTimeout() , DevTools runs all of the code leading up to that point behind the scenes, and then pauses in the function that's passed to setTimeout() .

شکل 10 . Stepping into asynchronous code in Chrome 65

When you stepped into code like this in Chrome 63, DevTools paused in code as it chronologically ran, as you can see in Figure 11 .

شکل 11 . Stepping into asynchronous code in Chrome 63

Multiple recordings in the Performance panel

The Performance panel now lets you temporarily save up to 5 recordings. The recordings are deleted when you close your DevTools window. See Get Started with Analyzing Runtime Performance to get comfortable with the Performance panel.

شکل 12 . Selecting between multiple recordings in the Performance panel

Bonus: Automate DevTools actions with Puppeteer 1.0

Version 1.0 of Puppeteer, a browser automation tool maintained by the Chrome DevTools team, is now out. You can use Puppeteer to automate many tasks that were previously only available via DevTools, such as capturing screenshots:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

It also has APIs for lots of generally useful automation tasks, such as generating PDFs:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

See Quick Start to learn more.

You can also use Puppeteer to expose DevTools features while browsing without ever explicitly opening DevTools. See Using DevTools Features Without Opening DevTools for an example.

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

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

A list of everything that has been covered in the What's new in DevTools series.