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

کیس باسک
Kayce Basques
X GitHub

به بخش دیگری از یادداشت‌های انتشار DevTools خوش آمدید. ویدیوی زیر را تماشا کنید یا ادامه مطلب را بخوانید تا ببینید چه چیزهایی در Chrome DevTools در Chrome 59 جدید است!

نکات برجسته

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

پوشش کدهای CSS و JS

با استفاده از تب جدید Coverage ، کدهای CSS و JS استفاده نشده را پیدا کنید. وقتی صفحه‌ای را بارگذاری یا اجرا می‌کنید، این تب به شما می‌گوید که چه مقدار کد استفاده شده است، در مقابل چه مقدار بارگذاری شده است. می‌توانید با ارسال کدهایی که نیاز دارید، حجم صفحات خود را کاهش دهید.

برگه پوشش

کلیک روی یک URL، آن فایل را در پنل منابع (Sources) به همراه جزئیاتی از خطوط کد اجرا شده نشان می‌دهد.

تفکیک پوشش کد در پنل منابع

هر خط کد با رنگ خاصی مشخص شده است:

  • سبز ثابت به معنی اجرای آن خط کد است.
  • قرمز ثابت یعنی اجرا نشده.
  • یک خط کد که هم قرمز و هم سبز است، مانند خط ۳ در تصویر بالا، به این معنی است که فقط بخشی از کد آن خط اجرا شده است. برای مثال، یک عبارت سه‌تایی مانند var b = (a > 0) ? a : 0 هم قرمز و هم سبز رنگ‌آمیزی شده است.

برای باز کردن برگه پوشش :

  1. منوی فرمان را باز کنید.
  2. شروع به تایپ Coverage کنید و Show Coverage را انتخاب کنید.

اسکرین‌شات‌های تمام صفحه

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

درخواست‌های مسدودسازی

می‌خواهید ببینید وقتی یک اسکریپت، استایل‌شیت یا منبع خاص دیگری در دسترس نیست، صفحه شما چگونه رفتار می‌کند؟ روی درخواست در پنل شبکه کلیک راست کرده و Block Request URL را انتخاب کنید. یک برگه جدید مسدود کردن درخواست در کشو ظاهر می‌شود که به شما امکان می‌دهد درخواست‌های مسدود شده را مدیریت کنید.

آدرس درخواست مسدود کردن

فراتر از async await

تا الان، تلاش برای اجرای کدی مانند قطعه کد زیر، دردسرساز بود. شما در وسط test() بودید، از یک خط عبور می‌کردید و سپس کد setInterval() کار شما را متوقف می‌کرد. حالا، وقتی کد async مانند test() را اجرا می‌کنید، DevTools با هماهنگی از خط اول تا آخر پیش می‌رود.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

پی‌نوشت: اگر می‌خواهید مهارت‌های اشکال‌زدایی خود را ارتقا دهید، این مستندات نسبتاً جدید را بررسی کنید:

تغییرات

منوی فرماندهی یکپارچه

وقتی منوی Command را باز می‌کنید، متوجه می‌شوید که دستور شما با یک کاراکتر بزرگتر از ( > ) شروع می‌شود. دلیل این امر این است که منوی Command با منوی Open File که Command + O (مک) یا Control + O (ویندوز، لینوکس) است، یکی شده است.

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

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

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

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

قابلیت‌های جدید در DevTools

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