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

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

Kayce Basques

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

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

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

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

لغوهای محلی

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

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

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

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

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

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

پنل Sources را باز کنید.
تب Overrides را باز کنید.
شکل 2 . تب Overrides
روی Setup Overrides کلیک کنید.
انتخاب کنید که می خواهید تغییرات خود را در کدام دایرکتوری ذخیره کنید.
در بالای نمای خود، روی Allow کلیک کنید تا به DevTools دسترسی خواندن و نوشتن به دایرکتوری داده شود.
تغییرات خود را انجام دهید

محدودیت ها

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 را کوچک کنید
جاوا اسکریپت را کوچک کنید

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

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

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

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

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

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

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