Yang Baru di DevTools (Chrome 71)

Kayce Basques
Kayce Basques

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

Lanjutkan membaca, atau tonton versi video halaman ini:

Arahkan kursor ke Ekspresi Langsung untuk menandai node DOM

Saat Ekspresi Langsung dievaluasi ke node DOM, arahkan kursor ke hasil Ekspresi Langsung untuk menandai node tersebut di area tampilan.

Arahkan kursor ke hasil Ekspresi Langsung untuk menandai node di area tampilan.

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

Menyimpan node DOM sebagai variabel global

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

Simpan sebagai variabel global di Konsol.

Gambar 2. Simpan sebagai variabel global di Konsol

Atau, klik kanan node di DOM Tree, lalu pilih Store as global variable.

Simpan sebagai variabel global di Hierarki DOM.

Gambar 3. Menyimpan sebagai variabel global di Hierarki DOM

Informasi inisiasi dan prioritas kini tersedia 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 lalu lepas file tersebut.

Saat Anda mengekspor file HAR, DevTools kini menyertakan informasi inisiator dan prioritas dalam file HAR. Saat Anda mengimpor kembali file HAR ke DevTools, kolom Pemrakarsa dan Prioritas akan diisi.

Kolom _initiator memberikan konteks lebih lanjut tentang penyebab resource diminta. Ini dipetakan ke kolom Initiator dalam tabel Requests.

Kolom inisiator.

Gambar 9. Kolom inisiator

Anda juga dapat menahan Shift dan mengarahkan kursor ke permintaan untuk melihat pemrakarsa dan dependensinya.

Melihat inisiator dan dependensi.

Gambar 10. Melihat inisiator dan dependensi

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

Kolom Prioritas.

Gambar 11. Kolom Prioritas

Klik kanan header tabel Permintaan, lalu pilih Prioritas untuk menampilkan kolom Prioritas.

Cara menampilkan kolom Prioritas.

Gambar 12. Cara menampilkan kolom Prioritas

Mengakses Menu Perintah dari Menu Utama

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

Menu Perintah.

Gambar 13. Menu Perintah

Anda kini dapat membuka Menu Perintah dari Menu Utama. Klik tombol Main Menu 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 jendela video mengambang di atas desktop.

Aktifkan kotak centang enterpictureinpicture, leavepictureinpicture, dan resize di panel Titik Henti Sementara Pemroses Peristiwa untuk menjeda setiap kali salah satu peristiwa picture-in-picture ini dipicu. DevTools akan berhenti di baris pertama handler.

Acara Picture-in-Picture di panel Titik Henti Sementara Pemroses Peristiwa.

Gambar 16. Acara Picture-in-Picture di panel Titik Henti Sementara Pemroses Peristiwa

(Tips Tambahan) Jalankan monitorEvents() di Konsol untuk mengamati peristiwa elemen yang dipicu

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

  1. Dapatkan 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 Konsol.

    Peristiwa node di Konsol.

    Gambar 19. Peristiwa node di Konsol

Panggil unmonitorEvents() untuk berhenti mencatat peristiwa ke Konsol.

unmonitorEvents(temp1);

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

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 Konsol.

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.