Yang Baru di DevTools (Chrome 75)

Halo! Berikut ini adalah hal-hal yang baru di Chrome DevTools di Chrome 75.

Versi video halaman ini

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

Perilaku pelengkapan otomatis lama.

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

Perilaku pelengkapan otomatis baru.

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

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 jalankan perintah Clear Site Data untuk menghapus semua data yang terkait dengan halaman tersebut, termasuk: Service worker, localStorage, sessionStorage, IndexedDB, Web SQL, Web SQL,

Perintah Hapus Data Situs.

Gambar 3. Perintah Hapus Data Situs.

Penghapusan data situs telah tersedia dari Aplikasi > Hapus Penyimpanan untuk sementara waktu. Fitur baru di Chrome 75 adalah dapat menjalankan perintah dari Menu Command.

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

Tab 'Application' dengan 'Clear Storage' dipilih.

Gambar 4. Aplikasi > Hapus Penyimpanan.

Masalah Chromium yang relevan: #942503

Lihat semua database IndexedDB

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

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

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

Perilaku baru. Database demo dapat dilihat.

Gambar 6. Perilaku baru. Database demo dapat dilihat.

Masalah Chromium yang relevan: #943770

Melihat ukuran resource yang tidak dikompresi saat mengarahkan kursor

Misalkan Anda memeriksa aktivitas jaringan. Situs Anda menggunakan kompresi teks untuk mengurangi ukuran transfer resource. Anda ingin melihat seberapa besar 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 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 pada 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 jeda 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, pada dasarnya Anda membuat 3 titik henti sementara. Sebelumnya, panel Breakpoints tidak memberi Anda kemampuan untuk mengelola 3 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 IndexedDB dan Cache

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

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 Inspeksi.

Tooltip mendetail.

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

Kini Anda dapat menonaktifkan tooltip mendetail ini dari Settings > Preferences > Elements > Show Detail Inspect Tooltip.

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 Sumber

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

Baru-baru ini ada banyak pekerjaan yang membuat UI DevTools lebih mudah dijelajahi dengan keyboard. Lihat artikel Menavigasi Chrome DevTools Dengan Assistive Technology dari 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59