Preferensi

Sofia Emelianova
Sofia Emelianova

Konfigurasikan tampilan dan perilaku DevTools serta panelnya menggunakan Setelan. Setelan > Preferensi. Tab ini mencantumkan opsi penyesuaian umum dan opsi khusus panel.

Untuk menetapkan preferensi, buka Setelan. Setelan > Preferensi, lalu scroll ke salah satu bagian yang dijelaskan di bawah.

Bagian Tampilan di tab Preferensi.

Untuk mengetahui fungsi setiap setelan, telusuri nama setelan di halaman ini dan untuk meluaskan deskripsinya.

Referensi ini menunjukkan setelan yang berbeda dengan ikon berikut:

  • Kotak centang. Kotak centang
  • Daftar drop-down Drop-down.
  • Tidak digunakan lagi. Tidak digunakan lagi

Untuk memulihkan preferensi default, scroll ke bagian akhir tab Preferensi, lalu klik Pulihkan default dan muat ulang.

Tampilan

Bagian ini mencantumkan opsi yang menyesuaikan tampilan DevTools.

Tema: Mengubah tema DevTools dari preferensi sistem menjadi gelap ke terang.
  • Preferensi sistem
  • Terang
  • Gelap

Memengaruhi Elemen > Gaya dan tab terkait, serta panel Sumber > Debugger. Opsi otomatis membuat tata letak bergantung pada lebar DevTools.

Tata letak panel: Mengubah tata letak panel Elemen dari horizontal menjadi vertikal.
  • horizontal
  • vertikal
  • otomatis

Untuk menerapkan setelan ini, muat ulang DevTools.

Bahasa: Panel Setelan dalam bahasa China.
  • Bahasa UI browser
  • Salah satu opsi lokalitas, dalam contoh ini, bahasa China

Video ini menunjukkan cara beralih antar-tab menggunakan pintasan keyboard yang sesuai.

Sumber

Bagian ini mencantumkan opsi yang menyesuaikan panel Sumber.

Video ini menunjukkan cara, dengan opsi ini diaktifkan, panel Sumber memilih file dalam hierarki navigasi saat Anda beralih antar-tab.

Panel Sumber menampilkan link ke file yang diminifikasi di status bar.

Memerlukan pemuatan ulang DevTools.

Video ini pertama-tama menampilkan karakter Tab yang disisipkan dengan tombol Tab. Kemudian, saat Anda mengaktifkan opsi ini dan memuat ulang DevTools, tombol Tab akan memindahkan fokus.

Memerlukan pemuatan ulang DevTools.

Video ini pertama-tama menampilkan indentasi default delapan spasi. Kemudian, saat Anda mengaktifkan opsi ini, opsi ini akan mengganti indentasi default dengan indentasi file sumber.

Video ini pertama kali tidak menampilkan saran apa pun. Kemudian, saat Anda mengaktifkan opsi ini, Editor akan menampilkan saran untuk penyelesaian perintah.

Video ini menunjukkan cara mengetik tanda kurung buka sebelum dan sesudah mengaktifkan penutupan tanda kurung otomatis.

Memerlukan pemuatan ulang DevTools.

Video ini menunjukkan cara melipat blok kode saat Anda mengaktifkan opsi ini.

Memerlukan pemuatan ulang DevTools. Opsi melakukan hal berikut:

  • Semua menunjukkan semua karakter spasi kosong sebagai titik (...). Selain itu, Editor menunjukkan karakter Tab sebagai garis (—).
  • Akhir menandai karakter spasi kosong di akhir baris dengan warna merah muda.
Tampilkan karakter spasi kosong: Opsi yang dipilih: Semua dan Mengikuti.
  • Tidak ada
  • Semua (...)
  • Trailing

Video ini pertama-tama menampilkan panel Sumber yang tidak fokus saat dijeda di titik henti sementara. Kemudian, saat Anda mengaktifkan opsi ini, DevTools akan membuka Editor di panel Sumber dan menampilkan baris kode dengan titik henti sementara.

Saat dicetak dengan format yang bagus, Editor dapat menampilkan satu baris kode panjang dalam beberapa baris, yang didahului dengan - untuk menunjukkan bahwa baris tersebut merupakan kelanjutan baris.

Kode yang dicetak dengan rapi di panel Sumber.
Panel Sumber menampilkan file .scss di bagian Dibuat dalam hierarki navigasi. Panel Gaya di panel Elemen menampilkan link ke sumber .scss di samping aturan CSS.

Video ini menunjukkan cara men-scroll melewati akhir file saat Anda mengaktifkan opsi ini.

Jika dibiarkan dinonaktifkan, DevTools akan mencatat ke pesan Console yang mirip dengan berikut:

Pesan di Konsol yang menginformasikan bahwa pemuatan dari jalur file jarak jauh dilarang karena alasan keamanan.
Indentasi default: Menonaktifkan opsi penggantian dan mengubah indentasi default dari dua spasi menjadi delapan, lalu ke tombol Tab.
  • 2 spasi
  • 4 spasi
  • 8 spasi
  • Karakter tab

Contoh ini menunjukkan cara menetapkan indentasi default ke delapan spasi terlebih dahulu, lalu ke karakter Tab.

Elemen

Bagian ini mencantumkan opsi yang menyesuaikan panel Elemen.

Video ini pertama-tama menunjukkan bahwa node DOM tidak dipilih di hierarki DOM. Kemudian, saat Anda mengaktifkan opsi ini, panel Elemen akan memilih node saat diarahkan kursor.

Jaringan

Bagian ini mencantumkan opsi yang menyesuaikan panel Jaringan. Sebagian besar opsi sama dengan di setelan panel.

Preserve log di panel Network. Menyimpan permintaan di seluruh pemuatan halaman.

Video ini pertama-tama menampilkan log permintaan yang dimuat ulang saat halaman dimuat ulang, lalu dipertahankan saat Anda mengaktifkan opsi ini.

Record network log di panel Network. Memulai atau menghentikan perekaman permintaan di log jaringan.

Tombol Rekam log jaringan di panel Jaringan.

Video ini pertama-tama menunjukkan bahwa permintaan tidak diblokir. Kemudian, setelah Anda mengaktifkan opsi ini, pola di panel samping Pemblokiran permintaan jaringan akan memblokirnya.

Nonaktifkan cache di panel Jaringan. Menonaktifkan cache browser.

Kotak centang Nonaktifkan Cache.

Kelompokkan menurut frame di panel Jaringan. Opsi ini mengelompokkan permintaan yang dimulai oleh frame inline.

Log permintaan jaringan dengan permintaan yang dikelompokkan berdasarkan frame inline.

Performa

Bagian ini mencantumkan opsi yang menyesuaikan panel Performa.

Tindakan roda mouse flame chart: Mengubah tindakan roda mouse dari scroll menjadi zoom untuk flame chart.
  • Scroll
  • Zoom

Contoh ini menunjukkan tindakan roda mouse scroll dan zoom pada diagram api di panel Performa.

Konsol

Bagian ini mencantumkan opsi yang menyesuaikan Konsol. Sebagian besar opsi sama dengan di Setelan Konsol.

Opsi serupa di Konsol dan di Setelan.

Video ini menunjukkan cara menyembunyikan pesan jaringan dengan opsi ini di Setelan Setelan. dan di Setelan Konsol.

Video ini menunjukkan cara mengaktifkan opsi ini di Setelan. Setelan dan di Konsol > Setelan serta memilih konteks di Konsol.

Video ini menunjukkan cara mengaktifkan opsi ini di Setelan. Setelan dan Konsol > Setelan serta mencatat pesan XHR finished loading ke Konsol.

error CORS yang dicatat ke dalam log.

Anda dapat menemukan opsi yang sama di Console > Settings.

Konsol menampilkan error CORS.

Anda dapat menemukan opsi yang sama di Console > Settings.

Video ini menampilkan berbagai pratinjau output.

Dengan kata lain, kode ini menetapkan navigator.userActivation.isActive ke true setelah evaluasi. Anda dapat menemukan opsi yang sama di Console > Settings.

Video ini menunjukkan hasil evaluasi navigator.userActivation.isActive sebelum dan sesudah mengaktifkan opsi ini.

Perluasan

Bagian ini mencantumkan opsi yang menyesuaikan penanganan link untuk ekstensi Chrome DevTools.

Penanganan link: Memilih opsi untuk membuka link.
  • Otomatis. Membuka file di panel Sumber secara default.
  • Opsi arbitrer yang dapat ditambahkan oleh ekstensi DevTools.

Persistensi

Bagian ini mencantumkan opsi yang mengontrol cara DevTools menyimpan perubahan yang Anda buat.

Debugger

Bagian ini mencantumkan opsi yang mengontrol perilaku Debugger.

JavaScript dinonaktifkan.

Muat ulang halaman untuk melihat apakah dan bagaimana halaman bergantung pada JavaScript saat dimuat.

Jika JavaScript dinonaktifkan, Chrome akan menampilkan ikon JavaScript dinonaktifkan. yang sesuai di kolom URL dan DevTools akan menampilkan ikon Peringatan. peringatan di samping Sumber.

Ikon di kolom URL dan ikon peringatan di samping Sumber di DevTools.

Secara default, Debugger mencoba melacak operasi asinkron jika framework yang Anda gunakan mendukung pelacakan tersebut.

Operasi asinkron di Stack Panggilan.

Untuk mengetahui informasi selengkapnya, lihat Melihat pelacakan tumpukan asinkron.

Global

Bagian ini mencantumkan opsi yang memiliki efek global di DevTools.

Video ini pertama-tama menunjukkan cara mengklik link dan membuka tab baru *tanpa* DevTools. Kemudian, saat Anda mengaktifkan opsi ini, tab baru akan terbuka *dengan* DevTools.

Telusuri saat mengetik membuat DevTools "melompat" ke hasil penelusuran pertama saat Anda mengetik kueri penelusuran. Jika dinonaktifkan, DevTools akan mengarahkan Anda ke hasil hanya saat Anda menekan Enter.

Video ini pertama-tama menunjukkan cara DevTools "melompat" saat Anda mengetik kueri penelusuran. Kemudian, saat Anda mengaktifkan opsi ini, DevTools akan mengarahkan Anda ke hasil pertama saat Anda menekan Enter.

Sinkronisasi

Di bagian ini, Anda dapat menyiapkan sinkronisasi setelan antar-perangkat.