Kami menggunakan Chrome DevTools tentang

1. Edit elemen HTML dengan cepat
2. Perluas semua elemen anak
3. Relokasi inspektur
4. Pencarian elemen DOM
5. Palet
6. Banyak kursor
7. Encode gambar base64
8. Peralihan kelas semu
9. Pemilihan kolom
10. Salin permintaan untuk CURL
11. Keyboard layar
12. Tangkapan layar seluruh halaman
13. Emulasi perangkat sentuh
14. Fitur yang berguna

Seperti namanya, Chrome DevTools, atau inspektur web, adalah alat yang dirancang untuk pengembang web dan orang-orang yang terkait dengannya. Inspektur web memungkinkan Anda melakukan hal berikut:

• Periksa kebenaran tampilan.
• Lacak eksekusi skrip dalam JavaScript.
• Lihat aktivitas jaringan.

Saat menulis artikel ini saya gunakan Kenari - versi Chrome, tempat fitur baru diuji, yang kemudian jatuh ke versi stabil Chrome.

Untuk memulai inspektur, Anda dapat mengklik kanan di mana saja pada halaman dan memilih "Lihat kode barang", Anda juga dapat cukup menekan Ctrl + Shift + C.

Edit elemen HTML dengan cepat

Mari kita mulai dengan yang paling sederhana: elemen pengeditan.

Cara memeriksa:

• Pilih tab Elemen.
• Pilih elemen HTML apa pun di dalam panel.
• Klik dua kali pada tag dan ubah, misalnya, nama tag.

Ketika pengeditan selesai, tag penutup akan secara otomatis diperbarui.

Perluas semua elemen anak

Cara memeriksa:

• Buka panel Elemen.
• Pilih elemen dan, sambil menahan Alt, klik panah di sebelah kiri elemen.

Relokasi inspektur

Panel inspektur dapat ditekan ke bagian bawah jendela browser dan ke sisi kanan. Misalnya, lokasi panel di sebelah kanan nyaman ketika bekerja pada monitor layar lebar. Selain itu, panel inspektur dapat ditempatkan di jendela terpisah dan, misalnya, dipindahkan ke monitor lain.

Cara memeriksa:

• Ctrl + Shift + D - Mengganti Lokasi

Pencarian elemen DOM

Mungkin tidak banyak untuk siapa ini akan menjadi penemuan, tetapi di tab "Elemen" Anda dapat mencari berdasarkan DOM.

Cara memeriksa:

• Tekan Ctrl + F dan masukkan permintaan pencarian yang diajukan.

Palet

Pilih warna dari palet

Pilihan warna di Chrome versi terbaru telah mengalami beberapa perubahan: menambahkan dua palet untuk memudahkan pemilihan warna.

Banyak kursor

Gerakkan kursor dan, sambil menahan Ctrl, klik di area yang diinginkan untuk menambahkan kursor. Anda dapat membatalkan tindakan menggunakan Ctrl + U. Secara pribadi, saya tidak pernah berguna.

Encode gambar base64

Cara memeriksa:

• Beralih ke panel Jaringan.
• Pilih gambar
• Klik kanan pada gambar dan pilih ""

Peralihan kelas semu

Kelas pseudo mencerminkan keadaan elemen dan posisi relatifnya.

Cara memeriksa:

• Klik kanan pada elemen di panel Elemen dan pilih pseudo-kelas di daftar Force Element State.
• Anda juga dapat memilih pseudo-class di sisi kanan panel Elements.

Pemilihan kolom

Cara memeriksa:

• Buka panel "Sumber".
• Pilih file apa saja.
• Pilih teks dengan menahan Alt.

Memilih kolom juga berfungsi saat HTML diedit di panel Elemen.

Salin permintaan untuk CURL

Setiap permintaan di tab Network dapat disalin dan kemudian ditempelkan ke terminal untuk dieksekusi menggunakan curl.

Keyboard layar

Jika profil Nexus 5X dipilih, Anda dapat melihat tampilan situs saat keyboard di layar aktif.

Chrome DevTools: Keyboard Di Layar

Tangkapan layar seluruh halaman

Ambil gambar seluruh halaman sangat sederhana. Hanya butuh ...

1. Buka Inspektur.
2. Pergi ke konsol.
3. Tekan Ctrl + Shift + P
4. Ketik "tangkapan layar"
5. Pilih "Tangkap tangkapan layar ukuran penuh"

Tangkapan layar seluruh halaman

Emulasi perangkat sentuh

Anda juga dapat mensimulasikan beberapa sensor:

• Layar sentuh
• Koordinat untuk geolokasi
• Akselerometer

Cara mencoba:

• Pilih panel Elemen.
• Tekan "Esc" dan pilih "Emulation> Sensors".

Fitur yang berguna

kunci dan nilai

Fungsi kunci dan nilai memungkinkan Anda untuk mengeluarkan kunci atau nilai objek ke konsol, masing-masing. Menampilkan nilai kunci dan objek secara terpisah