Cara menggunakan Inspect Element pada Mac untuk mengubah suai halaman web

33

Bagaimana untuk memeriksa elemen pada mac

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.


Bagaimana untuk memeriksa elemen pada mac

Teruskan membaca, dan saya akan menunjukkan kepada anda cara menggunakan Inspect Element pada Mac anda.

Menjadi Master iOS 18:

Dapatkan eksklusif kami eBook iOS 18 📚 secara PERCUMA apabila anda mendaftar untuk surat berita kami di bawah.

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

  1. Buka Safari.
  2. Klik Safari di bar menu atas dan pilih Tetapan.
    Mengakses tetapan penyemak imbas Safari pada Mac
  3. Pergi ke tab Lanjutan dan pastikan untuk mendayakan pilihan Tunjukkan Ciri untuk Pembangun Web.
    Tab lanjutan dalam tetapan Safari pada Mac
  4. Pergi ke halaman web yang ingin anda analisis atau ubah suai, Control-klik pada mana-mana elemen dan pilih Inspect Element.

Pada Chrome

  1. Buka Chrome dan pergi ke halaman web yang ingin anda periksa.
  2. 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.
    Chrome DevTools pada Mac
    Nota

    Langkah ini juga berfungsi pada penyemak imbas berasaskan Chromium seperti Microsoft Edge, Opera dan Pelayar Arc.

    Pada Firefox

    1. Buka Firefox dan pergi ke tapak web yang ingin anda periksa.
    2. 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

    1. Buka halaman web dan pilih teks yang ingin anda ubah suai.
    2. Control-klik teks dan pilih Inspect.
      Mengakses pilihan Inspect dalam Chrome pada Mac
    3. Anda kini akan melihat kod HTML untuk elemen yang dipilih diserlahkan dalam panel Alat Pembangun. Klik padanya, taip teks baharu anda dan tekan Return.
      Menyemak sifat paparan dalam Chrome pada Mac.

    Perubahan anda akan muncul serta-merta di halaman web. Walau bagaimanapun, ambil perhatian bahawa ia adalah sementara.


    Mengubah nilai elemen pada halaman web dalam Chrome

    Tukar imej pada halaman web

    1. Control-klik imej yang anda ingin ubah suai dan pilih Inspect.
    2. Dalam panel Alat Pembangun, cari teg dengan atribut src. (Di sini, src membayangkan sumber imej.)
      Menavigasi ke atribut src dalam Alat Pembangun Chrome pada Mac
    3. Gantikan URL dalam atribut src dengan URL imej baharu yang ingin anda paparkan.
    4. Tekan Return, dan imej akan dikemas kini serta-merta.
      Menukar imej pada halaman web dalam Chrome

    Ubah suai warna dan gaya

    1. Control-klik pada elemen yang gayanya ingin anda ubah dan pilih Inspect.
    2. Navigasi ke bahagian Gaya dalam panel Alat Pembangun.
      Mengakses bahagian Gaya dalam Alat Pembangun Chrome pada Mac
    3. 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.
      Menukar warna teks teks pada halaman web dalam Chrome pada Mac buat sementara waktu
    1. Control-klik pada hiperpautan dan pilih Inspect.
    2. Cari teg dalam HTML dengan atribut href.
    3. Tukar nilai href kepada URL lain dan tekan Return.
    4. Klik pautan yang diubah suai untuk menguji destinasi baharu.
    Petua Pro

    Ambil tangkapan skrin suntingan anda sebelum memuat semula halaman, kerana semua perubahan adalah sementara dan akan kembali apabila halaman dimuat semula.

      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

      Adakah Inspect Element akan mengubah cara tapak web mencari pengguna lain?

      Tidak, perubahan hanya boleh dilihat pada bahagian anda dan hilang apabila halaman dimuat semula. Mereka tidak menjejaskan tapak web sebenar atau pengguna lain.

      Adakah menyalahi undang-undang untuk menggunakan Inspect Element di tapak web yang bukan milik saya?

      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.

      Apakah yang berlaku jika saya memadamkan elemen secara tidak sengaja semasa menggunakan Inspect Element?

      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
      Menjadi Master iOS 18:

      Dapatkan eksklusif kami eBook iOS 18 📚 secara PERCUMA apabila anda mendaftar untuk surat berita kami di bawah.