Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 67)

Kayce Basques

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

Telusuri di semua header jaringan
Pratinjau nilai variabel CSS di panel Gaya
Salin sebagai ambil
Audit baru, opsi konfigurasi desktop, dan melihat trace
Menghentikan loop tanpa batas
Waktu Pengguna di tab Performa
Instance VM JavaScript tercantum dengan jelas di panel Memory
Tab Jaringan di panel Sumber telah diganti namanya menjadi tab Halaman
Update tema gelap
Informasi transparansi sertifikat di panel Keamanan
Fitur isolasi situs di panel Performa

Catatan: Periksa versi Chrome yang Anda jalankan di chrome://version. Jika Anda menjalankan versi sebelumnya, fitur ini tidak akan ada. Jika Anda menjalankan versi yang lebih baru, fitur ini mungkin telah berubah. Chrome mengupdate otomatis ke versi utama baru sekitar setiap 6 minggu.

Telusuri di semua header dan respons jaringan

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

Telusuri teks 'cache-control' di panel {i>Network Search<i} yang baru.

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

Klik Cocokkan Huruf Besar/Kecil untuk membuat kueri peka huruf besar/kecil. Klik Use Regular Expression untuk menampilkan hasil yang cocok dengan pola yang Anda berikan. Anda tidak perlu menggabungkan RegEx dengan garis miring.

Kueri ekspresi reguler di panel Penelusuran Jaringan.

Gambar 2. Kueri ekspresi reguler di panel Penelusuran Jaringan.

Update UI panel penelusuran

UI panel Global Search kini sesuai dengan UI panel Network Search yang baru. Sekarang program tersebut juga melakukan Presisi Cetak untuk membantu 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 Global Search. Anda juga dapat membukanya melalui Menu Perintah.

Pratinjau nilai variabel CSS di panel Gaya

Jika nilai properti warna CSS, seperti background-color atau color, ditetapkan ke variabel CSS, DevTools kini 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 ambil

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 dengan pengambilan() 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:

Pramuat permintaan kunci. Permintaan pramuat dapat mempercepat waktu pemuatan halaman dengan memberikan petunjuk ke browser untuk mendownload resource yang penting untuk Jalur Rendering Penting Anda sesegera mungkin.
Hindari teks yang tidak terlihat saat font web dimuat. Memastikan teks terlihat saat font web dimuat akan membuat halaman lebih berguna bagi pengguna dengan lebih cepat.

Opsi konfigurasi baru

Anda sekarang dapat mengonfigurasi panel Audits untuk:

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

Opsi konfigurasi audit baru.

Gambar 6. Opsi konfigurasi audit baru

Lihat jejak

Setelah mengaudit halaman, klik View Trace untuk melihat data performa pemuatan yang menjadi dasar audit Anda di panel Performance.

Gambar 7. Tombol View Trace

Menghentikan loop tanpa batas

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

Buka panel Sources.
Klik Pause . Tombol ini akan berubah menjadi Resume Script Execution .
Tahan Lanjutkan Eksekusi Skrip , lalu pilih Stop Current JavaScript Call .

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 Rekaman 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 pengukuran Waktu Pengguna di tab Bottom-Up. Panel biru di sebelah kiri bagian User Timing menunjukkan bahwa opsi ini dipilih.

Secara umum, kini Anda dapat memilih bagian mana pun (Thread Utama, Waktu Pengguna, GPU, ScriptStreamer, dan sebagainya) dan melihat aktivitas bagian tersebut di tab.

Pilih instance JavaScript VM di panel Memori

Sekarang panel Memory mencantumkan semua instance VM JavaScript yang terkait dengan halaman dengan jelas, bukan menyembunyikannya di balik menu dropdown Target seperti sebelumnya.

Screenshot sebelum dan sesudah panel Memori.

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

Terdapat 2 nilai di samping instance developers.google.com: 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 menyertakan nilai yang kiri. Pada Pengelola Tugas Chrome, nilai kiri sesuai dengan JavaScript Memory dan nilai kanan sesuai dengan Memory Footprint.

Nama tab jaringan diganti menjadi tab Halaman

Di panel Sumber, tab Jaringan sekarang disebut tab Halaman.

Dua jendela DevTools berdampingan, 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, tab ini disebut Halaman

Update tema gelap

Chrome 67 dilengkapi dengan sejumlah perubahan kecil pada skema warna tema gelap. Misalnya, ikon titik henti sementara dan baris eksekusi saat ini kini 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 telah 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 Performance.

Gamabar 13. Flame chart per proses dalam rekaman Performance

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.