Yang Baru di DevTools (Chrome 67)

Kayce Basques

Fitur baru dan perubahan besar yang akan hadir pada DevTools di Chrome 67 meliputi:

Versi video catatan rilis:

Buka panel Network, lalu tekan Command+F (Mac) atau Control+F (Windows, Linux, ChromeOS) untuk membuka panel Network Search yang baru. DevTools menelusuri header dan isi semua permintaan jaringan untuk kueri yang Anda berikan.

Mencari teks 'cache-control' dengan panel Network Search yang baru.

Gambar 1. Menelusuri teks cache-control dengan panel Network Search yang baru

Klik Match Case Cocokkan Huruf Besar Kecil untuk membuat kueri peka huruf besar/kecil. Klik Gunakan Ekspresi Reguler Gunakan Regular Expression untuk menampilkan hasil yang cocok dengan pola yang Anda berikan. Anda tidak perlu menggabungkan RegEx dengan garis miring ke depan.

Kueri ekspresi reguler di panel Penelusuran Jaringan.

Gambar 2. Kueri ekspresi reguler di panel Penelusuran Jaringan.

UI panel Global Search sekarang cocok dengan UI panel Network Search yang baru. Sekarang, program ini juga mencetak hasil yang cukup untuk membantu kemampuan pemindaian.

UI lama dan baru.

Gambar 3. UI lama di sebelah kiri, dan UI baru di sebelah kanan

Tekan Command+Option+F (Mac) atau Control+Shift+F (Windows, Linux, ChromeOS) untuk membuka Penelusuran Global. Anda juga dapat membukanya melalui Command Menu.

Pratinjau nilai variabel CSS di panel Styles

Saat nilai properti warna CSS, seperti background-color atau color, ditetapkan ke variabel CSS, DevTools sekarang menampilkan pratinjau warna tersebut.

Contoh nilai warna variabel CSS.

Gambar 4. Pada UI lama di sebelah kiri, tidak ada pratinjau warna di samping color: var(--main-color), sedangkan di UI baru di sebelah kanan, ada

Salin sebagai pengambilan

Klik kanan permintaan jaringan, lalu pilih Copy > Copy As Fetch untuk menyalin kode yang setara dengan fetch() untuk permintaan tersebut ke papan klip Anda.

Menyalin kode yang setara fetch() untuk permintaan.

Gambar 5. Menyalin kode yang setara dengan fetch() untuk permintaan

DevTools menghasilkan kode seperti berikut:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Pembaruan panel audit

Audit baru

Panel Audits memiliki 2 audit baru, termasuk:

Opsi konfigurasi baru

Kini Anda dapat mengonfigurasi panel Audits untuk:

  • Pertahankan setelan agen pengguna dan area pandang desktop. Dengan kata lain, Anda dapat mencegah panel Audits menyimulasikan perangkat seluler.
  • Menonaktifkan throttling jaringan dan CPU.
  • Pertahankan penyimpanan, seperti LocalStorage dan IndexedDB, di seluruh audit.

Opsi konfigurasi audit baru.

Gambar 6. Opsi konfigurasi audit baru

Lihat jejak

Setelah mengaudit halaman, klik Lihat Rekaman Aktivitas untuk melihat data performa pemuatan yang menjadi dasar audit Anda di panel Performa.

Tombol View Trace.

Gambar 7. Tombol Lihat Pelacakan

Menghentikan loop tanpa henti

Jika Anda menggunakan loop for, loop do...while, atau sering melakukan rekursi, Anda mungkin tidak sengaja menjalankan loop tanpa batas saat mengembangkan situs. Untuk menghentikan loop tanpa henti, kini Anda dapat:

  1. Buka panel Sumber.
  2. Klik Jeda Jeda. Tombol tersebut akan berubah menjadi Resume Script Execution Lanjutkan.
  3. Tahan Lanjutkan Eksekusi Skrip Lanjutkan, lalu pilih Hentikan Panggilan JavaScript Saat Ini Hentikan.

Dalam video di atas, jam diperbarui melalui timer setInterval(). Mengklik Start Infinite Loop akan menjalankan loop do...while yang tidak pernah berhenti. Interval dilanjutkan karena tidak berjalan saat Stop Current JavaScript Call Hentikan dipilih.

Waktu Pengguna di tab Performa

Saat melihat pencatatan Performa, klik bagian Waktu Pengguna untuk melihat pengukuran Waktu Pengguna di tab Ringkasan, Bottom-Up, Hierarki Panggilan, dan Log Peristiwa.

Melihat ukuran Waktu Pengguna di tab Bottom-Up.

Gambar 8. Melihat ukuran Waktu Pengguna di tab Bottom-Up. Panel biru di sebelah kiri bagian Waktu Pengguna menunjukkan bahwa waktu tersebut telah dipilih.

Secara umum, kini Anda dapat memilih salah satu bagian (Main Thread, User Timing, GPU, ScriptStreamer, dan sebagainya) dan melihat aktivitas bagian tersebut di tab.

Memilih instance VM JavaScript di panel Memori

Panel Memory kini dengan jelas mencantumkan semua instance VM JavaScript yang terkait dengan suatu halaman, bukan menyembunyikannya di belakang menu dropdown Target seperti sebelumnya.

Screenshot panel Memori sebelum dan sesudah.

Gambar 9. Di UI lama di sebelah kiri, instance VM JavaScript disembunyikan di belakang menu dropdown Target, sedangkan di UI baru di sebelah kanan, instance VM ditampilkan dalam tabel Select JavaScript VM Instance

Di samping instance developers.google.com ada 2 nilai: 8.7 MB dan 13.3 MB. Nilai kiri mewakili memori yang dialokasikan karena JavaScript. Nilai yang tepat mewakili semua memori OS yang dialokasikan karena instance VM tersebut. Nilai kanan mencakup nilai kiri. Di Pengelola Tugas Chrome, nilai kiri sesuai dengan JavaScript Memory dan nilai yang tepat sesuai dengan Memory Footprint.

Nama tab jaringan diganti menjadi tab Halaman

Di panel Sumber, tab Jaringan sekarang disebut tab Halaman.

Dua jendela DevTools berdampingan, yang menunjukkan perubahan nama.

Gambar 10. Pada UI lama di sebelah kiri, tab yang menampilkan resource halaman disebut Jaringan, sedangkan di UI baru di sebelah kanan, disebut Page

Update tema gelap

Chrome 67 dirilis dengan sejumlah perubahan kecil pada skema warna tema gelap. Misalnya, ikon titik henti sementara dan baris eksekusi saat ini sekarang berwarna hijau.

Screenshot ikon titik henti sementara baru dan baris skema warna eksekusi saat ini.

Gambar 11. Screenshot ikon titik henti sementara baru dan baris skema warna eksekusi saat ini

Transparansi sertifikat di panel Keamanan

Panel Keamanan kini melaporkan informasi transparansi sertifikat.

Informasi transparansi sertifikat di panel Keamanan.

Gambar 12. Informasi transparansi sertifikasi di panel Keamanan

Isolasi Situs di panel Performa

Jika Anda mengaktifkan Isolasi Situs, panel Performa kini menyediakan flame chart untuk setiap proses sehingga Anda dapat melihat total pekerjaan yang disebabkan oleh setiap proses.

Flame chart per proses dalam rekaman Performa.

Gamabar 13. Flame chart per proses dalam rekaman Performa

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