Fitur Bermanfat Firefox Yang Sering Terlewatkan Untuk Ngeblog

By
Ketika membuat website atau blog, sering biasanya kita menggunakan tools ekternal yang dapat digunakan secara online untuk membantu membuat, memperbaiki atau mengecek sebuah blog. Seperti mengecek responsive design, mengecek performa blog, atau hanya melihat kode warna html.

Dari beberapa fungsi tools online tersebut, sebenarnya ada tools yang sudah tersedia di brwoser firefox. Namun mungkin beberapa fitur ini sering terlewatkan padahal sering digunakan dengan menggunakan tools online. Dengan menggunakan fitur berikut kita tidak perlu menggunakan tools online, namun bisa memanfaatkan tools dari firefox bahkan dalam status offline.

Kesemua tools berikut ini ada di browser firefox melalui menu Tools dan submenu Web Developer.

Inspector (Ctrl+Shift+C)

Sama halnya seperti page source (Ctrl+U) , dengan inspector kita bisa melihat struktur html dari sebuah website. Kelebihanya inspector bisa menyorot area yang menggunakan html tertentu. Arahkan kursor mouse ke bagian html tertentu di inspector, dan browser akan otomatis menyorot area yang menggunakan html tersebut.

Style Editor (Shift+F7)

Style Editor untuk melihat kode css yang digunakan pada halaman yang sedang aktif pada sebuah website.

Network (Ctrl+Shift+Q)

Fungsinya untuk melihat performance sebuah blog, termasuk besarnya ukuran blog, test waktu loading website, dan cache. Bahkan kita juga bisa meilihat file javascript atau css apa saja yang dijalankan oleh sebuah blog, berapa besar ukuran file dan berapa lama waktu yang dibutuhkan untuk loading masing-masing file tersebut. Khusus untuk fungsi network ini, kita hanya dapat menggunakanya ketika online.

network firefox tools

 Responsive Design View (Ctrl+Shift+M)


Untuk meilhat dan test apakah sebuah website memiliki desain yang responsive. Dengan tools ini bisa dijadikan alternatif selain mengecek responsive website atau blog menggunakan tools online. Dengan menggunakan tools offline firefox ini, mengecek responsive design lebih cepat karena tidak ada loading.

responsive design view firefox tools offline

 Eyedropper


Fungsinya untuk melihat kode warna html dari setiap warna yang ada pada browser firefox. Mirip seperti jika menggunakan eyedropper pada photoshop. Cukup arahkan kursor ke warna tertentu dan klik untuk copy warna.

eyedropper firefox tools

Scratchpad (Shift+F4)

Bisa menjadi media untuk menuliskan atau membuka kode javascript dan menjalankanya.

0 komentar:

Post a Comment

Terbaru