Beberapa Fitur DevTools Lintas-Browser yang Mungkin Tidak Anda Ketahui | Trik CSS – Beragampengetahuan

Saya menghabiskan banyak waktu dengan DevTools, dan saya yakin Anda juga melakukannya. Kadang-kadang saya bahkan melompat di antara mereka, terutama saat men-debug masalah lintas-browser. DevTools sangat mirip dengan browser itu sendiri — tidak semua fitur di DevTools satu browser sama atau didukung di DevTools browser lain.

Namun ada beberapa fitur DevTools yang dapat dioperasikan, dan bahkan beberapa fitur yang kurang dikenal, yang akan saya bagikan kepada Anda.

Demi singkatnya, saya menggunakan “Chromium” dalam artikel ini untuk merujuk ke semua browser berbasis Chromium, seperti Chrome, Edge, dan Opera. Banyak dari DevTools ini menyediakan fitur dan fungsi yang sama persis satu sama lain, jadi ini hanyalah singkatan saya untuk merujuk semuanya sekaligus.

Cari simpul di pohon DOM

Terkadang pohon DOM penuh dengan simpul yang bersarang di dalam simpul lain, dll.Ini membuatnya sangat sulit untuk menemukan objek persis yang Anda cari, tetapi Anda dapat dengan cepat mencari pohon DOM Cmd + F (macOS) atau Ctrl + F (Jendela).

Selain itu, Anda dapat mencari menggunakan pemilih CSS yang valid, seperti .redatau menggunakan XPath, mis. //div/h1.

Di browser Chromium, fokus secara otomatis beralih ke node yang cocok dengan kriteria pencarian saat Anda mengetik, yang dapat mengganggu jika Anda bekerja dengan kueri penelusuran yang panjang atau pohon DOM yang besar.Untungnya, Anda dapat melakukan ini dengan pergi ke mempersiapkan (F1) → prioritas → Global → Cari sambil mengetik → dengan disabilitas.

Setelah Anda menemukan node di pohon DOM, Anda dapat menggulir halaman untuk membawa node ke viewport dengan mengklik kanan node dan memilih “Scroll to View”.

akses simpul dari konsol

DevTools menyediakan berbagai cara untuk mengakses node DOM langsung dari konsol.

Misalnya, Anda dapat menggunakan $0 Akses node yang dipilih saat ini di pohon DOM. Peramban Chromium melangkah lebih jauh dan memungkinkan Anda untuk mengakses node yang dipilih dalam urutan kronologis terbalik dari pilihan historis, menggunakan: $1, $2, $3DLL.

Hal lain yang memungkinkan browser Chromium untuk Anda lakukan adalah menyalin jalur node sebagai ekspresi JavaScript dalam format document.querySelector Dengan mengklik kanan pada node dan memilih menyalin → salin jalur JSyang kemudian dapat digunakan untuk mengakses node di konsol.

Berikut cara lain untuk mengakses node DOM langsung dari konsol: sebagai variabel sementara. Opsi ini tersedia dengan mengklik kanan pada node dan memilih opsi. Opsi ini memiliki tab berbeda di setiap DevTools browser:

• kromium: Klik kanan → “Simpan sebagai Variabel Global”
• firefox: Klik kanan → “Gunakan di Konsol”
• Safari: Klik kanan → “Elemen Log”

Visualisasikan elemen dengan lencana

DevTools dapat membantu memvisualisasikan elemen yang cocok dengan properti tertentu dengan menampilkan lencana di samping node. Lencana dapat diklik, dan browser yang berbeda menawarkan berbagai lencana yang berbeda.

ada Safari, ada tombol Lencana di bilah alat panel Elemen yang dapat digunakan untuk mengalihkan visibilitas lencana tertentu.Misalnya, jika sebuah simpul memiliki a display: grid atau display: inline-grid Deklarasi CSS diterapkan padanya, a grid Lencana ditampilkan di sebelahnya. Mengklik lencana akan menyorot area kisi, ukuran trek, nomor baris, dan lainnya di halaman.

Lencana yang saat ini didukung firefoxDevTools tercantum dalam dokumentasi sumber Firefox.Misalnya, a scroll Lencana menunjukkan elemen yang dapat digulir.Mengklik lencana menyoroti elemen yang menyebabkan luapan overflow di samping lencana.

ada kromium browser, Anda dapat mengklik kanan node mana saja dan memilih “Pengaturan lencana…” Membuka wadah yang mencantumkan semua lencana yang tersedia.Misalnya, elemen dengan scroll-snap-type akan ada satu scroll-snap Lencana di sebelahnya, klik di atasnya, akan beralih scroll-snap overlay elemen.

tangkapan layar

Kami dapat mengambil tangkapan layar dari beberapa DevTools untuk sementara waktu, tetapi sekarang tersedia di semua alat, dan menyertakan cara baru untuk mengambil tangkapan layar dari seluruh halaman.

Prosesnya dimulai dengan mengklik kanan pada simpul DOM untuk menangkap. Kemudian pilih opsi untuk menangkap node, yang akan diberi label berbeda tergantung pada DevTools mana yang Anda gunakan.

Ulangi langkah yang sama pada html node untuk mengambil tangkapan layar satu halaman penuh. Namun, ketika Anda melakukan ini, perlu dicatat bahwa Safari menjaga transparansi warna latar belakang elemen — Chromium dan Firefox menangkapnya sebagai latar belakang putih.

Ada pilihan lain! Anda dapat mengambil tangkapan layar halaman yang “responsif”, yang memungkinkan Anda menangkap halaman pada lebar viewport tertentu. Seperti yang Anda duga, setiap browser memiliki cara berbeda untuk sampai ke sana.

• kromium: Cmd + Shift + M (macOS) atau Ctrl + Shift + M (Jendela). Atau klik ikon Perangkat di sebelah ikon Periksa.
• firefox: Alat → Alat Peramban → “Mode Desain Responsif”
• Safari: Pengembang → “Masuk ke Mode Desain Responsif”

Kiat Chrome: Periksa tingkat atas

Chrome memungkinkan Anda memvisualisasikan dan memeriksa elemen tingkat atas seperti dialog, peringatan, atau kata modal.Ketika sebuah elemen ditambahkan ke #top-layeritu mendapat top-layer lencana di sebelahnya, mengekliknya akan langsung melompat ke penampung tingkat atas </html> Label.

Urutan elemen di top-layer Kontainer mengikuti urutan susun, artinya yang terakhir berada di atas.klik reveal Lencana melompat kembali ke node.

Tip Firefox: Lompat ke ID

Firefox menautkan elemen yang mereferensikan atribut ID ke elemen target di DOM yang sama dan menggarisbawahinya.menggunakan CMD + Click (macOS) atau CTRL + Click (Windows) ) melompat ke elemen target dengan pengidentifikasi.

bungkus

Banyak hal, bukan? Yang keren adalah Chromium, Firefox, dan Safari semuanya mendukung beberapa fitur DevTools yang sangat berguna. Apakah Anda menyukai fitur lain yang kurang dikenal yang didukung oleh ketiganya?

Saya memiliki beberapa sumber daya di sekitar saya untuk tetap mendapatkan berita terbaru. Saya pikir saya akan membagikannya di sini: