Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 83)

Kayce Basques

Emulasi kekurangan penglihatan

Buka tab Rendering dan gunakan fitur Mengimitasi kekurangan penglihatan untuk mendapatkan gambaran yang lebih baik tentang bagaimana orang dengan berbagai jenis kekurangan penglihatan merasakan pengalaman di situs Anda.

Mengemulasi penglihatan yang kabur.

DevTools dapat mengemulasi penglihatan yang buram 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).

Ada versi yang kurang ekstrem dari kekurangan penglihatan warna ini, dan faktanya lebih umum terjadi. Misalnya, protanomali adalah penurunan sensitivitas terhadap cahaya merah (bukan protanopia, yang merupakan ketidakmampuan total untuk melihat cahaya merah). Namun, kekurangan penglihatan "-omali" ini tidak didefinisikan dengan jelas: setiap orang dengan kekurangan penglihatan seperti itu berbeda dan mungkin melihat sesuatu secara berbeda (mampu melihat lebih banyak/kurang dari warna yang relevan).

Dengan mendesain untuk simulasi yang lebih ekstrem di DevTools, aplikasi web Anda dijamin dapat diakses oleh orang yang menderita protanomali, deuteranomali, tritanomali, serta juga achromatomali.

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

Emulasi lokalitas

Anda kini dapat mengemulasikan lokalitas dengan menetapkan lokasi di Sensor > Lokasi. Buka Command Menu, lalu ketik Sensors untuk mengakses tab Sensors. Setelah melakukan tindakan ini, DevTools akan mengubah lokalitas default saat ini, sehingga memengaruhi hal berikut:

Intl.* API, misalnya new Intl.NumberFormat().resolvedOptions().locale
API JavaScript berbasis 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

Catatan: pembaruan pada navigator.language dan navigator.languages tidak langsung terlihat, tetapi hanya setelah navigasi berikutnya atau halaman dimuat ulang. Perubahan pada header HTTP Accept-Language hanya ditampilkan untuk permintaan berikutnya.

Lihat Contoh kode yang bergantung pada lokal untuk mencobanya sendiri.

Kirim masukan ke masalah Chromium #1051822.

Proses debug Kebijakan Penyemat Lintas Asal (COEP)

Panel Jaringan sekarang 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 untuk proses debug lebih lanjut:

Permintaan yang diblokir di kolom Status

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

Panduan selengkapnya di bagian Header Respons

Kirim masukan ke masalah Chromium #1051466.

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

Panel Sources memiliki ikon baru untuk titik henti sementara, titik henti sementara bersyarat, dan logpoint:

Titik henti sementara diwakili oleh lingkaran merah.
Titik henti sementara bersyarat diwakili oleh lingkaran setengah putih setengah merah.
Logpoint diwakili oleh lingkaran merah dengan ikon Konsol.

Motivasi untuk ikon baru ini adalah untuk membuat UI lebih konsisten dengan alat proses debug GUI lainnya (yang biasanya berwarna merah pada titik henti sementara) dan memudahkan untuk membedakan ketiga fitur tersebut secara sekilas.

Kirim masukan ke masalah Chromium #1041830.

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

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

Kaitkan ke kiri dari Menu Perintah

Buka Menu Perintah dan jalankan perintah Dock to left untuk memindahkan DevTools ke kiri area pandang.

DevTools dipasang ke dok di kiri area pandang

Kirim masukan ke masalah Chromium #1011679.

Opsi `Settings` di Menu Utama telah dipindahkan

Kini opsi untuk membuka Setelan dari Menu Utama dapat ditemukan di Alat Lainnya.

Kirim masukan ke masalah Chromium #1050855.

Panel Audits sekarang menjadi panel Lighthouse

Tim DevTools dan Lighthouse sering mendapatkan masukan dari developer web bahwa mereka akan mendengar bahwa Lighthouse dapat dijalankan dari DevTools. Namun, saat mencobanya, mereka tidak dapat menemukan panel "Lighthouse", sehingga panel Audits sekarang menjadi panel Lighthouse.

Panel Lighthouse

Menghapus semua Penggantian Lokal di folder

Setelah menyiapkan Local Overrides, kini Anda dapat mengklik kanan folder dan memilih opsi Delete all override baru untuk menghapus semua Local Overrides di folder tersebut.

Hapus semua penggantian

Kirim masukan ke masalah Chromium #1016501.

Mengupdate UI Tugas panjang

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

Anda telah dapat memvisualisasikan Tugas yang Lama di panel Performance untuk sementara waktu, tetapi di Chrome 83, UI visualisasi Tugas Panjang di panel Performa telah diupdate. Bagian Tugas Panjang dari tugas sekarang diberi warna dengan latar belakang merah bergaris.

UI Tugas Panjang yang baru

Kirim masukan ke masalah Chromium #1054447.

Dukungan ikon yang dapat disamarkan di panel Manifes

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

Aktifkan kotak centang Show only the minimum safe area for maskable icon di panel Manifest untuk memeriksa apakah ikon maskable Anda akan terlihat bagus di perangkat Android Oreo. Lihat Apakah ikon saya saat ini sudah siap? untuk mempelajari lebih lanjut.

Kotak centang 'Tampilkan hanya area aman minimum untuk ikon yang dapat disamarkan'

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.