Penulis posting yang kami terjemahkan menggunakan alat pengembang Chrome hampir setiap hari. Di sini dia ingin berbicara tentang fitur yang sedikit diketahui dari alat-alat ini. Dia mengatakan bahwa jika dia tahu tentang mereka sebelumnya, maka mereka pasti akan berguna baginya.
1. Cara sederhana untuk mendapatkan tautan ke elemen apa pun yang sedang dipelajari
Alat pengembang Chrome memungkinkan Anda mendapatkan tautan ke elemen apa pun yang sedang diselidiki di konsol. Untuk melakukan ini, bekerja di panel
Elements , klik kanan pada elemen dan pilih
Store as global variable dari menu drop-down.
Cara sederhana untuk mendapatkan tautan ke elemen apa pun yang sedang diselidiki2. Membuat ekspresi interaktif yang terpasang pada konsol
Di alat pengembang, Anda dapat membuat ekspresi interaktif yang terpasang di bagian atas konsol, yang nilainya selalu diperbarui. Prosedur untuk membuat ekspresi seperti itu ditunjukkan pada gambar berikut. Jika Anda tahu bahwa elemen-elemen tertentu pada halaman harus diperbarui, fitur ini dapat sangat berguna untuk mengamatinya.
Ekspresi Interaktif di Chrome3. Simulasikan koneksi internet yang lambat
Tab
Network pada Alat Pengembang Chrome memungkinkan Anda untuk mensimulasikan koneksi peramban ke berbagai jaringan. Fitur ini dapat sangat berguna untuk mengevaluasi perilaku halaman dalam situasi di mana dibutuhkan beberapa detik untuk memuat.
Menjelajahi halaman yang mensimulasikan berbagai cara untuk terhubung ke Internet4. Menonaktifkan cache, menyimpan log saat berpindah antar halaman
Saya harus menghadapi banyak masalah yang ternyata bukan kesalahan. Penyebabnya adalah salah memuat kode yang di-cache. Untuk menghilangkan masalah seperti itu, Anda dapat sepenuhnya menonaktifkan caching menggunakan kemampuan tab
Network . Ini adalah kotak centang
Disable cache . Harap dicatat bahwa cache tidak berfungsi hanya ketika bilah alat pengembang terbuka.
Menyimpan log adalah fitur lain yang bermanfaat karena konsol tidak dihapus ketika halaman yang sedang diselidiki dimuat ulang. Aktifkan kotak centang fitur ini
Preserve log pada tab
Network .
Menonaktifkan cache dan menyimpan log5. Membuat tangkapan layar
Alat Pengembang Chrome mencakup alat tangkapan layar bawaan. Untuk menggunakannya, Anda perlu, dengan jendela alat terbuka, terapkan kombinasi tombol
Ctrl+Shift+P , dan kemudian masukkan
screenshot kata kunci di bidang yang muncul dan pilih metode yang diinginkan untuk membuat tangkapan layar.
Membuat tangkapan layar dari bilah alat pengembang6. Perintah console.log () jauh dari satu-satunya cara untuk mencatat sesuatu ke konsol
Semua orang menggunakan perintah
console.log() untuk mencatat data debug. Namun, perintah ini tidak menghabiskan kemampuan logging. Secara khusus, perintah
console.warn() dan
console.error() siap membantu pengembang.
Perintah-perintah ini menampilkan pesan dari berbagai tingkat logging ke konsol - ini adalah, masing-masing, peringatan dan pesan kesalahan. Mereka disorot dalam berbagai warna dan ikon. Pesan yang ditampilkan di konsol dengan perintah yang berbeda dapat difilter.
Console.warn () dan console.error ()Anda dapat menggunakan perintah
console.table() untuk menampilkan beberapa data terstruktur dengan mudah diformat dalam format tabel.
Command console.table ()Kemungkinan untuk bekerja dengan konsol tidak terbatas pada perintah-perintah ini. Misalnya, ada juga perintah seperti
console.assert() dan
console.group() .
Di sini Anda dapat menemukan kisah terperinci tentang tim-tim semacam itu.
7. Konstruk $ _ mengembalikan ekspresi terkomputasi terbaru
Konstruk
$_ dapat digunakan untuk mengembalikan nilai operasi sebelumnya yang dilakukan di konsol.
Menggunakan konstruk $ _8. Perintah $ () adalah singkatan untuk document.querySelector ()
Anda dapat menggunakan perintah
$() di konsol untuk memilih item dengan cepat. Fitur-fitur jQuery di sini, omong-omong, tidak diterapkan, meskipun pada pandangan pertama mungkin tampak bahwa ini tidak begitu.
Demikian pula, perintah
$$() adalah singkatan untuk
document.querySelectorAll() .
Menggunakan $ ()9. Mengaktifkan status elemen, seperti melayang-layang atau fokus, di panel Gaya
Jika selama mempelajari suatu elemen perlu untuk mempelajari perilakunya dalam keadaan
hover , ini bisa menjadi tugas yang menakutkan, karena untuk menerjemahkan elemen ke dalam keadaan ini, perlu untuk memiliki penunjuk tetikus di atasnya. Solusi untuk masalah ini dapat difasilitasi dengan mengambil keuntungan dari kemampuan panel
Styles . Di sini Anda dapat memaksa elemen untuk ditransfer ke negara-negara seperti
hover atau
focus .
Paksa item ke negara10. Kombinasi menekan tombol Ctrl dan mengklik mouse membantu untuk menemukan definisi aturan CSS
Pernahkah Anda perlu tahu di mana aturan CSS dijelaskan? Tugas ini sangat mudah diselesaikan dengan menekan tombol
Ctrl dan mengklik aturan yang menarik bagi Anda. MacOS menggunakan
Cmd bukan
Ctrl .
Ctrl + klik - cari lokasi definisi aturan CSSPembaca yang budiman! Apa yang akan Anda tambahkan ke daftar fitur yang kurang dikenal dari alat pengembang Chrome di sini?
