Yang Baru di DevTools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Selamat datang di catatan rilis DevTools lainnya. Tonton video di bawah atau baca terus untuk melihat apa yang baru di Chrome DevTools di Chrome 59.

Sorotan

Fitur baru

Cakupan kode CSS dan JS

Temukan kode CSS dan JS yang tidak digunakan dengan tab Cakupan baru. Saat Anda memuat atau menjalankan halaman, tab akan memberi tahu Anda jumlah kode yang digunakan, dibandingkan dengan jumlah kode yang dimuat. Anda dapat mengurangi ukuran halaman dengan hanya mengirimkan kode yang Anda butuhkan.

Tab Cakupan

Mengklik URL akan menampilkan file tersebut di panel Sumber dengan perincian baris kode yang dieksekusi.

Pengelompokan cakupan kode di panel Sumber

Setiap baris kode diberi kode warna:

  • Warna hijau solid berarti baris kode tersebut dieksekusi.
  • Merah pekat berarti tidak dieksekusi.
  • Baris kode yang berwarna merah dan hijau, seperti baris 3 pada screenshot di atas, berarti hanya beberapa kode pada baris tersebut yang dieksekusi. Misalnya, ekspresi terner seperti var b = (a > 0) ? a : 0 diwarnai merah dan hijau.

Untuk membuka tab Cakupan:

  1. Buka Menu Perintah.
  2. Mulai ketik Coverage dan pilih Show Coverage.

Screenshot seluruh halaman

Tonton video di bawah untuk mempelajari cara mengambil screenshot dari bagian atas halaman hingga ke bagian bawah.

Memblokir permintaan

Ingin melihat perilaku halaman Anda saat skrip, stylesheet, atau resource lain tertentu tidak tersedia? Klik kanan permintaan di panel Network, lalu pilih Block Request URL. Tab Pemblokiran permintaan baru akan muncul di Drawer, yang memungkinkan Anda mengelola permintaan yang diblokir.

Blokir URL Permintaan

Melangkahi async await

Hingga saat ini, mencoba menelusuri kode seperti cuplikan di bawah ini sangat merepotkan. Anda akan berada di tengah test(), melewati satu baris, lalu Anda akan terganggu oleh kode setInterval(). Sekarang, saat Anda menelusuri kode asinkron seperti test(), DevTools menelusuri dari baris pertama hingga terakhir dengan konsistensi.

  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: Ingin meningkatkan keterampilan men-debug Anda? Lihat dokumen baru ini:

Perubahan

Menu Perintah Terpadu

Saat Anda membuka Menu Perintah sekarang, perhatikan bahwa perintah Anda diawali dengan karakter lebih besar dari (>). Hal ini karena Menu Perintah telah disatukan dengan menu Open File, yang merupakan Command+O (Mac), atau Control+O (Windows, Linux).

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.