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

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

Kayce Basques

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

نکات برجسته

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

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

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

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

برگه پوشش

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

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

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

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

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

منوی فرمان را باز کنید.
شروع به تایپ 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 استفاده کنید.

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