Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 111)

Jecelyn Yeen

Men-debug warna HD dengan panel Styles

Jenis warna dan ruang CSS baru akan hadir di web. Hal yang sama menariknya lagi adalah DevTools memperkenalkan fitur baru untuk membantu developer membuat, mengonversi, dan men-debug warna Definisi Tinggi.

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 mendapatkan pemahaman komprehensif tentang 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 {i>color-mix<i} di panel Computed.

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

DevTools mendukung konversi warna antarformat warna. Gunakan ikon Change Color Format untuk mengakses pop-up konversi, atau cukup gunakan Shift + klik contoh warna di panel Styles. Mengonversi warna di antara format warna.

Saat melakukan konversi, penting untuk mengetahui apakah konversi diklip agar sesuai dengan ruang. DevTools akan menampilkan ikon peringatan di samping warna yang dikonversi, yang akan memberi tahu Anda jika terjadi pemotongan ini. Peringatan pemotongan warna.

Selain itu, Anda dapat memilih warna dari layar dengan pintasan baru. Tekan 'c' untuk mengaktifkan pipet 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 pipet akan memotong warna ke warna terdekat di ruang sRGB, yaitu color(display-p3 0.92 0.2 0.97) magenta.

Aktifkan pipet.

Terakhir, setelan Format warna kini tidak digunakan lagi untuk memberi ruang bagi format warna HD yang baru. Penghentian 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 sementara.

Berikut ini beberapa sorotan: - Kedua opsi pengecualian jeda dipindahkan ke panel Breakpoints dan diberi label dengan teks agar lebih jelas. Opsi jeda pengecualian.

Titik henti sementara dikelompokkan menurut file, diurutkan berdasarkan nomor baris atau kolom, dan dapat diciutkan.
Ada opsi baru untuk menonaktifkan, menghapus, dan mengedit titik henti sementara saat mengarahkan kursor ke titik henti sementara atau file.
Klik tombol edit titik henti sementara untuk membuka editor titik henti sementara. Dari sini, Anda dapat memasukkan kondisi titik henti sementara atau beralih ke logpoint.

Lihat referensi proses debug JavaScript untuk mempelajari cara men-debug dengan DevTools.

Masalah Chromium: 1407586, 1402891, 1402893

Pintasan Perekam Suara yang Dapat Disesuaikan

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

Perekam memperkenalkan beberapa pintasan keyboard yang nyaman untuk perekaman dan pemutaran ulang alur penggunaan dengan lebih cepat.

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

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

Jika Anda bekerja di panel lain dan ingin memulai perekaman alur penggunaan, gunakan perintah Create a new recording dari Command Menu di DevTools untuk memulai. Buat perintah perekaman baru.

Masalah Chromium: 1339771

Sorotan sintaksis yang lebih baik untuk Angular

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

Masalah Chromium: 1385374, 1385678

Mengatur ulang cache di panel Application

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

Masalah Chromium: 1407166

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

DevTools telah diupdate untuk menerapkan setelan Nonaktifkan cache saat memuat sourcemap. (1407084)
Panel Elemen kini langsung berfokus 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 memudahkan proses debug, DevTools kini mendukung evaluasi ekspresi dengan anggota class pribadi. (1381806)

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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.