Yang Baru di DevTools (Chrome 67)

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

Versi video catatan rilis:

Telusuri di semua header dan respons jaringan

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

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

Klik Cocokkan Kasus untuk membuat kueri Anda peka huruf besar/kecil. Klik Gunakan Ekspresi Reguler untuk menampilkan hasil yang cocok pola yang Anda berikan. Anda tidak perlu menggabungkan RegEx dengan garis miring.

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 juga hasil {i>cant<i} untuk membantu pemindaian.

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 Lakukan penelusuran. Anda juga dapat membukanya melalui Menu Perintah.

Pratinjau nilai variabel CSS di panel Gaya

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

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 Salin > Copy As Fetch untuk menyalin Kode yang setara dengan fetch() untuk permintaan tersebut ke papan klip Anda.

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 muat halaman dengan memberikan petunjuk kepada browser untuk mendownload aset yang penting untuk Jalur Rendering Penting Anda segera sebaik mungkin.
• Hindari teks yang tidak terlihat saat font web dimuat. Memastikan bahwa teks terlihat saat pemuatan {i>webfont<i} membuat laman 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 bagian Audit dari simulasi perangkat seluler.
• Menonaktifkan throttling jaringan dan CPU.
• Mempertahankan penyimpanan, seperti LocalStorage dan IndexedDB, di seluruh audit.

Gambar 6. Opsi konfigurasi audit baru

Lihat jejak

Setelah mengaudit halaman, klik View Trace untuk melihat data performa pemuatan yang diperiksa berdasarkan di panel Performance.

Gambar 7. Tombol View Trace

Menghentikan loop tanpa batas

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

1. Buka panel Sources.
2. Klik Pause . Tombol akan berubah menjadi Lanjutkan Eksekusi Skrip .
3. Tahan Lanjutkan Eksekusi Skrip lalu pilih Berhenti Panggilan JavaScript Saat Ini .

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

Waktu Pengguna di tab Performa

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

Gambar 8. Melihat pengukuran Waktu Pengguna di tab Bottom-Up. Bilah biru di sebelah kiri User Timing menunjukkan bahwa waktu tersebut dipilih.

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

Pilih instance VM JavaScript di panel Memori

Panel Memori kini mencantumkan semua instance VM JavaScript yang terkait dengan halaman, daripada menyembunyikannya di balik menu dropdown Target, seperti sebelumnya.

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

Terdapat 2 nilai di samping instance developers.google.com: 8.7 MB dan 13.3 MB. 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 sebelah kanan sesuai dengan Memory Footprint.

Nama tab jaringan diganti menjadi tab Halaman

Di panel Sumber, tab Jaringan sekarang disebut tab Halaman.

Gambar 10. Pada UI lama di sebelah kiri, tab yang menampilkan sumber daya halaman disebut Jaringan, sedangkan di UI baru sebelah kanan, 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 berwarna hijau.

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.

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.

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

Yang baru di DevTools

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