Biasanya ketika mengedit halaman web kami menggunakan alat pengeditan khusus seperti Adobe Dreamweaver, CoffeeCup, Bluefish atau salah satu alat pengembangan lainnya. Tetapi bagaimana jika kita hanya melakukan brainstorming atau ingin mencoba sesuatu di live page? Kita bisa membuat salinan halaman di alat pilihan kita dan bermain-main dengan itu. Atau kita bisa melakukannya di browser web kita. Tutorial ini akan menunjukkan kepada Anda cara mengedit halaman web di browser Anda.
Disebut sebagai Alat Pengembang, Firefox memanggil fitur Inspect Element sementara Chrome menyebutnya Inspect. Either way, ini adalah cara bagi browser untuk mengintip di balik kemilau desain Anda dan lihat kode yang mendorongnya. Fitur ini cukup terkenal dan banyak digunakan. Apa yang tidak begitu terkenal adalah kemampuan untuk membuat perubahan pada kode tersebut dengan cepat.
Setiap perubahan yang Anda buat tidak akan disimpan dan itu tidak akan mempengaruhi langsung. Jika Anda tidak ingin memuat halaman di alat pengembang Anda, ini adalah cara yang rapi untuk bereksperimen.
Edit halaman web apa saja di browser Anda
Dreamweaver dan alat-alat seperti itu memiliki emulator browser built-in yang mensimulasikan bagaimana desain akan terlihat di browser yang berbeda. Sebagus mereka, mereka tidak selalu tepat dan Anda sering menemukan ketika meluncurkan situs bahwa apa yang tampak fantastis di alat pengembang Anda terlihat sedikit berbeda di peramban mandiri.
Biasanya Anda akan meluncurkan situs di server web internal dan menguji di browser sebelum meluncurkan langsung hanya untuk alasan ini. Jika halaman sudah tayang atau Anda hanya ingin mencoba sesuatu, tidak perlu menyalin dan memuatnya ke alat pengembangan Anda, Anda bisa menggunakan Alat Pengembang browser.
Saya menggunakan Firefox, jadi saya akan menunjukkan cara menggunakannya. Chrome sama saja.
- Buka halaman web yang ingin Anda coba di browser Anda.
- Klik kanan di mana saja pada halaman dan pilih Inspect.
Anda akan melihat halaman Anda dibagi menjadi dua dengan panel baru muncul di bagian bawah dengan beberapa kode di dalamnya. Kode ini adalah kekuatan pendorong dari halaman yang Anda pilih. Elemen halaman yang berbeda dapat diakses dari tab di bagian atas tab bawah. Sebagai contoh, kita melihat Inspektur, Konsol, Debugger, Editor Gaya dan sebagainya di Firefox.
Jika Anda menjalankan kursor Anda di atas garis-garis di panel bawah Anda akan melihat berbagai bagian sorotan halaman web. Baris kode yang Anda gunakan selama sorotan adalah kode yang memengaruhi bagian halaman itu.
- Jika Anda ingin bermain-main dengan bagaimana halaman terlihat, coba Style Editor.
- Jika Anda ingin bermain-main dengan cara halaman bekerja, coba Konsol atau Aksesibilitas.
- Jika Anda ingin menghilangkan bug atau menyelesaikan masalah, gunakan Konsol atau Debugger
Performa berguna untuk SEO di tempat tetapi Memori, Jaringan dan Penyimpanan tidak banyak digunakan.
Ingat, Anda dapat mengacaukan dalam Alat Pengembang sebanyak yang Anda suka dan itu tidak akan mempengaruhi situs. Setiap perubahan hanya dilakukan pada bagaimana halaman ditampilkan di browser Anda sendiri, Anda tidak memengaruhi situs web itu sendiri. Setelah Anda menutup alat, semua perubahan hilang.
Membuat perubahan pada halaman
Sekarang Anda tahu Anda dapat mengubah apa pun yang Anda suka tanpa mempengaruhi situs web yang sebenarnya, mari bersenang-senang sedikit. Temukan elemen pada halaman yang ingin Anda edit. Anda dapat mengubah font, warna font, gambar latar belakang atau apa pun yang Anda suka. Untuk contoh ini, saya akan mengubah warna font judul banner.
- Klik kanan elemen yang ingin Anda ubah dan pilih Inspect.
- Sorot baris dengan 'judul' atau 'H1' sehingga teks disorot di panel atas.
- Arahkan ke dua panel kiri dan temukan warna font.
- Ubah nilainya menjadi sesuatu yang berbeda atau pilih titik warna untuk menggunakan pemilih.
Perubahan Anda akan muncul secara dinamis saat Anda menyelesaikan perubahan. Anda dapat mengubah warna, ukuran, font, latar belakang dan segala sesuatu tentang font. Anda tidak dapat menyimpan pekerjaan tetapi perubahan Anda akan tetap untuk sesi itu.
Anda dapat mengubah segalanya tentang halaman yang ideal jika Anda memiliki ide dan ingin memeriksanya dengan cepat sebelum menjalankan semua aplikasi pengembangan Anda. Yang harus Anda lakukan adalah mengingat perubahan apa yang Anda buat dan di mana Anda tidak dapat menyimpannya di sini. Anda perlu mengambil tangkapan layar atau merekam perubahan dan mereplikasi mereka dalam alat pengembang Anda untuk membuatnya tetap.
Mengedit halaman web di browser Anda adalah cara yang rapi untuk bereksperimen atau bermain-main dengan halaman. Ini juga cara yang baik untuk belajar sedikit tentang pengembangan web tanpa harus membeli alat pengembang yang mahal. Sekarang Anda tahu caranya, pergilah dan mainkan!
