Beberapa ciri DevTools silang penyemak imbas yang mungkin tidak anda ketahui

Alat pemaju adalah senjata harian untuk pemaju depan.

Untuk kesederhanaan, "Chromium" akan digunakan dalam artikel untuk merujuk kepada semua pelayar berasaskan kromium seperti Chrome, Edge, dan Opera. Alat pemaju mereka sangat konsisten dalam fungsi.

Dom Tree Node Search

Menghadapi nod Dom bersarang di lapisan, mencari nod sasaran boleh memakan masa dan susah payah. Gunakan CMD F (MACOS) atau Ctrl F (Windows) untuk cepat mencari pokok DOM.

menyokong pemilih CSS (mis.

) dan ekspresi XPath (mis. <code>.red) Carian. <code>//div/h1

Dalam penyemak imbas Chromium, carian akan secara automatik melompat ke nod yang sepadan, yang boleh menyusahkan apabila mengendalikan pertanyaan panjang atau pokok DOM yang besar. Anda boleh mematikan ciri ini dengan pergi ke

Tetapan (F1) → Keutamaan → Global → Enter semasa mencari → disable .

Selepas mencari nod, klik kanan pada nod dan pilih "Tatal untuk melihat" untuk tatal ke kawasan tontonan.

mengakses nod dari konsol

Alat pemaju menyediakan pelbagai cara untuk mengakses nod DOM secara langsung dari konsol:

Sebagai contoh,

boleh mengakses nod DOM yang dipilih sekarang. Penyemak imbas kromium berjalan lebih jauh dan membolehkan akses kepada nod dalam pemilihan sejarah menggunakan <code><code>, <code>, <code>, dan lain -lain.

Klik kanan pada nod dan pilih Copy → salin js path , dan anda boleh menyalin jalur nod sebagai ungkapan JavaScript (<code>document.querySelector borang), yang mudah untuk mengakses konsol.

Cara lain ialah menyimpan nod sebagai pemboleh ubah sementara. Klik kanan pada nod dan pilih pilihan yang sepadan:

• Chromium : klik kanan → "Simpan sebagai pembolehubah global"
• firefox : klik kanan → "Gunakan dalam konsol"
• safari : klik kanan → "elemen rekod"

Bayangkan elemen dengan tag

Alat pemaju boleh membantu menggambarkan unsur -unsur dengan atribut tertentu dengan memaparkan tag di sebelah nod. Tags boleh diklik, dan jenis tag yang disediakan oleh pelayar yang berbeza juga berbeza.

Dalam safari , terdapat butang penanda dalam bar alat panel elemen untuk menukar penglihatan penanda tertentu. Sebagai contoh, jika nod mempunyai pengisytiharan <code>display: grid atau <code>display: inline-grid CSS yang digunakan, tanda grid dipaparkan di sebelahnya. Mengklik pada tanda akan menyerlahkan kawasan grid, saiz trek, nombor baris, dan lain -lain pada halaman.

Tag Firefox yang kini disokong oleh alat pemaju disenaraikan dalam dokumentasi sumber Firefox. Sebagai contoh, tanda tatal menunjukkan elemen yang boleh ditatal. Mengklik pada tanda menyoroti elemen yang menyebabkan limpahan dan memaparkan tanda limpahan di sebelahnya.

Dalam penyemak imbas Chromium , anda boleh klik kanan pada mana-mana nod dan pilih "tetapan tag ..." untuk membuka bekas dengan semua tag yang tersedia. Sebagai contoh, elemen dengan <code>scroll-snap-type akan mempunyai tag snap tatal di sebelahnya, dan mengklik pada tag itu akan menukar tambah overlay snap tatal pada elemen itu.

screenshot

Semua pelayar arus perdana kini menyokong tangkapan skrin dari alat pemaju dan menyediakan kaedah baru tangkapan skrin halaman penuh.

Klik kanan pada nod DOM yang anda mahu tangkap dan pilih pilihan untuk menangkap nod (tag penyemak imbas yang berbeza adalah berbeza).

Ulangi operasi ini pada nod HTML untuk mengambil tangkapan skrin halaman penuh. Harus diingat bahawa Safari mengekalkan ketelusan warna latar belakang elemen, sementara Chromium dan Firefox menangkapnya sebagai latar belakang putih.

Anda juga boleh mengambil tangkapan skrin "responsif" untuk menangkap halaman dengan lebar viewport tertentu. Kaedah operasi penyemak imbas yang berbeza adalah seperti berikut:

• Chromium : CMD Shift M (MacOS) atau Ctrl Shift M (Windows). Atau klik ikon peranti di sebelah ikon cek.
• Firefox : Alat → Alat Penyemak → "Corak Reka Bentuk Responsif"
• safari : pembangunan → "Masukkan mod reka bentuk responsif"

Petua Chrome: Periksa tahap teratas

Chrome membolehkan anda memvisualisasikan dan memeriksa unsur-unsur peringkat atas seperti kotak dialog, makluman, atau kotak modal. Apabila elemen ditambah kepada <code>#top-layer, tanda peringkat atas dipaparkan di sebelahnya. <code>

Atas ialah kandungan terperinci Beberapa ciri DevTools silang penyemak imbas yang mungkin tidak anda ketahui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!