Yang baru di DevTools (Chrome 58)

Kayce Basque
Kayce Basques

Selamat datang di bagian pertama dari catatan rilis DevTools! Mulai saat ini, saat pertama kali Anda membuka Chrome versi baru, DevTools akan membuka panel Yang Baru dengan link ke catatan rilis untuk versi tersebut.

Sorotan

  • Nama panel Linimasa telah diganti menjadi panel Performa.
  • Panel Profil telah diganti namanya menjadi panel Memori.
  • Nilai cookie kini dapat diedit.
  • DevTools sekarang otomatis dijeda sebelum error kehabisan memori.

Fitur baru

Cookie yang dapat diedit

Klik dua kali sel di tab Cookies untuk mengedit nilai tersebut.

Mengedit cookie.
Gambar 1. Mengedit cookie

Terima kasih kepada kdzwinel atas kontribusinya.

Variabel CSS yang dapat diperiksa dan diedit di panel Styles

Anda sekarang dapat memeriksa dan mengedit variabel CSS di panel Styles. Lihat Demo Variabel CSS untuk mencobanya sendiri.

Titik henti sementara kehabisan memori

Jika aplikasi mengalokasikan banyak memori dalam waktu singkat, DevTools sekarang akan otomatis dijeda dan meningkatkan batas heap. Dengan begitu, Anda dapat memeriksa heap, menjalankan perintah di Konsol untuk mengosongkan memori, dan melanjutkan proses debug masalah. Lihat Satu Langkah Kecil untuk Chrome, Satu Heap Giant untuk V8 untuk mengetahui informasi selengkapnya.

Dijeda pada titik henti sementara kehabisan memori
Gambar 2. Dijeda pada titik henti sementara kehabisan memori

Titik henti sementara pada pembuatan kanvas

Anda sekarang dapat membuat titik henti sementara pemroses peristiwa yang dipicu setiap kali konteks kanvas baru dibuat.

Titik henti sementara pembuatan kanvas melalui kotak centang konteks
    Create kanvas di panel Event Listener Breakpoints
Gambar 3. Titik henti sementara pembuatan Canvas melalui kotak centang Create Canvas context di panel Event Listener Breakpoints

Statistik waktu mulai di tab Waktu

Di bagian atas tab Waktu, Anda kini dapat melihat kapan permintaan dimasukkan ke dalam antrean dan dimulai.

Statistik waktu mulai di tab Waktu.
Gambar 4. Statistik waktu mulai di tab Waktu

Statistik server di tab Waktu

Sekarang Anda dapat menyisipkan statistik server khusus ke tab Waktu. Lihat Demo nilai waktu server untuk mengetahui contohnya.

Statistik server di tab Waktu
Gambar 5. Statistik server di tab Timing

Terima kasih kepada sroussey atas kontribusinya.

Perubahan

Panel Linimasa kini menjadi panel Performa

Nama panel Linimasa telah diganti menjadi panel Performa, untuk mencerminkan tujuannya dengan lebih baik.

Panel Profil kini menjadi panel Memori

Panel Profiles telah diganti namanya menjadi panel Memory, untuk mencerminkan tujuannya dengan lebih baik.

CPU Profiler berada di balik panel tersembunyi

Setelah panel Profile disebut panel Memory, tidaklah masuk akal untuk memiliki CPU profiler pada panel tersebut lagi. Selain itu, sasaran jangka panjang adalah membuat semua pengguna membuat profil dari panel Performa. Sementara itu, Anda masih dapat mengakses CPU profiler lama dari Settings > More Tools > JavaScript Profiler.

Lihat Chrome DevTools: JavaScript CPU Profiling di Chrome 58 untuk mempelajari cara membuat profil CPU di panel Performa.

UI Konsol Baru

Panel Konsol dan panel samping telah mengalami beberapa perubahan UI. Beberapa fitur yang tidak populer telah dipindahkan ke lokasi yang lebih tersembunyi, dan fitur populer sekarang lebih mudah diakses.

  • Klik Console Settings Setelan Konsol untuk mengakses setelan guna menyesuaikan perilaku Konsol.
  • Pertahankan log kini disembunyikan di Setelan Konsol.
  • Tombol dan panel Filter tidak ada. Gunakan menu dropdown.
  • Kotak teks untuk memfilter log kini selalu ditampilkan. File ini sebelumnya tersembunyi di panel Filters.
  • Kotak teks pemfilteran akan otomatis menerima RegEx, sehingga kotak centang Regex hilang.
  • Kotak centang Sembunyikan pelanggaran sudah hilang. Tetapkan dropdown tingkat logging ke Verbose untuk melihat pelanggaran.
  • Menghapus centang pada kotak Show all messages di UI lama sama dengan mencentang kotak Selected context only di Console Settings di UI baru.
UI Console baru
Gambar 6. UI Konsol baru

Titik henti sementara pemroses peristiwa WebGL telah dipindahkan

Titik henti sementara pemroses peristiwa WebGL telah dipindahkan dari kategori WebGL ke kategori Canvas. Kategori WebGL telah dihapus.