Yang Baru di DevTools (Chrome 67)

Kayce Basques

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

• Menelusuri semua header jaringan
• Pratinjau nilai variabel CSS di panel Styles
• Salin sebagai ambil
• Audit baru, opsi konfigurasi desktop, dan melihat rekaman aktivitas
• 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
• Pembaruan tema gelap
• Informasi transparansi sertifikat di panel Keamanan
• Fitur isolasi situs di panel Performa

Versi video catatan rilis:

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

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

Klik Cocokkan Huruf untuk membuat kueri Anda 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.

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, hasil juga dicetak dengan rapi 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 Search. Anda juga dapat membukanya melalui Menu Perintah.

Pratinjau nilai variabel CSS di panel Styles

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

Gambar 4. Di 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 > Salin Sebagai Pengambilan untuk menyalin kode yang setara dengan fetch() untuk permintaan tersebut ke papan klip Anda.

Gambar 5. Menyalin kode setara 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 Audit memiliki 2 audit baru, termasuk:

• Pramuat permintaan kunci. Permintaan pramuat dapat mempercepat waktu pemuatan halaman dengan memberikan petunjuk kepada 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 membuat halaman lebih berguna bagi pengguna dengan lebih cepat.

Opsi konfigurasi baru

Anda kini dapat mengonfigurasi panel Audit untuk:

• Pertahankan area tampilan desktop dan setelan 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.

Gambar 6. Opsi konfigurasi audit baru

Lihat jejak

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

Gambar 7. Tombol View Trace

Menghentikan loop tanpa batas

Jika sering menggunakan loop for, loop do...while, atau rekursi, Anda mungkin telah menjalankan loop tak terbatas secara tidak sengaja saat mengembangkan situs. Untuk menghentikan loop tanpa akhir, Anda kini dapat:

1. Buka panel Sources.
2. Klik Pause . Tombol ini akan berubah menjadi Resume Script Execution .
3. 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 dipilih.

Waktu Pengguna di tab Performa

Saat melihat rekaman Performa, klik bagian User Timing untuk melihat pengukuran User Timing di tab Ringkasan, Bottom-Up, Call Tree, dan Event Log.

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

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

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

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 mencakup nilai kiri. Pada Pengelola Tugas Chrome, nilai kiri sesuai dengan JavaScript Memory dan nilai kanan sesuai dengan Memory Footprint.

Tab Jaringan diganti namanya menjadi tab Halaman

Di panel Sumber, tab Jaringan sekarang disebut tab Halaman.

Gambar 10. Di UI lama di sebelah kiri, tab yang menampilkan resource halaman disebut Jaringan, sedangkan di UI baru di 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 kini berwarna hijau.

Gambar 11. Screenshot ikon titik henti sementara baru dan skema warna baris 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 Site Isolation, panel Performance kini menyediakan diagram api 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

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

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

Yang baru di DevTools

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