Biasanya apabila mengedit halaman web kami menggunakan alat pengeditan tertentu seperti Adobe Dreamweaver, CoffeeCup, Bluefish atau salah satu alat pembangunan lain. Tetapi bagaimana pula jika kita hanya membuat brainstorming atau ingin mencuba sesuatu di halaman hidup? Kami boleh membuat salinan halaman dalam alat pilihan kami dan bermain-main dengannya. Atau kami boleh melakukannya dalam pelayar web kami. Tutorial ini akan menunjukkan kepada anda cara mengedit halaman web dalam penyemak imbas anda.
Dirujuk sebagai Alat Pembangun, Firefox memanggil ciri Elemen Periksa semasa Chrome memanggilnya Periksa. Sama ada cara, ia adalah satu cara untuk pelayar mengintip di belakang kilat reka bentuk anda dan melihat kod yang memacunya. Ciri ini agak terkenal dan digunakan banyak. Apa yang tidak begitu terkenal adalah keupayaan untuk membuat perubahan pada kod itu dengan cepat.
Sebarang perubahan yang anda buat tidak akan disimpan dan ia tidak akan menjejaskan secara langsung. Jika anda tidak mahu memuatkan halaman dalam alat pembangun anda, ini adalah cara yang baik untuk mencuba.
Edit mana-mana halaman web dalam penyemak imbas anda
Dreamweaver dan alat seperti itu mempunyai emulator pelayar terbina dalam yang menyerupai reka bentuk yang kelihatan seperti dalam pelayar yang berbeza. Sebaik sahaja mereka, mereka tidak selalunya tepat dan anda sering mendapati apabila melancarkan tapak yang kelihatan hebat dalam alat pemaju anda kelihatan sedikit berbeza dalam penyemak imbas mandiri.
Biasanya anda akan melancarkan laman web ini di pelayan web dalaman dan menguji dalam pelayar sebelum melancarkan secara langsung untuk alasan ini. Sekiranya halaman sudah hidup atau anda hanya mahu mencuba sesuatu, tidak perlu menyalin dan memuatkannya ke alat pembangunan anda, anda hanya boleh menggunakan Alat Pembangun pelayar.
Saya menggunakan Firefox supaya saya akan menunjukkan kepada anda cara menggunakannya. Chrome adalah sama walaupun.
- Buka laman web yang ingin anda eksperimen dalam penyemak imbas anda.
- Klik kanan mana-mana sahaja di halaman dan pilih Periksa.
Anda harus melihat halaman anda terbahagi menjadi dua dengan pane baru muncul di bahagian bawah dengan beberapa kod di dalamnya. Kod ini adalah daya penggerak halaman yang anda pilih. Unsur halaman yang berbeza dapat diakses dari tab di bahagian atas tab yang lebih rendah. Sebagai contoh, kita melihat Inspektor, Konsol, Penyahpepijat, Editor Gaya dan sebagainya di Firefox.
Sekiranya anda menjalankan kursor anda melalui baris di panel bawah, anda akan melihat bahagian yang berbeza dari halaman web yang diserlahkan. Barisan kod yang anda sedang aktif semasa highlight adalah kod yang mempengaruhi bahagian halaman tersebut.
- Sekiranya anda mahu bermain-main dengan bagaimana halaman kelihatan, cuba Editor Gaya.
- Jika anda mahu bermain-main dengan cara halaman berfungsi, cuba Konsol atau Kebolehaksesan.
- Sekiranya anda mahu memadam pepijat atau menyelesaikan masalah, gunakan Konsol atau Debugger
Prestasi berguna untuk SEO di tapak tetapi Memori, Rangkaian dan Penyimpanan tidak banyak digunakan.
Ingat, anda boleh mengelirukan dalam Alat Pembangun sebanyak yang anda suka dan tidak akan menjejaskan laman web ini. Apa-apa perubahan hanya dibuat untuk bagaimana halaman dipaparkan dalam penyemak imbas individu anda, anda tidak menjejaskan laman web itu sendiri. Sebaik sahaja anda menutup alat itu, semua perubahan hilang.
Membuat perubahan pada halaman
Sekarang anda tahu anda boleh mengubah apa sahaja yang anda suka tanpa menjejaskan laman web sebenar, mari kita bersenang-senang. Cari elemen pada halaman yang ingin anda edit. Anda boleh menukar font, warna fon, imej latar belakang atau apa sahaja yang anda suka. Untuk contoh ini, saya akan menukar warna fon kepala tajuk banner.
- Klik kanan elemen tepat yang ingin anda ubah dan pilih Periksa.
- Serlahkan garis dengan sama ada 'tajuk' atau 'H1' supaya teks diserlahkan di anak tetingkap sebelah atas.
- Navigasi ke dua panel kiri dan cari warna fon.
- Tukar nilai kepada sesuatu yang berbeza atau pilih titik warna untuk menggunakan pemilih.
Perubahan anda akan muncul secara dinamik semasa anda menyelesaikan perubahan. Anda boleh menukar warna, saiz, fon, latar belakang dan segala-galanya mengenai fon. Anda tidak boleh menyimpan kerja tetapi perubahan anda akan kekal untuk sesi itu.
Anda boleh mengubah segala-galanya tentang halaman yang sesuai jika anda mempunyai idea dan ingin menyemaknya dengan cepat sebelum menembusi semua aplikasi pembangunan anda. Apa yang anda perlu lakukan adalah mengingati perubahan yang anda buat dan di mana anda tidak boleh menyimpannya di sini. Anda perlu mengambil tangkapan skrin atau merakam perubahan dan meniru mereka dalam alat pembangun anda untuk menjadikannya tetap.
Mengedit halaman web dalam pelayar anda adalah cara yang baik untuk mencuba atau bermain-main dengan halaman. Ia juga cara yang baik untuk belajar sedikit tentang pembangunan web tanpa harus membeli alat pemaju mahal. Sekarang anda tahu bagaimana, pergi dan bermain!
