Yang Baru di DevTools (Chrome 75)

Kayce Basques

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

Versi video halaman ini

Nilai preset yang bermakna saat menyelesaikan otomatis fungsi CSS

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 mengisi properti dengan nilai yang bermakna sehingga Anda dapat melihat pratinjau jenis perubahan yang akan dilakukan nilai pada node.

Gambar 1. Perilaku pelengkapan otomatis lama. DevTools melakukan pelengkapan otomatis ke filter: blur dan tidak ada perubahan yang terlihat di area pandang.

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

Masalah Chromium yang relevan: #931145

Menghapus data situs dari Menu Perintah

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

Gambar 3. Perintah Hapus Data Situs.

Menghapus data situs telah tersedia dari Aplikasi > Hapus Penyimpanan selama beberapa waktu. Fitur baru di Chrome 75 adalah kemampuan untuk menjalankan perintah dari Menu Perintah.

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

Gambar 4. Aplikasi > Hapus Penyimpanan.

Masalah Chromium yang relevan: #942503

Melihat semua database IndexedDB

Sebelumnya, Application > IndexedDB hanya mengizinkan Anda memeriksa database IndexedDB dari asal utama. Misalnya, jika Anda memiliki <iframe> di halaman, dan <iframe> tersebut menggunakan IndexedDB, Anda tidak akan dapat melihat database-nya. Mulai Chrome 75, DevTools menampilkan database IndexedDB untuk semua origin.

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

Gambar 6. Perilaku baru. Database demo terlihat.

Masalah Chromium yang relevan: #943770

Melihat ukuran resource yang tidak terkompresi saat mengarahkan kursor

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

Gambar 7. Mengarahkan kursor ke kolom Ukuran 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);

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

Gambar 8. Perilaku lama. Hanya ada 1 entri di panel Titik Henti Sementara.

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

Masalah Chromium yang relevan: #927961

Jumlah resource IndexedDB dan Cache

Panel IndexedDB dan Cache kini menunjukkan jumlah total resource dalam database atau cache.

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.

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

Sekarang Anda dapat menonaktifkan tooltip mendetail ini dari Setelan > Preferensi > Elemen > Tampilkan Tooltip Inspeksi Mendetail.

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

Masalah Chromium yang relevan: #948417

Setelan untuk mengalihkan indentasi tab di editor panel Sources

Pengujian aksesibilitas mengungkapkan bahwa ada perangkap tab di Editor. Setelah pengguna keyboard menggunakan tombol tab ke Editor, mereka tidak dapat keluar darinya karena tombol Tab digunakan untuk indentasi. Untuk mengganti perilaku default dan menggunakan Tab untuk memindahkan fokus, aktifkan Setelan > Preferensi > Sumber > Aktifkan Tab Memindahkan Fokus.

Baru-baru ini, ada banyak pekerjaan yang dilakukan untuk membuat UI DevTools itu sendiri lebih mudah dinavigasi dengan keyboard. Lihat Menavigasi Chrome DevTools dengan Teknologi Pendukung dari Rob untuk mempelajari lebih lanjut.

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.

• Kirim masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet ke @ChromeDevTools.
• Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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