Yang Baru di DevTools (Chrome 59)

Kayce Basques

Selamat datang di bagian lain dari catatan rilis DevTools. Tonton video di bawah ini atau baca terus untuk mengetahui 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 laman, tab memberi tahu Anda berapa banyak kode yang digunakan, versus berapa banyak dimuat. Anda dapat mengurangi ukuran halaman hanya dengan mengirimkan kode yang Anda perlukan.

Tab Cakupan

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

Perincian cakupan kode di panel Sources

Setiap baris kode diberi kode warna:

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

Untuk membuka tab Cakupan:

  1. Buka Menu Perintah.
  2. Mulai ketik Coverage, lalu pilih Tampilkan Cakupan.

Screenshot halaman penuh

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

Blokir permintaan

Ingin melihat perilaku laman Anda saat skrip, stylesheet, atau sumber daya lain tidak tersedia? Klik kanan permintaan di Network lalu pilih Blokir URL Permintaan. Tab Minta pemblokiran baru muncul di Panel Samping, yang memungkinkan Anda mengelola permintaan yang diblokir.

Blokir URL Permintaan

Melangkahi await asinkron

Sampai sekarang, mencoba untuk menelusuri kode seperti cuplikan di bawah adalah sakit kepala. Anda akan berada di tengah test(), melangkahi garis, lalu Anda akan terganggu oleh kode setInterval(). Sekarang, ketika Anda melangkah kode asinkron seperti test(), DevTools langkah 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);
  }

Catatan Tambahan: ingin meningkatkan keterampilan {i>debugging <i}Anda? Lihat dokumen bergaya baru ini:

Perubahan

Menu Unified Command

Saat Anda membuka Menu Perintah, perhatikan bahwa perintah Anda diawali dengan karakter lebih besar dari (>). Hal ini karena perintah Menu telah disatukan dengan menu Buka 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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