Yang Baru di DevTools (Chrome 66)

Kayce Basques
Kayce Basques
X GitHub

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

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

Mengabaikan skrip di panel Jaringan

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

Sebelumnya, jika framework Anda membungkus permintaan jaringan dalam wrapper, kolom Pemrakarsa tidak akan terlalu berguna. Semua permintaan jaringan mengarah ke baris kode wrapper yang sama.

Yang sebenarnya Anda inginkan dalam skenario ini adalah melihat kode aplikasi yang menyebabkan permintaan. Sekarang sudah memungkinkan:

  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 inisiator.
  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 yang Diabaikan di Setelan.

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

Mencetak dengan rapi di tab Pratinjau dan Respons

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

Tab Pratinjau mencetak rapi konten analytics.js secara default.

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

Untuk melihat versi resource yang tidak di-minify, gunakan tab Respons. Anda juga dapat mencetak rapi resource secara manual dari tab Response, melalui tombol Format baru.

Mencetak rapi konten analytics.js secara manual melalui tombol Format.

Gambar 3. Mencetak konten analytics.js secara manual dengan tampilan yang lebih rapi 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 dalam situasi lainnya. Tab Pratinjau kini selalu melakukan rendering dasar HTML. WebView 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 dan 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 di Mode Perangkat, buka dropdown Zoom dan pilih Sesuaikan zoom otomatis untuk mengubah ukuran area tampilan 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 batasannya adalah bahwa fitur ini tidak dapat melacak perubahan pada gaya yang ditentukan dalam HTML. Misalnya, dalam Gambar 7, ada aturan gaya dalam 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 Lokal tidak akan melacak perubahan tersebut. Dengan kata lain, saat 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 agar Titik Henti Sementara Pemroses Peristiwa lebih berguna

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

Titik henti sementara klik akan 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 agar titik henti 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 breakpoint click, kode Vue.js akan dieksekusi tanpa dijeda, lalu dijeda di baris kode pertama di pemroses aplikasi saya, yang merupakan tempat yang saya inginkan untuk menjeda sejak awal.

Titik henti sementara klik kini dijeda pada kode pemroses aplikasi.

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

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