Yang Baru di DevTools (Chrome 83)

Kayce Basques

Emulasi kekurangan penglihatan

Buka tab Rendering dan gunakan fitur Emulasikan kekurangan penglihatan yang baru untuk mendapatkan pengalaman yang lebih baik gambaran tentang bagaimana orang-orang dengan berbagai jenis kekurangan penglihatan memanfaatkan situs Anda.

Mengemulasi penglihatan yang kabur.

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 yaitu ketidakmampuan menyeluruh untuk melihat lampu merah). Namun, "-omali" ini kekurangan penglihatan adalah tidak didefinisikan dengan jelas: setiap orang dengan gangguan penglihatan seperti itu berbeda dan mungkin melihat sesuatu secara berbeda (mampu melihat lebih banyak/lebih sedikit warna yang relevan).

Dengan mendesain untuk simulasi yang lebih ekstrem di DevTools, aplikasi web Anda dijamin akan dapat diakses oleh orang dengan protanomali, deuteranomali, tritanomali, dan juga akromatomali.

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 dan ketik Sensors untuk mengakses tab Sensors. Setelah melakukan tindakan ini, DevTools mengubah lokalitas default saat ini, yang 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

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 kini menyediakan informasi proses debug Cross-Origin Embedder Policy.

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

Permintaan yang diblokir di kolom Status

Bagian Header Respons pada tab Header memberikan panduan selengkapnya 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:

Motivasi untuk ikon baru ini adalah untuk membuat UI lebih konsisten dengan alat {i>debugging<i} GUI lainnya (yang biasanya berwarna merah atau merah) dan untuk membuatnya lebih mudah untuk membedakan antara 3 fitur pada 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 sebelah 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.

&#39;Menu Utama&#39; buka dengan &#39;Alat Lainnya&#39; berfokus pada &#39;Setelan&#39;

Kirim masukan ke masalah Chromium #1050855.

Panel Audits sekarang menjadi panel Lighthouse

Tim DevTools dan Lighthouse sering mendapatkan masukan dari developer web yang akan mereka dengar Anda dapat menjalankan Lighthouse dari DevTools, tetapi ketika mereka mencobanya, tidak bisa menemukan "Lighthouse" sehingga panel Audits sekarang menjadi panel Lighthouse.

Panel Lighthouse

Menghapus semua Penggantian Lokal di folder

Setelah menyiapkan Local Overrides, Anda kini dapat mengklik kanan folder dan memilih Delete baru semua penggantian 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 untuk waktu yang lama, yang menyebabkan web {i>page<i} menjadi macet.

Anda telah dapat memvisualisasikan Tugas yang Lama di panel Performa untuk sementara waktu, tetapi dalam UI visualisasi Tugas Panjang Chrome 83 di panel Performa telah diupdate. Tugas Panjang bagian dari tugas sekarang diwarnai 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 di seluruh 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 model maskable ikon standar.

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

Kolom &#39;Tampilkan hanya area aman minimum untuk ikon yang dapat disamarkan&#39; kotak centang

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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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