Yang Baru di DevTools (Chrome 66)

Kayce Basques

Fitur baru dan perubahan besar yang akan hadir di DevTools di Chrome 66 mencakup:

Baca terus, atau tonton video dari catatan rilis di bawah.

Mengabaikan skrip di panel Jaringan

Kolom Initiator di panel Network memberi tahu Anda alasan resource diminta. Misalnya, jika JavaScript menyebabkan gambar diambil, kolom Initiator akan menampilkan baris kode JavaScript yang menyebabkan permintaan.

Sebelumnya, jika framework Anda menggabungkan permintaan jaringan dalam wrapper, kolom Initiator tidak akan terlalu membantu. Semua permintaan jaringan mengarah ke baris kode wrapper yang sama.

Yang Anda inginkan dalam skenario ini adalah melihat kode aplikasi yang menyebabkan permintaan. Sekarang hal itu dapat dilakukan:

  1. Arahkan kursor ke kolom Pemrakarsa. Stack panggilan yang menyebabkan permintaan muncul di pop-up.
  2. Klik kanan panggilan yang ingin Anda sembunyikan dari hasil pemicu.
  3. Pilih Tambahkan skrip ke daftar yang diabaikan. Kolom Pemrakarsa kini menyembunyikan panggilan apa pun dari skrip yang Anda abaikan.

Mengabaikan 'requests.js'.

Gambar 1. Mengabaikan requests.js

Kelola skrip yang diabaikan dari tab Daftar Abaikan di Setelan.

Lihat Mengabaikan skrip atau pola skrip untuk mempelajari lebih lanjut cara mengabaikan skrip.

Pencetakan yang rapi di tab Pratinjau dan Respons

Tab Preview di panel Network kini mencetak resource secara default saat mendeteksi bahwa resource tersebut telah diminifikasi.

Tab Pratinjau mencetak konten analytics.js secara default.

Gambar 2. Tab Preview mencetak konten analytics.js secara default

Untuk melihat versi resource yang tidak diminifikasi, gunakan tab Response. Anda juga dapat secara manual mencetak sumber daya dengan format yang baik dari tab Response, melalui tombol Format baru.

Mencetak konten analytics.js secara manual melalui tombol Format.

Gambar 3. Mencetak konten analytics.js secara manual melalui tombol Format

Melihat pratinjau konten HTML di tab Pratinjau

Sebelumnya, tab Preview di panel Network menampilkan kode resource HTML dalam situasi tertentu, sekaligus merender pratinjau HTML di situasi lainnya. Tab Pratinjau kini selalu melakukan rendering dasar HTML. Browser ini tidak dimaksudkan sebagai browser lengkap, sehingga mungkin tidak menampilkan HTML persis seperti yang Anda harapkan. Jika Anda ingin melihat kode HTML, klik tab Response, atau klik kanan resource, lalu pilih Open in Sources panel.

Melihat pratinjau HTML di tab Pratinjau.

Gambar 4. Melihat pratinjau HTML di tab Preview

Menyesuaikan zoom secara otomatis dalam Mode Perangkat

Saat berada dalam Mode Perangkat, buka dropdown Zoom dan pilih Zoom auto adjust untuk mengubah ukuran area pandang secara otomatis setiap kali Anda mengubah orientasi perangkat.

Penggantian Lokal kini berfungsi dengan beberapa gaya yang ditentukan dalam HTML

Saat DevTools meluncurkan Penggantian Lokal di Chrome 65, salah satu keterbatasannya adalah DevTools tidak dapat melacak perubahan pada gaya yang ditentukan dalam HTML. Misalnya, dalam Gambar 7, ada aturan gaya di head dokumen yang mendeklarasikan font-weight: bold untuk elemen h1.

Contoh gaya yang ditentukan dalam HTML

Gambar 5. Contoh gaya yang ditentukan dalam HTML

Di Chrome 65, jika Anda mengubah deklarasi font-weight melalui panel Gaya DevTools, Penggantian Lokasi tidak akan melacak perubahan tersebut. Dengan kata lain, pada pemuatan ulang berikutnya, gaya akan kembali ke font-weight: bold. Namun, di Chrome 66, perubahan seperti ini kini tetap ada di seluruh pemuatan halaman.

Tips bonus: Abaikan skrip framework untuk membuat Titik Henti Sementara Pemroses Peristiwa lebih berguna

Saat saya membuat video Memulai Proses Debug JavaScript, beberapa penonton berkomentar bahwa titik henti sementara pemroses peristiwa tidak berguna untuk aplikasi yang dibuat di atas framework, karena pemroses peristiwa sering digabungkan dalam kode framework. Misalnya, dalam Gambar 8, saya telah menyiapkan titik henti sementara click di DevTools. Saat saya mengklik tombol dalam demo, DevTools otomatis berhenti sementara di baris pertama kode pemroses. Dalam hal ini, kode dijeda di kode wrapper Vue.js pada baris 1802, yang tidak terlalu membantu.

Titik henti sementara klik dijeda dalam kode wrapper Vue.js.

Gambar 6. Titik henti sementara click dijeda dalam kode wrapper Vue.js

Karena skrip Vue.js berada dalam file terpisah, saya dapat mengabaikan skrip tersebut dari panel Call Stack untuk membuat titik henti sementara click ini lebih berguna.

Mengabaikan skrip Vue.js dari panel Call Stack.

Gambar 7. Mengabaikan skrip Vue.js dari panel Call Stack

Saat berikutnya saya mengklik tombol dan memicu titik henti sementara click, kode Vue.js akan dijalankan tanpa menjeda di dalamnya, lalu dijeda pada baris pertama kode di pemroses aplikasi saya, yang merupakan tempat saya benar-benar ingin menjeda.

Titik henti sementara klik kini dijeda pada kode pemroses aplikasi.

Gambar 8. Titik henti sementara click kini dijeda pada kode pemroses aplikasi

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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