Beberapa Fitur DevTools Lintas-Browser yang Mungkin Tidak Anda Ketahui

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

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

Demi singkatnya, saya menggunakan "Chromium" untuk merujuk ke semua browser berbasis Chromium, seperti Chrome, Edge, dan Opera, dalam artikel tersebut. Banyak DevTools di dalamnya menawarkan fitur dan kemampuan yang sama persis satu sama lain, jadi ini hanya singkatan saya untuk merujuk semuanya sekaligus.

Node pencarian di pohon DOM

Terkadang pohon DOM penuh dengan simpul yang bersarang di simpul yang bersarang di simpul lain, dan seterusnya. Itu membuatnya cukup sulit untuk menemukan yang tepat yang Anda cari, tetapi Anda dapat dengan cepat mencari menggunakan pohon DOM Cmd + F (macOS) atau Ctrl + F (jendela).

Selain itu, Anda juga dapat mencari menggunakan pemilih CSS yang valid, seperti .red, atau menggunakan XPath, seperti //div/h1.

Di browser Chromium, fokus secara otomatis beralih ke simpul yang cocok dengan kriteria pencarian saat Anda mengetik, yang dapat mengganggu jika Anda bekerja dengan kueri penelusuran yang lebih panjang atau pohon DOM yang besar. Untungnya, Anda dapat menonaktifkan perilaku ini dengan menuju ke Settings (F1) → preferensi → Aksi → Telusuri saat Anda mengetik → Disable.

Setelah Anda menemukan node di pohon DOM, Anda dapat menggulir halaman untuk membawa node ke dalam viewport dengan mengklik kanan pada anggukan, dan memilih "Scroll to view".

Akses node dari konsol

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

Misalnya, Anda bisa menggunakan $0 untuk mengakses node yang dipilih saat ini di pohon DOM. Browser Chromium mengambil satu langkah lebih jauh dengan memungkinkan Anda mengakses node yang dipilih dalam urutan kronologis terbalik dari pemilihan historis menggunakan, $1, $2, $3, Dll

Hal lain yang memungkinkan browser Chromium untuk Anda lakukan adalah menyalin jalur node sebagai ekspresi JavaScript dalam bentuk document.querySelector dengan mengklik kanan pada node, dan memilih Copy → Salin jalur JS, yang kemudian dapat digunakan untuk mengakses node di konsol.

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

• Khrom: Klik kanan → “Simpan sebagai variabel global”
• Firefox: Klik kanan → “Gunakan di Konsol”
• Safari: Klik kanan → “Log Element”

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.

In 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 or 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 di FirefoxDevTools terdaftar di Firefox dokumen sumber. Misalnya, a scroll lencana menunjukkan elemen yang dapat digulir. Mengklik lencana menyoroti elemen yang menyebabkan luapan dengan overflow lencana di sebelahnya.

In Khrom browser, Anda dapat mengklik kanan pada node mana saja dan memilih “Pengaturan lencana…” untuk membuka wadah yang mencantumkan semua lencana yang tersedia. Misalnya, elemen dengan scroll-snap-type akan memiliki scroll-snap lencana di sebelahnya, yang di klik, akan beralih scroll-snap overlay pada elemen itu.

Mengambil tangkapan layar

Kami telah dapat mengambil tangkapan layar dari beberapa DevTools untuk sementara waktu sekarang, tetapi sekarang tersedia di semuanya dan menyertakan cara baru untuk mengambil gambar satu halaman penuh.

Prosesnya dimulai dengan mengklik kanan node DOM yang ingin Anda tangkap. Kemudian pilih opsi untuk menangkap node, yang diberi label berbeda bergantung pada DevTools mana yang Anda gunakan.

Ulangi langkah yang sama pada html node untuk mengambil tangkapan layar satu halaman penuh. Namun, ketika Anda melakukannya, perlu dicatat bahwa Safari mempertahankan transparansi warna latar belakang elemen — Chromium dan Firefox akan 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.

• Khrom: 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: Kembangkan → “Masuk ke Mode Desain Responsif”

Kiat Chrome: Periksa lapisan atas

Chrome memungkinkan Anda memvisualisasikan dan memeriksa elemen lapisan atas, seperti dialog, peringatan, atau modal. Ketika sebuah elemen ditambahkan ke #top-layer, ia mendapat a top-layer lencana di sebelahnya, yang saat diklik, akan membawa Anda ke wadah lapisan atas yang terletak tepat setelah </html> menandai.

Urutan unsur-unsur dalam top-layer container mengikuti urutan susun, artinya yang terakhir ada di paling atas. Klik reveal lencana untuk melompat kembali ke node.

Kiat Firefox: Langsung ke ID

Firefox menautkan elemen yang mereferensikan atribut ID ke elemen targetnya di DOM yang sama dan menyorotnya dengan garis bawah. Menggunakan CMD + Click (macOS) atau CTRL + Click (Windows) ) untuk melompat ke elemen target dengan pengidentifikasi.

Membungkus

Cukup banyak hal, bukan? Sungguh luar biasa bahwa ada beberapa fitur DevTools yang sangat berguna yang didukung di Chromium, Firefox, dan Safari. Apakah ada fitur lain yang kurang dikenal yang didukung oleh ketiganya yang Anda sukai?

Ada beberapa sumber daya yang saya simpan dekat untuk tetap mengikuti apa yang baru. Saya pikir saya akan membaginya dengan di sini:

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/