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 adalah DevTools memperkenalkan alat 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 menyeluruh 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. {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, untuk membedakan antara gamut sRGB dan display-p3 agar lebih memahami gamut warna yang dipilih. Garis batas gamut.

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

Saat melakukan konversi, penting untuk mengetahui apakah konversi terpotong agar sesuai dengan ruangan. DevTools akan menampilkan ikon peringatan di samping warna hasil konversi yang akan memberi tahu Anda tentang penyesuaian ini. Peringatan pemotongan warna.

Selain itu, Anda dapat memilih warna dari layar Anda dengan pintasan baru. Tekan 'c' untuk mengaktifkan pipet mata dan tekan Escape untuk menonaktifkannya. Alat pipet hanya mengambil sampel warna di 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 magenta color(display-p3 0.92 0.2 0.97).

Aktifkan dropper mata.

Terakhir, setelan Format warna kini tidak digunakan lagi untuk memberi ruang bagi format warna HD 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 biasa digunakan, khususnya, menonaktifkan, mengedit, dan menghapus titik henti sementara.

Berikut adalah beberapa sorotannya: - Kedua opsi pengecualian jeda dipindahkan ke panel Breakpoints dan diberi label dengan teks agar lebih jelas. Jeda opsi pengecualian.

Titik henti sementara dikelompokkan menurut file, diurutkan menurut 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 mudah untuk merekam dan memutar ulang alur penggunaan dengan lebih cepat.

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

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

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

Masalah Chromium: 1339771

Sorotan sintaksis yang lebih baik untuk Angular

DevTools meningkatkan sorotan sintaksis untuk template HTML Angular, sehingga Anda lebih mudah membaca kode dan mengenali strukturnya. Penyorotan sintaksis untuk template HTML Angular.

Masalah Chromium: 1385374, 1385678

Mengatur ulang cache di panel Application

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

Masalah Chromium: 1407166

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

DevTools telah diupdate agar sesuai dengan setelan Disable cache saat memuat sourcemap. (1407084)
Panel Elemen kini berfokus otomatis secara instan pada elemen pertama yang cocok di hasil penelusuran. (1381853)
Berbagai perbaikan untuk meningkatkan keandalan peta sumber dan titik henti sementara. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
Untuk lebih memfasilitasi 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.