Yang Baru di DevTools (Chrome 83)

Mengemulasi kekurangan daya penglihatan

Buka tab Rendering dan gunakan fitur Emulasi gangguan penglihatan yang baru untuk mendapatkan gambaran yang lebih baik tentang pengalaman pengguna dengan berbagai jenis gangguan penglihatan di situs Anda.

Mengemulasi penglihatan kabur.

DevTools dapat mengemulasikan penglihatan yang kabur dan jenis kekurangan penglihatan warna berikut:

• Protanopia: ketidakmampuan melihat cahaya merah.
• Deuteranopia: ketidakmampuan melihat cahaya hijau.
• Tritanopia: ketidakmampuan melihat cahaya biru.
• Achromatopsia: ketidakmampuan melihat warna apa pun kecuali warna abu-abu (sangat jarang terjadi).

Versi yang tidak terlalu ekstrem dari kekurangan penglihatan warna ini ada, dan sebenarnya lebih umum terjadi. Misalnya, protanomali adalah penurunan sensitivitas terhadap cahaya merah (berbeda dengan protanopia, yang merupakan ketidakmampuan total untuk melihat cahaya merah). Namun, gangguan penglihatan "-omaly" ini tidak didefinisikan dengan jelas: setiap orang dengan gangguan penglihatan tersebut berbeda dan mungkin melihat sesuatu secara berbeda (dapat melihat lebih banyak/lebih sedikit warna yang relevan).

Dengan mendesain simulasi yang lebih ekstrem di DevTools, aplikasi web Anda dijamin dapat diakses oleh orang-orang dengan protanomali, deutanomali, tritanomali, dan akromatomali.

Kirim masukan ke masalah Chromium #1003700, atau baca selengkapnya tentang penerapan.

Mengemulasi lokalitas

Sekarang Anda dapat mengemulasi lokalitas dengan menyetel lokasi di Sensor > Lokasi. Buka Menu Perintah, lalu ketik Sensors untuk mengakses tab Sensor. Setelah melakukan tindakan ini, DevTools akan mengubah lokalitas default saat ini, yang memengaruhi hal berikut:

• Intl.* API, misalnya new Intl.NumberFormat().resolvedOptions().locale
• API JavaScript yang mendukung lokalitas lainnya seperti String.prototype.localeCompare dan *.prototype.toLocaleString, misalnya 123_456..toLocaleString()
• DOM API seperti navigator.language dan navigator.languages
• header permintaan HTTP Accept-Language

Lihat Contoh kode yang bergantung pada lokalitas untuk mencobanya sendiri.

Kirim masukan ke masalah Chromium #1051822.

Penelusuran kesalahan Cross-Origin Embedder Policy (COEP)

Panel Jaringan kini menyediakan informasi proses debug Cross-Origin Embedder Policy.

Kolom Status kini memberikan penjelasan singkat tentang alasan permintaan diblokir serta link untuk melihat header permintaan tersebut guna melakukan proses debug lebih lanjut:

Bagian Header Respons pada tab Header memberikan panduan lebih lanjut tentang cara menyelesaikan masalah:

Kirim masukan ke masalah Chromium #1051466.

Ikon baru untuk titik henti sementara, titik henti sementara bersyarat, dan titik log

Panel Sumber memiliki ikon baru untuk titik henti sementara, titik henti sementara bersyarat, dan titik log:

• Titik henti sementara ditandai dengan lingkaran merah.
• Titik Henti Sementara Bersyarat ditandai dengan lingkaran setengah merah setengah putih.
• Titik log ditampilkan dengan lingkaran merah dengan ikon Konsol.

Motivasi untuk ikon baru ini adalah untuk membuat UI lebih konsisten dengan alat debug GUI lainnya (yang biasanya mewarnai titik henti sementara dengan warna merah) dan untuk mempermudah membedakan 3 fitur secara sekilas.

Kirim masukan ke masalah Chromium #1041830.

Melihat permintaan jaringan yang menetapkan jalur cookie tertentu

Gunakan kata kunci filter cookie-path baru di panel Network untuk berfokus pada permintaan jaringan yang menetapkan jalur cookie tertentu.

Lihat Memfilter permintaan menurut properti untuk menemukan kata kunci khusus lainnya seperti cookie-path.

Dock ke kiri dari Menu Perintah

Buka Menu Perintah dan jalankan perintah Dock to left untuk memindahkan DevTools ke sebelah kiri viewport Anda.

Kirim masukan ke masalah Chromium #1011679.

Opsi Settings di Menu Utama telah dipindahkan

Opsi untuk membuka Setelan dari Menu Utama kini dapat ditemukan di bagian Alat Lainnya.

Kirim masukan ke masalah Chromium #1050855.

Panel Audits kini menjadi panel Lighthouse

Tim DevTools dan Lighthouse sering menerima masukan dari developer web bahwa mereka mendengar bahwa Lighthouse dapat dijalankan dari DevTools, tetapi saat mereka mencoba, mereka tidak dapat menemukan panel "Lighthouse", jadi panel Audits kini menjadi panel Lighthouse.

Menghapus semua Penggantian Lokal dalam folder

Setelah menyiapkan Penggantian Lokal, Anda kini dapat mengklik kanan folder dan memilih opsi Hapus semua penggantian yang baru untuk menghapus semua Penggantian Lokal di folder tersebut.

Kirim masukan ke masalah Chromium #1016501.

UI Tugas panjang yang diperbarui

Tugas Panjang adalah kode JavaScript yang memonopoli thread utama dalam waktu yang lama, sehingga menyebabkan halaman web berhenti berfungsi.

Anda sudah dapat memvisualisasikan Tugas Panjang di panel Performa selama beberapa waktu, tetapi di Chrome 83, UI visualisasi Tugas Panjang di panel Performa telah diperbarui. Bagian Tugas Panjang dari tugas kini diwarnai dengan latar belakang merah bergaris.

Kirim masukan ke masalah Chromium #1054447.

Dukungan ikon maskable di panel Manifes

Android Oreo memperkenalkan ikon adaptif, yang menampilkan ikon aplikasi dalam berbagai bentuk di berbagai model perangkat. Ikon maskable adalah format ikon baru yang mendukung ikon adaptif, yang memungkinkan Anda memastikan ikon PWA Anda terlihat bagus di perangkat yang mendukung standar ikon maskable.

Aktifkan kotak centang Tampilkan hanya area aman minimum untuk ikon yang dapat disamarkan baru di panel Manifest untuk memeriksa apakah ikon yang dapat disamarkan akan terlihat bagus di perangkat Android Oreo. Lihat Apakah ikon saat ini sudah siap? untuk mempelajari lebih lanjut.

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.

• Kirimkan 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.
• Tinggalkan 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.