Yang Baru di DevTools (Chrome 111)

Jecelyn Yeen

Men-debug warna HD dengan panel Styles

Jenis dan ruang warna CSS baru akan hadir di web. Sama menariknya bahwa DevTools memperkenalkan alat baru untuk membantu developer membuat, mengonversi, dan men-debug warna High Definition.

Panel Styles kini mendukung 12 ruang warna baru dan 7 gamut baru seperti yang diuraikan dalam spesifikasi CSS Color Level 4. Lihat Panduan Warna CSS Definisi Tinggi untuk memahami secara komprehensif opsi warna yang tersedia di web.

Berikut adalah contoh definisi warna CSS dengan color(), lch(), oklab(), dan color-mix(). Contoh definisi warna CSS.

Saat menggunakan fungsi color-mix(), Anda dapat melihat output warna akhir di panel Computed. Hasil color-mix di panel Computed.

Pemilih warna mendukung semua ruang warna baru dengan lebih banyak fitur. Misalnya, klik sampel warna color(display-p3 1 0 1). Garis batas gamut juga telah ditambahkan, yang membedakan gamut sRGB dan display-p3 untuk pemahaman yang lebih jelas tentang gamut warna yang Anda pilih. Garis batas gamut.

DevTools mendukung konversi warna antar-format warna. Gunakan ikon Ubah Format Warna untuk mengakses pop-up konversi, atau cukup gunakan Shift + klik pada contoh warna di panel Gaya. Mengonversi warna antar-format warna.

Saat mengonversi, penting untuk mengetahui apakah konversi dipangkas agar sesuai dengan ruang. DevTools akan menempatkan ikon peringatan di samping warna yang dikonversi untuk memberi tahu Anda tentang pemangkasan ini. Peringatan pemangkasan warna.

Selain itu, Anda dapat memilih warna dari layar dengan pintasan baru. Tekan 'c' untuk mengaktifkan alat tetes mata dan tekan Escape untuk menonaktifkannya. Alat pipet hanya mengambil sampel warna dalam ruang warna sRGB. Misalnya, jika Anda mencoba mengambil sampel warna color(display-p3 1 0 1), yang berada di luar ruang warna sRGB, alat penetes warna akan memangkas warna ke warna terdekat dalam ruang sRGB, yaitu magenta color(display-p3 0.92 0.2 0.97).

Aktifkan alat tetes mata.

Terakhir, setelan Format warna kini tidak digunakan lagi untuk mengakomodasi format warna HD baru. Penghentian penggunaan setelan format warna.

Masalah Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

UX titik henti sementara yang ditingkatkan

Panel Breakpoints yang didesain ulang memungkinkan Anda memiliki akses cepat ke fitur yang umum digunakan, khususnya, menonaktifkan, mengedit, dan menghapus titik henti.

Berikut beberapa sorotannya: - Kedua opsi pengecualian jeda dipindahkan ke panel Titik Break dan diberi label dengan teks agar lebih mudah dipahami. Opsi pengecualian jeda.

  • Titik henti sementara dikelompokkan menurut file, diurutkan berdasarkan nomor baris atau kolom, dan dapat diciutkan. Mengelompokkan titik henti sementara menurut file.

  • Ada opsi baru untuk menonaktifkan, menghapus, dan mengedit titik henti sementara saat mengarahkan kursor ke titik henti sementara atau file. Opsi baru untuk menonaktifkan titik henti sementara.

  • Klik tombol edit titik henti sementara untuk membuka editor titik henti sementara. Dari sini, Anda dapat memasukkan kondisi titik henti sementara atau beralih ke titik log. Dialog pengeditan titik henti sementara.

Lihat referensi proses debug JavaScript untuk mempelajari cara melakukan proses debug dengan DevTools.

Masalah Chromium: 1407586, 1402891, 1402893

Pintasan Perekam yang dapat disesuaikan

Gunakan pintasan keyboard untuk merekam dan memutar ulang alur pengguna dengan lebih cepat.

Perekam memperkenalkan beberapa pintasan keyboard yang praktis untuk merekam dan memutar ulang alur pengguna dengan lebih cepat.

Tidak ingat pintasannya? Tidak masalah, klik tombol ? untuk melihat semua pintasan kapan saja. Pintasan Perekam.

Anda bahkan dapat menyesuaikan pintasan ini melalui menu Setelan. Menyesuaikan pintasan Perekam Suara.

Jika Anda sedang bekerja di panel lain dan ingin memulai perekaman alur pengguna, gunakan perintah Buat rekaman baru dari Menu Perintah di DevTools untuk memulai. Buat perintah perekaman baru.

Masalah Chromium: 1339771

Penyorotan sintaksis yang lebih baik untuk Angular

DevTools meningkatkan penyorotan sintaksis untuk template HTML Angular, sehingga memudahkan Anda membaca kode dan mengenali strukturnya. Penyorotan sintaksis untuk template HTML Angular.

Masalah Chromium: 1385374, 1385678

Menata ulang cache di panel Aplikasi

Panel Cache Storage kini dapat ditemukan di bagian Storage pada panel Application, sedangkan panel Back/forward cache telah dipindahkan ke bagian Background Services. Cache di panel Aplikasi.

Masalah Chromium: 1407166

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • DevTools telah diupdate untuk mematuhi setelan Nonaktifkan cache saat memuat peta sumber. (1407084)
  • Panel Elemen kini langsung memfokuskan otomatis pada elemen pertama yang cocok dalam hasil penelusuran. (1381853)
  • Berbagai perbaikan untuk meningkatkan keandalan peta sumber dan titik henti sementara. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • Untuk memfasilitasi proses debug dengan lebih baik, DevTools kini mendukung evaluasi ekspresi dengan anggota class pribadi. (1381806) Mengevaluasi ekspresi dengan anggota class pribadi.

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 canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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