Yang Baru di DevTools (Chrome 71)

Fitur baru dan perubahan besar yang akan hadir pada Chrome DevTools di Chrome 71 meliputi:

Baca terus, atau tonton versi video dari halaman ini:

Arahkan kursor ke Ekspresi Live untuk menandai node DOM

Saat Ekspresi Langsung mengevaluasi ke node DOM, arahkan kursor ke hasil Ekspresi Langsung untuk menyorot simpul itu di area pandang.

Mengarahkan kursor ke hasil Ekspresi Live untuk menandai node di area pandang.

Gambar 1. Mengarahkan kursor ke hasil Ekspresi Live untuk menandai node di area tampilan

Menyimpan node DOM sebagai variabel global

Untuk menyimpan node DOM sebagai variabel global, jalankan ekspresi di Konsol yang akan dievaluasi ke node, klik kanan hasilnya, lalu pilih Simpan sebagai variabel global.

Simpan sebagai variabel global di Console.

Gambar 2. Menyimpan sebagai variabel global di Konsol

Atau, klik kanan node di DOM Tree, lalu pilih Simpan sebagai variabel global.

Simpan sebagai variabel global di Pohon DOM.

Gambar 3. Simpan sebagai variabel global di Hierarki DOM

Informasi inisiator dan prioritas kini ada di impor dan ekspor HAR

Jika ingin mendiagnosis log jaringan dengan kolega, Anda dapat mengekspor permintaan jaringan ke file HAR.

Mengekspor permintaan jaringan ke file HAR.

Gambar 8. Mengekspor permintaan jaringan ke file HAR

Untuk mengimpor file kembali ke panel Jaringan, cukup tarik dan lepaskan.

Saat Anda mengekspor file HAR, DevTools kini menyertakan informasi inisiator dan prioritas di HAR . Saat Anda mengimpor file HAR kembali ke DevTools, kolom Initiator dan Priority akan telah diisi.

Kolom _initiator memberikan lebih banyak konteks terkait penyebab resource diminta. Ini dipetakan ke kolom Initiator pada tabel Permintaan.

Kolom inisiator.

Gambar 9. Kolom inisiator

Anda juga dapat menahan Shift dan mengarahkan kursor ke permintaan untuk melihat inisiatornya dan dependensi.

Melihat inisiator dan dependensi.

Gambar 10. Melihat inisiator dan dependensi

Kolom _priority menyatakan tingkat prioritas yang ditetapkan browser ke resource. Hal ini dipetakan ke kolom Prioritas di tabel Permintaan, yang disembunyikan secara default.

Kolom Prioritas.

Gambar 11. Kolom Prioritas

Klik kanan header tabel Permintaan dan pilih Priority untuk menampilkan Priority .

Cara menampilkan kolom Prioritas.

Gambar 12. Cara menampilkan kolom Prioritas

Mengakses Menu Perintah dari Menu Utama

Gunakan Menu Perintah untuk mengakses panel, tab, dan fitur DevTools dengan cepat.

Menu Perintah.

Gambar 13. Menu Perintah

Anda sekarang dapat membuka Menu Command dari Menu Utama. Klik Menu Utama Tombol utama, lalu pilih Run command.

Membuka Menu Perintah dari Menu Utama.

Gambar 14. Membuka Menu Perintah dari Menu Utama

Titik henti sementara Picture-in-Picture

Picture-in-Picture adalah API eksperimental baru yang memungkinkan halaman membuat video mengambang. di atas desktop.

Aktifkan kotak centang enterpictureinpicture, leavepictureinpicture, dan resize di Peristiwa Panel Pemroses Breakpoints untuk dijeda setiap kali salah satu peristiwa picture-in-picture ini diaktifkan. DevTools dijeda di baris pertama pengendali.

Peristiwa Picture-in-Picture di panel Titik henti sementara Pemroses Peristiwa.

Gambar 16. Peristiwa Picture-in-Picture di panel Breakpoints Pemroses Peristiwa

(Tips Bonus) Menjalankan monitorEvents() di Konsol untuk melihat peristiwa elemen dipicu

Misalnya Anda ingin menambahkan batas merah di sekitar tombol setelah memfokuskannya dan menekan R, E, D, tetapi Anda tidak tahu peristiwa apa yang akan ditambahkan pemroses. Gunakan monitorEvents() untuk mencatat semua peristiwa elemen ke Konsol.

  1. Mendapatkan referensi ke node.

    Menggunakan 'Simpan sebagai variabel global' untuk mendapatkan referensi ke node.

    Gambar 17. Menggunakan Simpan sebagai variabel global untuk mendapatkan referensi ke node

  2. Teruskan node sebagai argumen pertama ke monitorEvents().

    Meneruskan node ke monitorEvents().

    Gambar 18. Meneruskan node ke monitorEvents()

  3. Berinteraksi dengan node. DevTools mencatat semua peristiwa node ke Console.

    Peristiwa node di Konsol.

    Gambar 19. Peristiwa node di Console

Panggil unmonitorEvents() untuk berhenti mencatat peristiwa ke dalam log ke Konsol.

unmonitorEvents(temp1);

Meneruskan array sebagai argumen kedua ke monitorEvents() jika Anda hanya ingin memantau peristiwa tertentu atau jenis peristiwa:

monitorEvents(temp1, ['mouse', 'focus']);

Jenis mouse memberi tahu DevTools untuk mencatat semua peristiwa terkait mouse, seperti mousedown dan click. Jenis lain yang didukung adalah key, touch, dan control.

Lihat Referensi Command Line untuk fungsi praktis lainnya yang dapat Anda panggil dari Console.

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.
  • Beri 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.