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

کیسی باسکی

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

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

لغوهای محلی

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

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

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

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

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

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

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

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

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

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

بررسی نسبت کنتراست عنصر H1 برجسته شده.

شکل 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 می‌دهید، و گزارش مفصلی در مورد روش‌های مختلفی که می‌توانید آن صفحه را بهبود ببخشید، به شما ارائه می‌دهد. شروع کنید .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شکل 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 استفاده کنید.

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

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