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

کیسی باسکی

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

نکات برجسته

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

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

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

برگه پوشش

با کلیک بر روی یک URL آن فایل در پنل Sources با تفکیک خطوط کد اجرا شده را نشان می دهد.

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

هر خط کد دارای کد رنگی است:

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

برای باز کردن تب Coverage :

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

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

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

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

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

URL درخواست را مسدود کنید

گام به گام بیش از ناهمگام منتظر باشید

تا به حال، تلاش برای عبور از کد مانند قطعه زیر یک سردرد بود. شما در میانه 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);
  }

PS می خواهید مهارت های اشکال زدایی خود را ارتقا دهید؟ این اسناد جدید را بررسی کنید:

تغییرات

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

هنگامی که اکنون منوی فرمان را باز می کنید، توجه کنید که دستور شما با یک کاراکتر بزرگتر از ( > ) اضافه شده است. دلیل آن این است که Command Menu با منوی Open File که Command + O (Mac) یا Control + O (ویندوز، لینوکس) است، متحد شده است.

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

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

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

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

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

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