Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 62)

Kayce Basques

Fitur dan perubahan baru akan hadir di DevTools di Chrome 62:

Catatan: Anda dapat memeriksa versi Chrome yang Anda jalankan di chrome://version. Chrome akan diupdate secara otomatis ke versi utama baru setiap 6 minggu.

Operator await tingkat teratas di Konsol

Konsol kini mendukung operator await tingkat atas.

Menggunakan operator await tingkat teratas di Konsol

Gambar 1. Menggunakan operator await tingkat teratas di Konsol

Alur kerja screenshot baru

Kini Anda dapat mengambil screenshot sebagian area pandang, atau node HTML tertentu.

Screenshot sebagian area tampilan

Untuk mengambil screenshot sebagian area pandang:

Klik Inspect atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux) untuk masuk ke Inspect Element Mode.
Tahan Command (Mac) atau Control (Windows, Linux), lalu pilih bagian area tampilan yang ingin Anda ambil screenshot-nya.
Lepaskan mouse. DevTools akan mendownload screenshot bagian yang Anda pilih.

Mengambil screenshot sebagian area tampilan

Gambar 2. Mengambil screenshot sebagian area tampilan

Screenshot node HTML tertentu

Untuk mengambil screenshot node HTML tertentu:

Pilih elemen di panel Elemen.

Gambar 3. Dalam contoh ini, tujuannya adalah mengambil screenshot header biru yang berisi teks Tools. Perhatikan bahwa node ini sudah dipilih di DOM Tree pada panel Elements
Buka Menu Perintah.
Mulai ketik node lalu pilih Capture node screenshot. DevTools akan mendownload screenshot node yang dipilih.

Gambar 4. Hasil perintah Capture node screenshot

Penandaan Petak CSS

Untuk melihat Petak CSS yang memengaruhi suatu elemen, arahkan kursor ke elemen di DOM Tree pada panel Elements. Batas putus-putus muncul di sekitar setiap item petak. Metode ini hanya berfungsi jika item yang dipilih, atau induk dari item yang dipilih, telah menerapkan display:grid.

Menyoroti Petak CSS

Gambar 5. Menyoroti Petak CSS

Tonton video di bawah ini untuk mempelajari dasar-dasar Petak CSS dalam waktu kurang dari 2 menit.

API baru untuk membuat kueri objek heap

Panggil queryObjects(Constructor) dari Konsol untuk menampilkan array objek yang dibuat dengan konstruktor yang ditentukan. Contoh:

queryObjects(Promise). Menampilkan semua Promise.
queryObjects(HTMLElement). Menampilkan semua elemen HTML.
queryObjects(foo), dengan foo sebagai nama fungsi. Menampilkan semua objek yang dibuat instance-nya melalui new foo().

Cakupan queryObjects() adalah konteks eksekusi yang saat ini dipilih di Konsol. Lihat Memilih konteks eksekusi.

Filter Konsol baru

Konsol kini mendukung filter negatif dan URL.

Filter negatif

Ketik -<text> di kotak Filter untuk memfilter pesan Konsol yang menyertakan <text>.

Contoh 3 pesan yang akan difilter

Gambar 6. Pernyataan pertama mencatat one, two, three, dan four ke Konsol. two disembunyikan karena -two dimasukkan dalam kotak Filter

DevTools memfilter pesan jika <text> ditemukan:

Di teks pesan.
Dalam nama file tempat pesan berasal.
Di teks stack trace.

Filter negatif juga berfungsi dengan ekspresi reguler seperti -/[4-5]*ms/.

Filter URL

Ketik url:<text> di kotak Filter untuk hanya menampilkan pesan yang berasal dari skrip yang URL-nya menyertakan <text>.

Filter menggunakan pencocokan fuzzy. Jika <text> muncul di mana saja dalam URL, DevTools akan menampilkan pesan.

Contoh pemfilteran URL

Gambar 7. Menggunakan pemfilteran URL untuk hanya menampilkan pesan yang berasal dari skrip yang URL-nya menyertakan hymn. Dengan mengarahkan kursor ke nama skrip, Anda dapat melihat bahwa nama {i>host<i} menyertakan teks ini

Impor HAR di panel Jaringan

Tarik lalu lepas file HAR ke panel Jaringan untuk mengimpornya.

Mengimpor file HAR

Gambar 8. Mengimpor file HAR

Resource cache yang dapat dipratinjau di panel Application

Klik baris dalam tabel Cache Storage untuk melihat pratinjau resource tersebut di bawah tabel.

Melihat pratinjau resource cache

Gambar 9. Melihat pratinjau resource cache

Proses debug cache yang lebih responsif

Di Chrome 61 dan yang lebih lama, proses debug cache yang dibuat dengan Cache API sangatlah sulit. Misalnya, ketika halaman membuat cache baru, Anda harus me-refresh halaman atau DevTools secara manual agar dapat melihat cache baru.

Di Chrome 62, tab Cache Storage kini diupdate secara real time setiap kali Anda membuat, memperbarui, atau menghapus cache atau resource. Tonton video di bawah untuk contohnya.

Lihat Demo Penyimpanan Cache untuk mencobanya sendiri.

Cakupan kode tingkat blok

Di Chrome 61 dan yang lebih lama, tab Cakupan menandai semua kode dalam fungsi sebagaimana digunakan, selama fungsi tersebut dipanggil.

Contoh tab Cakupan di Chrome 61

Gambar 10. Contoh tab Cakupan di Chrome 61. Baris 4 ditandai sebagai digunakan, meskipun tidak pernah dieksekusi

Mulai Chrome 62, tab Cakupan kini memberi tahu Anda kode dalam fungsi yang dipanggil.

Contoh tab Cakupan di Chrome 62

Gambar 11. Contoh tab Cakupan di Chrome 62. Baris 4 ditandai sebagai tidak digunakan

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.