Yang Baru di DevTools (Chrome 83)

Kayce Basques

Mengemulasi kekurangan daya penglihatan

Buka tab Rendering dan gunakan fitur Emulate vision deficiencies yang baru untuk mendapatkan gambaran yang lebih baik tentang pengalaman pengguna dengan berbagai jenis gangguan penglihatan saat menggunakan situs Anda.

Mengemulasikan penglihatan kabur.

Mengemulasikan 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).

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

Dengan mendesain untuk simulasi yang lebih ekstrem di DevTools, aplikasi web Anda dijamin dapat diakses oleh orang dengan protanomaly, deuteranomaly, tritanomaly, dan achromatomaly.

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

Mengemulasi lokalitas

Sekarang Anda dapat mengemulasi lokalitas dengan menetapkan lokasi di Sensor > Lokasi. Buka Menu Perintah dan 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
  • JavaScript API lain yang peka lokalitas 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.

Proses debug Kebijakan Penyemat Lintas Asal (COEP)

Panel Jaringan kini menyediakan informasi proses debug Kebijakan Penyemat Lintas Asal.

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

Permintaan yang diblokir di kolom Status

Bagian Header Respons di 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 Sumber memiliki ikon baru untuk titik henti sementara, titik henti sementara bersyarat, dan logpoint:

Motivasi untuk ikon baru adalah membuat UI lebih konsisten dengan alat proses debug GUI lainnya (yang biasanya mewarnai titik henti sementara dengan warna merah) dan mempermudah untuk membedakan antara 3 fitur 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 Memfilter permintaan berdasarkan properti untuk menemukan lebih banyak kata kunci khusus seperti cookie-path.

Menambatkan ke kiri dari Menu Perintah

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

DevTools dikaitkan ke kiri area pandang

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.

'Menu Utama' terbuka dengan 'Alat Lainnya' yang berfokus pada 'Setelan'

Kirim masukan ke masalah Chromium #1050855.

Panel Audit kini menjadi panel Lighthouse

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

Panel Lighthouse

Menghapus semua Penggantian Lokal dalam folder

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

Menghapus semua penggantian

Kirim masukan ke masalah Chromium #1016501.

UI Tugas panjang yang diperbarui

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

Anda telah 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.

UI Tugas Panjang yang baru

Kirim masukan ke masalah Chromium #1054447.

Dukungan ikon maskable di panel Manifes

Android Oreo memperkenalkan ikon adaptif, yang menampilkan ikon aplikasi dalam berbagai bentuk pada berbagai model perangkat. 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 yang dapat disamarkan.

Aktifkan kotak centang Hanya tampilkan area aman minimum untuk ikon yang dapat disamarkan baru di panel Manifes 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.

Kotak centang 'Hanya tampilkan area aman minimum untuk ikon yang dapat disamarkan'

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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