Menggunakan Inspect Elemen Pada Firefox

By | Mei 22, 2012
Menu Inspect Elemen Pada Mozilla Firefox Menggunakan Inspect Elemen pada Firefox
Menu Inspect Elemen Pada Mozilla Firefox

Inspector Element pada Firefox menciptakan review CSS semakin gampang : Pengantar Singkat
Seorang blogger akan sangat mendambakan sekali tampilan blognya yang gampang dicerna oleh mata. Berdasar pengalaman tersebut tentu kita seorang blogger membutuhkan beberapa alat yang dibutuhkan untuk mereview hasil pengolahan dari weblog kita. Hal ini menciptakan mozilla Firefox (selanjutnya kita sebut Firefox) hadir dengan menempatkan tool inspector elemen browser standarnya.

Ruang Lingkup
Pada artikel kali ini merupakan perbaikan dan update dari artikel usang kami yang kami buat secara tergesa-gesa (saat itu) sehingga mungkin banyak pembaca yang belum menerima gambar yang secara utuh, dan mungkin menyesuaikan dengan perubahan pada software yang terbaru. Software yang kami gunakan dalam penulisan artikel ini yaitu Mozilla Firefox 56.3 Sehingga nanti ketika ada beberapa perbedaan pada ketika anda membaca artikel ini mungkin dikarenakan softwarenya yang berbeda.

Selanjutnya, kami juga akan memberikan bahwa yang dimuat dalam artikel kali ini hanya sebatas pada pembahasan pengambilan dan penerapan Cascading Style Sheet (CSS, CSS merupakan sebuah instruksi pemrograman tampilan suatu web)  dalam blog saja. Sehingga pembahasan yang akan kita bahas tidak terlalu banyak. Khususnya untuk penggunaan sebagai alat preview bagi blog pembaca yang ingin di edit. Jadi, kita review dulu memakai fitur ini sebelum ke edit template-nya.

Baca Juga : Menggunakan Inspeksi tool pada Google Chrome (update Nov 2017)

Sekarang kita mulai bahas inspect element ini. namun, saya 
Kita kenalan dulu dengan toolbarnya. Oke?

Menu Inspect Elemen Pada Mozilla Firefox Menggunakan Inspect Elemen pada Firefox
Gambar 1 : Tampilan Menu Inspeksi pada Firefox

Sebelah bawah yaitu sajian html dan tipologi html (Bagian yang berbilah besar). Pada bab yang kami beri bundar merah (pojok kiri atas) yaitu sebuah tool yang berjulukan “select element with mouse (return)”, tool inilah yang nantinya akan kita gunakan untuk mengetahui. elemen sebuah halaman web (sebagai tool untuk memilih) letak sebuah CSS suatu element dalam instruksi html.

Bilah sebelah kanan merupakan bab yang nantinya akan menampilkan CSS dari sebuah laman yang kita pilih. (kita akan bahas dibawah sehabis perkenalan). Sedangkan pada bab bawah merupakan urutan dari rangkaian instruksi HTML yang sedang kita pilih (urutan daerah elemen yang kita pilih) Jika anda resah menemukan urutan letak sebuah elemen maka gunakan bab ini

Untuk mengetahui CSS yang terlihat dalam sebuah blog secara lebih gampang anda sanggup menentukan sajian Style Editor pada pilihan di atas, sehingga nanti akan tampil menyerupai berikut ini:

Menu Inspect Elemen Pada Mozilla Firefox Menggunakan Inspect Elemen pada Firefox
Gambar 2 : Tampilan Style Editor ketika dipilih (bilah kanan akan berubah bentuk menjadi media

Setelah kita mengubah dari mode Inspector menjadi mode Style Editor maka kita akan melihat tampilan menyerupai diatas, Bilah kanan yang semula merupakan menampilkan rules saja berubah menjadi media rules yang artinya akan menampilkan elemen ketika halaman tersebut ditampilkan pada layar dengan bentang yang diinginkan.

Sebelum mengedit template blog JANGAN LUPA Beckup Template sebagai cadangan ketika terjadi error sehabis proses editing selesai 

Praktik mengedit Menggunakan Inspector Elemen pada Mozilla Firefox

  1. Buka halaman web pembaca yang ingin di edit
  2. Silahkan pembaca buka satu halaman lagi. Pembaca eksklusif masuk pada halaman edit HTML blog pembaca.
    Catatan : Jika pembaca mengeditnya lewat software editor HTML maka buka software tersebut dan siapkan file tamplatenya, pola : Komodo Editor, Notepade++
  3. klik kanan pada web/log yang mau diedit tadi.
  4. Klik Inspect Element (Q)
  5. Gunakan select element with mouse untuk menyorot element blog yang mau di edit.
    (pada gambar 1 yang kami lingkari dengan warna merah)
Perhatikan Gambar berikut biar anda citra sedikit:
Gambar 3 : Penampilan elemen ketika sudah dilakukan pemilihan dengan select elemen
Misalkan pada pola diatas kita akan mengedit template blog ini dengan memakai Inspector Elemen. Setelah kita selesai memilih, ternyata bab h1.post-title yang akan kita edit (Perhatikan Gambar dengan latar warna kuning).
  • Dengan memakai klik drag (klik tahan dan seret) anda copy goresan pena yang diberi later kuning dan cari pada template yang akan diedit.
    (tergantung template anda alasannya yaitu ini contoh).
  • Setelah anda selesai menemukan tag tersebut pada tempalate, langkah selanjutnya,
  • Mengubah volume dari CSS yang dimunculkan inspect elemen
Menu Inspect Elemen Pada Mozilla Firefox Menggunakan Inspect Elemen pada Firefox
Gambar 4 : Tampilan CSS h1.post-title

Selalu mengamati perubahan tampilan ketika mengedit CSS


Penjelasan gambar diatas:
h1.post-title yaitu tag dari CSS pada blog (saya) yang menampilkan bentuk dan ukuran judul artikel pada blog saya. Cara memakai untuk mengubahnya adalah:
  • Tanda Chack list ketika dihilangkan artinya akan menghilangkan fungsi dari CSS tersebut
  • Pembaca sanggup merubah volume CSS (huruf warna biru tua) diganti sesuai cita-cita dengan mengeklik pada volume yang mau diubah.
  • Pembaca juga sanggup menambah tag CSS yang diinginkan dengan cara mengeklik sekali pada bab dalam tanda { klik 1x diantara tanda kurawal } tambahkan dengan tag yang diinginkan
  • Setelah dirasa selesai (editing) dengan memakai inspektor elemen
  • Klik drag (tahan dan tarik) instruksi CSS hasil perubahan kemudian di copy
  • Masukkan pada tamplate blog anda (cari dulu bab yang tadi diubah dalam template). Setelah ketemu kodenya pastekan instruksi hasil editing anda.
  • Simpan template dan lihat hasil perubahannya

Bagaimana cara mengetahui perubahan pada template responsif?

Pada template responsif tentu perubahan tampilan pada tiap layar akan mempengaruhi perubahan layout dari tampilan tamplate, oleh alasannya yaitu itu Inspeksi Elemen juga menyediakan fitur penampilan halaman responsif. Caranya sebagai berikut :

Menu Inspect Elemen Pada Mozilla Firefox Menggunakan Inspect Elemen pada Firefox
Gambar 5 : Menuresponsif layar

Bagian yang kami beri warna dasar kuning yaitu bab yang akan merubah ukuran layar dari browser Firefox. Pengaturan ukuran layarnya ada di sebelah pojok kiri atas. Silahkan anda atur-atur saja sendiri.


Kesimpulan
Mozilla Firefox sebagai browser yang pernah merajai aplikasi browser seingat kami yaitu pelopor dari sajian inspeksi elemen. sehingga berdasarkan evaluasi kami. Penggunaan inspeksi elemen di Firefox lebih gampang dan menarik daripada milik browser lain. Namun, kadang kala ketidak konsisten dari penampilan sebuah web (kalau mau konsisten terlalu berat filenya) akan mempengaruhi pula tampilan dari tiap-tiap browser sehingga tool ini sangat sanggup membantu dalam menyelaraskan tampilan website.

Sekali lagi saya ingatkan Jangan lupa beckup template dulu sebelum melaksanakan editing. atau sanggup juga editing dilakukan di HTML editor menyerupai komodo editor. sekian artikel tentang memakai Inspect element untuk mengedit blog.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *