Inspect Element, juga dipanggil Inspect, ialah alat serba boleh yang dibina dalam penyemak imbas. Bertentangan dengan tanggapan salah popular, ia sama berharganya untuk pereka bentuk dan pembangun sebagai pengguna biasa. Sebagai pengguna biasa, anda boleh menggunakan Inspect Element pada peranti macOS untuk mengetahui lebih lanjut tentang halaman web, mengekstrak beberapa maklumat atau data daripada halaman web atau mengubah suai kandungan halaman web, antara lain.
Teruskan membaca, dan saya akan menunjukkan kepada anda cara menggunakan Inspect Element pada Mac anda.
Jadual Kandungan
Apakah Elemen Periksa?
Jika anda sentiasa tertanya-tanya apa yang menjadikan tapak web berfungsi, termasuk tapak web yang anda gunakan sekarang, berikut ialah analogi yang boleh membantu. Fikirkan tapak web sebagai bangunan: struktur dan rangka kerja dibuat dengan HTML dan JavaScript, manakala CSS menambah cat dan hiasan.
Inspect Element membolehkan anda mengupas lapisan untuk melihat pelan tindakan mana-mana halaman web. Tetapi terdapat lebih banyak lagi, dan anda boleh menggunakan Inspect Element untuk melakukan banyak perkara lain, seperti:
- Ralat nyahpepijat dalam kod: Anda boleh menyemak dan menyelesaikan isu dalam HTML, CSS atau JavaScript dengan cepat.
- Uji perubahan reka bentuk: Anda juga boleh mencuba reka letak, warna dan fon.
- Menganalisis prestasi tapak web: Anda boleh menyemak responsif tapak web dan memahami gelagat pemuatan.
- Salin elemen: Anda boleh merebut teks, imej atau gaya dengan mudah daripada tapak web selagi anda tidak melanggar apa-apa.
- Ubah suai kandungan buat sementara waktu: Anda boleh mengedit teks, imej atau elemen lain yang akan mencerminkan dalam masa nyata.
- Memahami SEO: Anda boleh menganalisis teg meta, pengepala (H1, H2, H3…), dan peletakan kata kunci.
Bagaimana untuk mengakses Inspect Element pada pelayar yang berbeza
Memandangkan anda mempunyai idea asas tentang perkara yang boleh dilakukan Inspect Element, mari lihat cara menggunakannya pada Mac anda merentas penyemak imbas yang berbeza. Anda boleh menggunakan Inspect Element merentas pelayar popular seperti Safari, Chrome dan Firefox. Saya akan tunjukkan caranya.
Pada Safari
- Buka Safari.
- Klik Safari di bar menu atas dan pilih Tetapan.
- Pergi ke tab Lanjutan dan pastikan untuk mendayakan pilihan Tunjukkan Ciri untuk Pembangun Web.
- Pergi ke halaman web yang ingin anda analisis atau ubah suai, Control-klik pada mana-mana elemen dan pilih Inspect Element.
Pada Chrome
- Buka Chrome dan pergi ke halaman web yang ingin anda periksa.
- Control-klik di mana-mana pada halaman dan pilih Inspect. Sebagai alternatif, anda boleh menggunakan pintasan papan kekunci Command+Option+I untuk memaparkan panel DevTools.
Pada Firefox
- Buka Firefox dan pergi ke tapak web yang ingin anda periksa.
- Control-klik pada mana-mana elemen dan pilih Inspect. Atau gunakan Command+Option+I untuk memaparkan Alat Pembangun.
Cara menggunakan Inspect Element untuk mengubah suai halaman web
Seperti yang telah disebutkan, anda boleh menggunakan Inspect Element untuk mengedit kandungan tapak web buat sementara waktu, yang boleh berguna untuk percubaan reka bentuk, menguji perubahan atau hanya menarik gurauan. Begini caranya.
Edit teks pada halaman web
- Buka halaman web dan pilih teks yang ingin anda ubah suai.
- Control-klik teks dan pilih Inspect.
- Anda kini akan melihat kod HTML untuk elemen yang dipilih diserlahkan dalam panel Alat Pembangun. Klik padanya, taip teks baharu anda dan tekan Return.
Perubahan anda akan muncul serta-merta di halaman web. Walau bagaimanapun, ambil perhatian bahawa ia adalah sementara.
Tukar imej pada halaman web
- Control-klik imej yang anda ingin ubah suai dan pilih Inspect.
- Dalam panel Alat Pembangun, cari teg dengan atribut src. (Di sini, src membayangkan sumber imej.)
- Gantikan URL dalam atribut src dengan URL imej baharu yang ingin anda paparkan.
- Tekan Return, dan imej akan dikemas kini serta-merta.
Ubah suai warna dan gaya
- Control-klik pada elemen yang gayanya ingin anda ubah dan pilih Inspect.
- Navigasi ke bahagian Gaya dalam panel Alat Pembangun.
- Edit sifat CSS seperti warna, saiz fon atau warna latar belakang terus dalam panel. Anda boleh menyemak Kod Warna HTML untuk mendapatkan kod warna HTML dengan cepat.
Gantikan hiperpautan
- Control-klik pada hiperpautan dan pilih Inspect.
- Cari teg dalam HTML dengan atribut href.
- Tukar nilai href kepada URL lain dan tekan Return.
- Klik pautan yang diubah suai untuk menguji destinasi baharu.
Menandatangani…
Seperti yang baru anda lihat, mudah untuk menggunakan Inspect Element pada Mac untuk melakukan pelbagai manipulasi dan operasi pada halaman web. Sudah tentu, anda mungkin berasa takut melihat kod tapak web pada mulanya, tetapi apabila anda menggunakan alat itu lebih banyak dan lebih banyak lagi, anda akan berasa selesa dan dapat melakukan lebih daripada apa yang telah kami bincangkan dalam panduan.
Soalan Lazim
Tidak, perubahan hanya boleh dilihat pada bahagian anda dan hilang apabila halaman dimuat semula. Mereka tidak menjejaskan tapak web sebenar atau pengguna lain.
Anda boleh menggunakan Inspect Element untuk mengetahui cara tapak web berfungsi atau bereksperimen dengan reka bentuk. Walau bagaimanapun, menyalin kod tapak web, memintas sekatan atau pancingan data mungkin menyalahi undang-undang dan boleh menyebabkan anda menghadapi masalah, bergantung pada tempat tinggal anda.
Memadamkan elemen dalam Inspect Element hanya menyembunyikannya buat sementara waktu. Anda boleh memuat semula halaman untuk memulihkan semuanya kepada keadaan asal.
Baca lebih lanjut:
- Safari lwn. Chrome: Penyemak imbas manakah yang lebih baik untuk iPhone dan Mac?
- Bagaimana untuk menukar penyemak imbas lalai pada Mac
- Emulator iOS Terbaik untuk PC
