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

کیس باسک
Kayce Basques
X GitHub

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

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

لغوهای محلی

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

حفظ تغییرات CSS در طول بارگذاری صفحه با استفاده از Local Overrides.

شکل ۱. حفظ یک تغییر CSS در طول بارگذاری صفحه با استفاده از Local Overrides

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

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

برای تنظیم لغوهای محلی :

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

  2. برگه «لغوها» را باز کنید.

    برگه لغوها

    شکل 2. برگه لغوها

  3. روی لغو تنظیمات کلیک کنید.

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

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

  6. تغییرات خود را اعمال کنید.

محدودیت‌ها

  • DevTools تغییرات ایجاد شده در درخت DOM پنل Elements را ذخیره نمی‌کند. در عوض، HTML را در پنل Sources ویرایش کنید.
  • اگر CSS را در پنل Styles ویرایش کنید و منبع آن CSS یک فایل HTML باشد، DevTools تغییر را ذخیره نمی‌کند. در عوض، فایل HTML را در پنل Sources ویرایش کنید.
  • فضاهای کاری . DevTools به طور خودکار منابع شبکه را به یک مخزن محلی نگاشت می‌کند. هر زمان که در DevTools تغییری ایجاد کنید، آن تغییر در مخزن محلی شما نیز ذخیره می‌شود.

برگه تغییرات

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

برگه تغییرات

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

ابزارهای جدید دسترسی‌پذیری

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

پنل دسترسی

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

پنل دسترسی‌پذیری

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

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

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

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

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

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

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

در شکل ۵ ، دو علامت تیک کنار عدد ۴.۶۱ به این معنی است که این عنصر نسبت کنتراست توصیه‌شده‌ی بهبودیافته (AAA) را برآورده می‌کند. اگر فقط یک علامت تیک داشت، به این معنی بود که حداقل نسبت کنتراست توصیه‌شده (AA) را برآورده می‌کند.

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

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

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

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

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

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

کروم ۶۵ با دسته‌ای کاملاً جدید از ممیزی‌های سئو و بسیاری از ممیزی‌های عملکرد جدید عرضه می‌شود.

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

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

دسته جدید حسابرسی سئو.

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

حسابرسی عملکرد جدید

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

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

عالی بودن مهم است! بعد از اینکه Mynet سرعت بارگذاری صفحه خود را ۴ برابر بهبود داد، کاربران ۴۳٪ زمان بیشتری را در سایت گذراندند، ۳۴٪ صفحات بیشتری مشاهده کردند، نرخ پرش ۲۴٪ کاهش یافت و درآمد به ازای هر بازدید از صفحه مقاله ۲۵٪ افزایش یافت. اطلاعات بیشتر .

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

سایر به‌روزرسانی‌ها

کدنویسی قابل اعتماد با استفاده از workerها و کد ناهمزمان

کروم ۶۵ به‌روزرسانی‌هایی برای Step Into ارائه می‌دهد قدم بگذارید دکمه هنگام ورود به کدی که پیام‌ها را بین نخ‌ها منتقل می‌کند، و کد ناهمزمان. اگر می‌خواهید رفتار گام به گام قبلی را داشته باشید، می‌توانید از Step جدید استفاده کنید. قدم دکمه، به جای آن.

ورود به کدی که پیام‌ها را بین نخ‌ها منتقل می‌کند

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

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

ورود به کد ارسال پیام در کروم ۶۵.

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

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

ورود به کد ارسال پیام در کروم ۶۳

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

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

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

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

ورود به کدنویسی ناهمگام در کروم ۶۵

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

وقتی در کروم ۶۳ وارد کدی مانند این می‌شوید، DevTools هنگام اجرای کد به ترتیب زمانی، آن را متوقف می‌کند، همانطور که در شکل ۱۱ می‌بینید.

ورود به کدنویسی ناهمگام در کروم ۶۳

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

چندین ضبط در پنل Performance

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

انتخاب بین چندین ضبط در پنل Performance.

شکل ۱۲. انتخاب بین چندین ضبط در پنل Performance

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

نسخه ۱.۰ Puppeteer، ابزاری برای اتوماسیون مرورگر که توسط تیم 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» پوشش داده شده است.