Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 59)

Kayce Basques

Selamat datang di bagian lain dari catatan rilis DevTools. Tonton video di bawah atau baca terus untuk mengetahui fitur-fitur baru di Chrome DevTools pada Chrome 59.

Sorotan

Cakupan kode CSS dan JS. Temukan CSS dan JS yang tidak digunakan dengan tab Cakupan baru.
Screenshot halaman penuh. Ambil tangkapan layar seluruh laman, dari bagian atas area pandang ke bawah.
Blokir permintaan. Nonaktifkan setiap permintaan secara manual di panel Jaringan.
Langkahi async await. Telusuri fungsi asinkron dengan mudah.
Menu Perintah Terpadu. Menjalankan perintah dan membuka file dari Menu {i>Command<i} yang baru digabungkan.

Fitur baru

Cakupan kode CSS dan JS

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

Tab Cakupan

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

Perincian cakupan kode di panel Sumber

Setiap baris kode diberi kode warna:

Hijau tidak berkedip berarti baris kode yang dieksekusi.
Merah tak berkedip berarti tidak dijalankan.
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, ekspresi ternary seperti var b = (a > 0) ? a : 0 berwarna merah dan hijau.

Untuk membuka tab Cakupan:

Buka Command Menu.
Mulai ketik Coverage, lalu pilih Tampilkan Cakupan.

Screenshot halaman penuh

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

Permintaan pemblokiran

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

Blokir URL Permintaan

Melangkahi await asinkron

Sampai saat ini, mencoba menelusuri kode seperti cuplikan di bawah ini sangat menyulitkan. Anda akan berada di tengah test(), melangkahi sebuah baris, lalu Anda akan terganggu oleh kode setInterval(). Sekarang, saat Anda menelusuri kode asinkron seperti test(), DevTools akan berjalan dari baris pertama hingga terakhir secara konsisten.

  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);
  }

N.B. ingin meningkatkan keterampilan proses debug Anda? Lihat dokumen new-ish ini:

Perubahan

Saat Anda membuka Command Menu, perhatikan bahwa perintah Anda diawali dengan karakter lebih besar dari (>). Hal ini karena Command Menu telah disatukan dengan menu Open File, yaitu 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

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

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.