Preferensi

Sofia Emelianova
Sofia Emelianova

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

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

Bagian Tampilan di tab Preferensi.

Untuk mengetahui fungsi setiap setelan, telusuri nama setelan di halaman ini dan luaskan 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 bawah ke bagian ujung tab Preferences, lalu klik Pulihkan default dan muat ulang.

Tampilan

Bagian ini mencantumkan opsi yang menyesuaikan tampilan DevTools.

Themes Drop-down. menetapkan tema warna untuk UI DevTools.

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

Tata letak panel Drop-down. mengatur panel di panel.

Memengaruhi Elements > Styles dan tab sister, serta panel Sources > Debugger. Opsi auto membuat tata letak bergantung pada lebar DevTools.

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

Tidak digunakan lagi. Format warna Drop-down. menetapkan format nilai warna CSS di Elemen > Gaya.

DevTools otomatis mengonversi nilai warna yang valid ke format yang dipilih.

Format warna: Mengubah format warna di panel Styles.
  • Seperti yang ditulis
  • HEX: #dac0de
  • RGB: rgb(128 255 255)
  • HSL: hsl(300deg 80% 90%)

Language Drop-down. menetapkan lokalitas untuk UI DevTools.

Untuk menerapkan setelan ini, muat ulang DevTools.

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

Kotak centang. Aktifkan pintasan Ctrl/Cmd + 0-9 untuk beralih panel memungkinkan Anda membuka panel menggunakan keyboard.

Video ini menunjukkan cara beralih di antara tab menggunakan pintasan keyboard yang sesuai.

Kotak centang. Nonaktifkan overlay status dijeda menyembunyikan overlay Tombol putar dan lewati. Dijeda di debugger di area pandang saat eksekusi kode dijeda.

Kotak centang. Tampilkan Yang Baru setelah setiap pembaruan akan otomatis membuka tab panel samping Yang Baru setelah setiap pembaruan Chrome.

Tab panel samping Yang Baru.

Sumber

Bagian ini mencantumkan opsi yang menyesuaikan panel Sources.

Kotak centang. Penelusuran dalam skrip anonim dan konten memungkinkan Anda menelusuri semua file JavaScript yang dimuat, termasuk yang ada di ekstensi Chrome, menggunakan tab Telusuri.

Video ini memperlihatkan cara menelusuri teks dalam file sumber ekstensi.

Kotak centang. Otomatis membuka file di sidebar memilih file di panel Sources > Page saat Anda beralih antar-tab di Editor.

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

Kotak centang. dengan Aktifkan peta sumber JavaScript, DevTools dapat menemukan sumber file JavaScript yang dihasilkan atau diminifikasi.

Panel Sources menampilkan link ke file yang diminifikasi pada status bar.

Kotak centang. Aktifkan tab akan memindahkan fokus membuat tombol Tombol Tab. Tab memindahkan fokus di dalam DevTools, bukan menyisipkan karakter Tab di Editor.

Perlu memuat 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.

Kotak centang. Deteksi indentasi menetapkan indentasi ke indentasi yang ada di file sumber yang dibuka di Editor.

Perlu memuat ulang DevTools.

Video ini pertama-tama menampilkan indentasi default delapan spasi. Kemudian, bila opsi ini diaktifkan, indentasi {i>default<i} akan digantikan dengan file sumber.

Kotak centang. Pelengkapan otomatis memungkinkan saran yang berguna di Editor.

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

Kotak centang. Pencocokan braket garis bawah dan sorotan dalam warna merah muda di Editor tanda kurung siku, tanda kurung kurawal, atau tanda kurung tanpa pasangan.

Tanda kurung kurawal tanpa pasangan yang digarisbawahi dengan warna merah.

Kotak centang. Pelipatan kode memungkinkan Anda melipat dan membentangkan blok kode dalam tanda kurung kurawal di Editor.

Perlu memuat ulang DevTools.

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

Tampilkan karakter spasi kosong Drop-down. menampilkan karakter spasi kosong di Editor.

Perlu memuat ulang DevTools. Opsinya melakukan hal berikut:

  • Semua menunjukkan semua karakter spasi kosong sebagai titik (...). Selain itu, Editor menunjukkan karakter Tab sebagai garis ().
  • Jejak menandai karakter spasi kosong di akhir baris dengan warna merah terang.
Tampilkan karakter spasi kosong: Opsi yang dipilih: Semua dan Trailing. - Tidak ada - Semua (`...`) - Pelacakan

Kotak centang. Menampilkan nilai variabel sebaris saat proses debug menampilkan nilai variabel di samping pernyataan penetapan saat eksekusi dijeda.

Debugger yang dijeda selama eksekusi fungsi menampilkan nilai variabel di samping pernyataan penetapan.

Kotak centang. Panel Sumber Fokus saat memicu titik henti sementara akan membuka Sumber > Editor pada baris dengan titik henti sementara yang menjeda eksekusi.

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 Sources dan menampilkan baris kode dengan titik henti sementara.

Kotak centang. Aktifkan CSS source maps memungkinkan DevTools menemukan sumber file CSS yang dihasilkan, misalnya, .scss, dan menampilkannya kepada Anda.

Panel Sources menampilkan file .scss di bagian Authored pada struktur navigasi. Panel Styles di panel Elements menampilkan link ke sumber .scss di samping aturan CSS.

Kotak centang. Mengizinkan scroll melewati akhir file memungkinkan Anda men-scroll lebih jauh dari baris terakhir di Editor.

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

Kotak centang. Izinkan DevTools memuat resource, seperti peta sumber, dari jalur file jarak jauh. Dinonaktifkan secara default karena alasan keamanan.

Jika dinonaktifkan, DevTools akan log ke pesan Console seperti berikut:

Pesan di Konsol yang menginformasikan bahwa pemuatan dari jalur file jarak jauh dilarang karena alasan keamanan.

Indentasi default Drop-down. memungkinkan Anda memilih jumlah spasi yang disisipkan tombol Tombol Tab. Tab di Editor.

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 menampilkan cara menyetel indentasi default menjadi delapan spasi terlebih dahulu lalu ke karakter Tab.

Elemen

Bagian ini mencantumkan opsi yang menyesuaikan panel Elements.

Kotak centang. Tampilkan shadow DOM agen pengguna menampilkan node shadow DOM di hierarki DOM.

Panel Elemen menampilkan node shadow DOM.

Kotak centang. Penggabungan kata akan memisahkan baris panjang di hierarki DOM dan menggabungkannya ke baris berikutnya.

Panel Elements memisahkan baris panjang berdasarkan kata dan menggabungkannya ke baris berikutnya.

Kotak centang. Tampilkan komentar HTML menampilkan komentar HTML dalam hierarki DOM.

Panel Elemen menampilkan komentar HTML.

Kotak centang. Buka node DOM saat kursor diarahkan memilih node yang sesuai di hierarki DOM saat Anda mengarahkan kursor ke elemen di area pandang dalam mode pemeriksaan Inspeksi..

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

Kotak centang. Tampilkan tooltip pemeriksaan mendetail menampilkan tooltip di area pandang dalam mode pemeriksaan Inspeksi. saat Anda mengarahkan kursor ke elemen.

Tooltip mendetail yang ditampilkan dalam mode pemeriksaan.

Kotak centang. Tampilkan aturan saat kursor diarahkan menampilkan penggaris di area pandang saat Anda mengarahkan kursor ke elemen dalam hierarki DOM.

Penggaris ditampilkan di area pandang.

Kotak centang. Tampilkan tooltip dokumentasi CSS menampilkan tooltip dengan deskripsi singkat saat Anda mengarahkan kursor ke properti di panel Styles.

Link Pelajari lebih lanjut akan mengarahkan Anda ke Referensi CSS MDN di properti.

Tooltip dengan dokumentasi tentang properti CSS.

Jaringan

Bagian ini mencantumkan opsi yang menyesuaikan panel Jaringan. Sebagian besar opsinya sama seperti yang ada di setelan panel.

Kotak centang. Pertahankan log sama dengan Mempertahankan 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 bertahan saat Anda mengaktifkan opsi ini.

Kotak centang. Catat log jaringan sama dengan Mencatat log jaringan. Rekam log jaringan di panel Jaringan. Memulai atau berhenti mencatat permintaan dalam log jaringan.

Tombol Record network log di panel Network.

Kotak centang. Aktifkan pemblokiran permintaan jaringan akan memblokir permintaan yang cocok dengan pola di panel samping Pemblokiran permintaan 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.

Kotak centang. Nonaktifkan cache (saat DevTools terbuka) sama dengan Nonaktifkan cache di panel Jaringan. Menonaktifkan cache browser.

Kotak centang Nonaktifkan Cache.

Kotak centang. Jenis resource kode warna menandai permintaan dalam berbagai warna, tergantung jenisnya di kolom Waterfall pada log jaringan.

Kolom Waterfall pada tab Jaringan tanpa dan dengan kode warna.

Kotak centang. Kelompokkan log jaringan menurut frame sama dengan 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.

Kotak centang. Paksa pemblokiran iklan di situs ini akan memblokir iklan yang terdeteksi di halaman saat DevTools terbuka.

Permintaan jaringan terkait iklan yang ditampilkan di panel Jaringan dengan filter Permintaan yang Diblokir diaktifkan.

Performa

Bagian ini mencantumkan opsi yang menyesuaikan panel Performa.

Tindakan roda mouse flamechart Drop-down. menetapkan tindakan scroll atau zoom ke roda mouse saat Anda membuka flame chart.

Tindakan roda mouse diagram api: Mengubah tindakan roda mouse dari scroll ke zoom untuk flame chart. - Scroll - Zoom

Contoh ini menunjukkan tindakan roda mouse scroll dan zoom pada flame chart di panel Performance.

Konsol

Bagian ini mencantumkan opsi yang menyesuaikan Konsol. Sebagian besar opsinya sama seperti yang ada di Setelan Konsol.

Opsi serupa di Konsol dan di Setelan.

Kotak centang. Sembunyikan pesan jaringan akan menyembunyikan pesan jaringan di Konsol.

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

Kotak centang. Hanya konteks yang dipilih membuat Konsol menampilkan pesan hanya untuk konteks yang dipilih: atas, iframe, pekerja, atau ekstensi.

Video ini menunjukkan cara mengaktifkan opsi ini di Setelan. Settings dan di Console > Settings, lalu memilih konteks di Console.

Kotak centang. Log XMLHttpRequests membuat log XHR dan permintaan pengambilan Konsol.

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

Kotak centang. Tampilkan stempel waktu membuat Konsol menampilkan stempel waktu di samping pesan.

Pesan dengan stempel waktu yang tercantum di Konsol.

Kotak centang. Pelengkapan otomatis dari histori membuat Konsol menyarankan perintah yang Anda jalankan sebelumnya saat Anda mengetik.

Anda dapat menemukan opsi yang sama di Konsol > Setelan.

Drop-down pelengkapan otomatis dengan opsi perintah dari histori Konsol.

Kotak centang. Terima saran pelengkapan otomatis saat menekan tombol Enter membuat Konsol menerima saran yang dipilih dari drop-down pelengkapan otomatis saat Anda menekan Enter.

Video ini menunjukkan hal yang terjadi saat Anda menekan Enter sebelum dan sesudah mengaktifkan opsi ini.

Kotak centang. Mengelompokkan pesan serupa di konsol membuat Konsol mengelompokkan pesan yang serupa.

Anda dapat menemukan opsi yang sama di Konsol > Setelan.

Pesan serupa di Konsol dikelompokkan bersama.

Kotak centang. Tampilkan error CORS di konsol membuat Konsol menampilkan error CORS yang dicatat ke dalam log.

Anda dapat menemukan opsi yang sama di Konsol > Setelan.

Konsol menampilkan error CORS.

Kotak centang. Evaluasi yang antusias membuat Konsol menampilkan pratinjau output saat Anda mengetik perintah.

Anda dapat menemukan opsi yang sama di Konsol > Setelan.

Video ini menampilkan berbagai pratinjau output.

Kotak centang. Perlakukan evaluasi kode sebagai tindakan pengguna akan mengubah perintah apa pun yang Anda jalankan di Konsol menjadi interaksi pengguna.

Dengan kata lain, sistem akan menetapkan navigator.userActivation.isActive ke true setelah dievaluasi. Anda dapat menemukan opsi yang sama di Konsol > Setelan.

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

Kotak centang. Memperluas pesan console.trace() secara otomatis membuat Konsol menampilkan pesan console.trace() yang diperluas saat mencatatnya.

Pesan console.trace() yang diperluas di Console.

Kotak centang. Pertahankan log saat navigasi membuat Konsol mencatat pesan Navigated to pada setiap navigasi dan menyimpan log di semua halaman.

Anda dapat menemukan opsi yang sama di Konsol > Setelan.

Konsol menampilkan pesan &#39;Dibuka ke&#39; dan menyimpan log di berbagai halaman.

Perluasan

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

Penanganan link Drop-down. menetapkan opsi untuk membuka file saat Anda mengklik link ke file sumber, misalnya, di panel Elements > Styles.

Penanganan tautan: 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.

Kotak centang. Aktifkan penggantian lokal akan membuat DevTools mempertahankan perubahan yang Anda buat pada sumber di seluruh pemuatan halaman.

Untuk informasi selengkapnya, lihat Penggantian Lokal.

Debugger

Bagian ini mencantumkan opsi yang mengontrol perilaku Debugger.

Kotak centang. Nonaktifkan JavaScript memungkinkan Anda melihat tampilan dan perilaku halaman web saat JavaScript dinonaktifkan.

Muat ulang halaman untuk melihat apakah halaman bergantung pada JavaScript dan bagaimana 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 Sources di DevTools.

Kotak centang. Nonaktifkan pelacakan tumpukan asinkron menyembunyikan "cerita lengkap" operasi asinkron di Stack Panggilan.

Secara default, Debugger mencoba melacak operasi asinkron jika framework yang Anda gunakan mendukung pelacakan tersebut. Operasi asinkron dalam Call Stack. Untuk mengetahui informasi selengkapnya, baca Melihat pelacakan tumpukan asinkron.

Global

Bagian ini mencantumkan opsi yang memiliki efek global di DevTools.

Kotak centang. Buka otomatis DevTools untuk pop-up akan membuka DevTools saat Anda mengklik link yang membuka tab baru. Artinya, semua link dengan target=_blank.

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.

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

Video ini pertama-tama menampilkan 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

Bagian ini memungkinkan Anda menyiapkan sinkronisasi setelan antar-perangkat.

Kotak centang. Aktifkan sinkronisasi setelan memungkinkan Anda menyinkronkan setelan DevTools di beberapa perangkat.

Untuk menggunakan setelan ini, aktifkan Sinkronisasi Chrome terlebih dahulu. Untuk informasi selengkapnya, lihat Setelan sinkronisasi.