Yang Baru di DevTools (Chrome 75)

Kayce Basques

Halo! Berikut yang baru di Chrome DevTools pada Chrome 75.

Versi video halaman ini

Nilai preset yang penting saat melengkapi fungsi CSS secara otomatis

Beberapa properti CSS, seperti filter, menggunakan fungsi untuk nilai. Misalnya, filter: blur(1px) menambahkan blur 1 piksel ke node. Saat melengkapi properti secara otomatis seperti filter, DevTools kini akan diisi properti dengan nilai yang bermakna sehingga Anda dapat melihat pratinjau jenis perubahan yang akan dimiliki pada node.

Perilaku pelengkapan otomatis lama.

Gambar 1. Perilaku pelengkapan otomatis lama. DevTools melengkapi otomatis ke filter: blur dan tidak akan terlihat di area pandang.

Perilaku pelengkapan otomatis baru.

Gambar 2. Perilaku pelengkapan otomatis baru. DevTools otomatis melengkapi filter: blur(1px) dan perubahan akan terlihat di area pandang.

Masalah Chromium yang relevan: #931145

Hapus data situs dari Menu Perintah

Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Command, lalu menjalankan Perintah Hapus Data Situs untuk menghapus semua data yang terkait dengan halaman, termasuk: Service worker, localStorage, sessionStorage, IndexedDB, Web SQL, Cookie, Cache, dan Cache Aplikasi.

Perintah Clear Site Data.

Gambar 3. Perintah Hapus Data Situs.

Penghapusan data situs telah tersedia dari Aplikasi > Hapus Penyimpanan untuk sementara waktu. Yang baru di Chrome 75 adalah perintah yang dapat dijalankan dari Menu Perintah.

Jika tidak ingin menghapus semua data situs, Anda dapat mengontrol data yang akan dihapus Aplikasi > Hapus Penyimpanan.

'Aplikasi' tab dengan 'Clear Storage' dipilih.

Gambar 4. Aplikasi > Hapus Penyimpanan.

Masalah Chromium yang relevan: #942503

Lihat semua database IndexedDB

Sebelumnya Aplikasi > IndexedDB hanya memungkinkan Anda untuk memeriksa database IndexedDB dari origin utama. Misalnya, jika Anda memiliki <iframe> di halaman Anda, dan <iframe> tersebut menggunakan tensorflow, Anda tidak akan dapat melihat database-nya. Mulai Chrome 75, DevTools menampilkan IndexedDB {i>database<i} untuk semua origin.

Perilaku lama. Halaman ini menyematkan demo yang menggunakan IndexedDB, tetapi tidak ada database yang terlihat.

Gambar 5. Perilaku lama. Halaman ini menyematkan demo yang menggunakan IndexedDB, tetapi tidak ada database tetap terlihat.

Perilaku baru. Database demo akan terlihat.

Gambar 6. Perilaku baru. Database demo akan terlihat.

Masalah Chromium yang relevan: #943770

Melihat ukuran resource yang tidak dikompresi saat kursor diarahkan

Misalkan Anda sedang memeriksa aktivitas jaringan. Situs Anda menggunakan kompresi teks untuk mengurangi ukuran transfer resource. Anda ingin melihat seberapa besar ukuran resource halaman setelah browser membuka kompresinya. Sebelumnya, informasi ini hanya tersedia saat menggunakan permintaan besar baris. Sekarang Anda dapat mengakses informasi ini dengan mengarahkan kursor ke kolom Size.

Mengarahkan kursor ke kolom Size untuk melihat ukuran resource yang tidak dikompresi.

Gambar 7. Mengarahkan kursor ke kolom Size untuk melihat ukuran resource yang tidak dikompresi.

Masalah Chromium yang relevan: #805429

Titik henti sementara inline di panel titik henti sementara

Misalkan Anda menambahkan titik henti sementara baris kode ke baris kode berikut:

document.querySelector('#dante').addEventListener('click', logWarning);

Untuk sementara waktu, DevTools telah memungkinkan Anda menentukan kapan tepatnya harus berhenti sementara pada titik henti sementara seperti ini: di awal baris, sebelum document.querySelector('#dante') dipanggil, atau sebelum addEventListener('click', logWarning) dipanggil. Jika Anda mengaktifkan ketiganya, pada dasarnya Anda menciptakan 3 titik henti sementara. Sebelumnya, panel Breakpoints tidak memberi Anda kemampuan untuk mengelola ketiga titik henti sementara ini satu per satu. Mulai Chrome 75, setiap titik henti sementara inline mendapatkan entrinya sendiri di Panel Breakpoints.

Perilaku lama. Hanya ada satu entri di panel Breakpoints.

Gambar 8. Perilaku lama. Hanya ada 1 entri di panel Breakpoints.

Perilaku baru. Ada 3 entri di panel Breakpoints.

Gambar 9. Perilaku baru. Ada 3 entri di panel Breakpoints.

Masalah Chromium yang relevan: #927961

Jumlah resource Responden dan Cache

Panel IndexedDB dan IndexedDB sekarang menunjukkan jumlah total resource dalam database atau di cache oleh pengguna.

Total entri dalam database IndexedDB.

Gambar 10. Total entri dalam database IndexedDB.

Masalah Chromium yang relevan: #941197, #930773, #930865

Setelan untuk menonaktifkan tooltip pemeriksaan mendetail

Chrome 73 memperkenalkan tooltip mendetail saat dalam mode Periksa.

Tooltip mendetail.

Gambar 11. Tooltip yang mendetail menunjukkan warna, font, margin, dan kontras.

Kini Anda dapat menonaktifkan tooltip mendetail ini dari Setelan > Preferensi > Elemen > Tampilkan Tooltip Pemeriksaan Mendetail.

Tooltip minimal.

Gambar 12. Tooltip minimal yang hanya menampilkan lebar dan tinggi.

Masalah Chromium yang relevan: #948417

Setelan untuk mengganti indentasi tab di editor panel Sources

Pengujian aksesibilitas menunjukkan bahwa ada perangkap tab di Editor. Setelah keyboard pengguna tab ke Editor, dia tidak dapat keluar dari tab itu karena tombol Tab yang digunakan untuk indentasi. Untuk mengganti perilaku default dan menggunakan Tab untuk memindahkan fokus, aktifkan Setelan > Preferensi > Sumber > Aktifkan Fokus Pergerakan Tab.

Ada banyak pekerjaan baru-baru ini seputar membuat UI DevTools itu sendiri lebih mudah digunakan dengan keyboard. Lihat Menavigasi Chrome DevTools dengan Teknologi Pendukung Rob untuk mempelajari lebih lanjut.

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.
  • Tulis 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.