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 pengambilan
• Audit baru, opsi konfigurasi desktop, dan melihat rekaman aktivitas
• Menghentikan pengulangan terus-menerus
• Waktu Pengguna di tab Performa
• Instance VM JavaScript tercantum dengan jelas di panel Memory
• Tab Network di panel Sources telah diganti namanya menjadi tab Page
• Pembaruan tema gelap
• Informasi transparansi sertifikat di panel Keamanan
• Fitur isolasi situs di panel Performa

Versi video catatan rilis:

Menelusuri semua header dan respons jaringan

Buka panel Jaringan, lalu tekan Command+F (Mac) atau Control+F (Windows, Linux, ChromeOS) untuk membuka panel Penelusuran Jaringan yang 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 Match Case untuk membuat kueri Anda peka huruf besar/kecil. Klik Gunakan Ekspresi Reguler untuk menampilkan hasil yang cocok dengan pola yang Anda berikan. Anda tidak perlu mengapit RegEx dengan garis miring.

Gambar 2. Kueri ekspresi reguler di panel Network Search.

Pembaruan UI panel penelusuran

UI panel Global Search kini cocok dengan UI panel Network Search baru. Sekarang, alat ini juga menampilkan hasil yang 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 fetch

Klik kanan permintaan jaringan, lalu pilih Copy > 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 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 bagi 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 cepat bermanfaat bagi pengguna.

Opsi konfigurasi baru

Sekarang Anda dapat mengonfigurasi panel Audit untuk:

• Pertahankan setelan area pandang dan agen pengguna desktop. Dengan kata lain, Anda dapat mencegah panel Audits 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 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 pernah menjalankan loop tanpa akhir secara tidak sengaja saat mengembangkan situs. Untuk menghentikan loop tanpa henti, Anda kini dapat:

1. Buka panel Sources.
2. Klik Jeda . Tombol akan berubah menjadi Resume Script Execution .
3. Tahan Resume Script Execution , 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 Hentikan Panggilan JavaScript Saat Ini dipilih.

Waktu Pengguna di tab Performa

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

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

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

Memilih instance VM JavaScript di panel Memori

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

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

Di samping instance developers.google.com, ada 2 nilai: 8.7 MB dan 13.3 MB. Nilai kiri merepresentasikan alokasi memori karena JavaScript. Nilai yang tepat mewakili semua memori OS yang dialokasikan karena instance VM tersebut. Nilai di sebelah kanan mencakup nilai di sebelah kiri. Di 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 kini disebut tab Halaman.

Gambar 10. Di UI lama di sebelah kiri, tab yang menampilkan resource halaman disebut Network, sedangkan di UI baru di sebelah kanan, tab tersebut disebut Page

Pembaruan tema gelap

Chrome 67 dilengkapi dengan sejumlah perubahan kecil pada skema warna tema gelap. Misalnya, ikon titik henti sementara dan baris eksekusi saat ini sekarang 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 mengaktifkan Isolasi Situs, panel Performance 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 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, memungkinkan Anda menguji API platform web mutakhir, dan membantu Anda menemukan masalah di situs sebelum pengguna Anda menemukannya.

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 di @ChromeDevTools.
• Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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