Yang Baru di DevTools (Chrome 75)

Kayce Basques

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

Versi video halaman ini

Nilai preset yang bermakna saat melengkapi otomatis fungsi CSS

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

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

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

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 Hapus Data Situs untuk menghapus semua data yang terkait dengan halaman, termasuk: Service worker, localStorage, sessionStorage, IndexedDB, Web SQL, Cookie, Cache, dan Cache Aplikasi.

Gambar 3. Perintah Hapus Data Situs.

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

Jika Anda 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, Aplikasi > IndexedDB hanya mengizinkan Anda memeriksa database IndexedDB dari origin 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 situs asal.

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 dikompresi saat mengarahkan kursor

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

Gambar 7. Arahkan 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 jeda 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 secara terpisah. Mulai Chrome 75, setiap titik henti sementara inline memiliki entri tersendiri di panel Titik Henti Sementara.

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

Gambar 9. Perilaku baru. Ada 3 entri di panel Titik henti sementara.

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.

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

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

Masalah Chromium yang relevan: #948417

Setelan untuk mengganti indentasi tab di editor panel Sumber

Pengujian aksesibilitas mengungkapkan bahwa ada perangkap tab di Editor. Setelah pengguna keyboard membuka tab Editor, mereka tidak dapat keluar dari tab tersebut 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 upaya untuk membuat UI DevTools itu sendiri lebih mudah dinavigasi menggunakan keyboard. Lihat Menavigasi Chrome DevTools dengan Teknologi Pendukung oleh 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, 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.

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

Yang baru di DevTools

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