Yang Baru di DevTools (Chrome 66)

Kayce Basques

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

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

Abaikan skrip di panel Jaringan

Kolom Inisiator di panel Jaringan memberi tahu Anda alasan resource diminta. Sebagai misalnya, jika JavaScript menyebabkan gambar diambil, kolom Inisiator akan menampilkan baris Kode JavaScript yang menyebabkan permintaan.

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

Yang sebenarnya Anda inginkan dalam skenario ini adalah melihat kode aplikasi yang menyebabkan permintaan. Itu adalah sekarang mungkin:

  1. Arahkan kursor ke kolom Initiator. 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 Inisiator sekarang menyembunyikan semua panggilan 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.

Pretty-printing di tab Preview and Response

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

Tab Pratinjau mencetak indah konten analytics.js secara default.

Gambar 2. Tab Preview melakukan pencetakan cantik isi analytics.js secara default

Untuk melihat versi resource yang tidak diminifikasi, gunakan tab Response. Anda juga dapat secara manual Pretty print dari tab Response, melalui tombol Format yang baru.

Mencetak secara manual konten analytics.js melalui tombol Format.

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

Melihat pratinjau konten HTML di tab Pratinjau

Sebelumnya, tab Preview di panel Network menampilkan kode resource HTML di situasi tertentu, sambil merender pratinjau HTML pada situasi lain. Tab Preview sekarang selalu melakukan proses rendering dasar pada HTML. Aplikasi ini tidak dimaksudkan untuk menjadi browser lengkap, sehingga mungkin tidak ditampilkan 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

Penyesuaian otomatis zoom dalam Mode Perangkat

Saat dalam Mode Perangkat, buka dropdown Zoom, lalu pilih Sesuaikan zoom otomatis untuk mengubah ukuran area pandang secara otomatis setiap kali Anda mengubah orientasi perangkat.

Penggantian Lokal kini berfungsi dengan beberapa gaya yang ditentukan dalam HTML

Kembali ketika DevTools meluncurkan Local Overrides di Chrome 65, salah satu keterbatasannya adalah tidak dapat melacak perubahan pada gaya yang ditentukan dalam HTML. Misalnya, pada Gambar 7 terdapat 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 Style DevTools, Local Penggantian tidak akan melacak perubahan. Dengan kata lain, pada pemuatan ulang berikutnya, gaya akan kembali 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 Breakpoint Pemroses Peristiwa lebih berguna

Saat membuat video Mulai Menggunakan Proses Debug JavaScript, beberapa penonton berkomentar bahwa titik henti sementara pemroses peristiwa tidak berguna untuk aplikasi yang dibangun di atas kerangka kerja, karena peristiwa pemroses sering digabungkan dalam kode framework. Misalnya, pada Gambar 8 saya telah menyiapkan click di DevTools. Ketika saya mengklik tombol di demo, DevTools secara otomatis akan berhenti sementara di baris pertama kode pemroses. Dalam hal ini, ia berhenti di kode wrapper Vue.js pada baris 1802, yang tidak begitu membantu.

Titik henti sementara klik dijeda di Vue.js kode wrapper standar.

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

Karena skrip Vue.js berada dalam file terpisah, saya dapat mengabaikan skrip tersebut dari Call Stack panel 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 dieksekusi tanpa menjeda di dalamnya, dan kemudian berhenti di baris pertama kode pada pemroses aplikasi saya, yaitu di mana saya benar-benar ingin berhenti sejenak.

Titik henti sementara klik sekarang dijeda pada kode pemroses aplikasi.

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

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.