Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Firefox
Webdesign

9 Hal yang Tidak Anda Ketahui Tentang Dev Tools Firefox

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Baru-baru ini saya memutuskan untuk beralih kembali ke Firefox, telah menjadi pengguna Chrome selama beberapa tahun. Ketika terakhir saya menggunakan Firefox dengan sungguh-sungguh, bekerja dengan dev tools semua tentang ekstensi Firebug. Firefox memang memiliki beberapa tools yang ada di dalamnya, tapi pada saat itu tidak sekuat perangkat dev Firebug atau Chrome. Sekembalinya saya menemukan banyak hal telah berubah!

Dev tools Firefox sendiri telah berjalan lama, dan masih terus ditingkatkan versinya. Mereka sekarang pasti pada tingkat yang sama seperti dev tools lainnya dan membanggakan beberapa fitur fantastis, termasuk beberapa yang tidak akan Anda temukan di tempat lain saat ini.

Jika sudah lama sejak Anda menggunakan Firefox untuk pengembangan juga, lihat fitur ini di Dev Tools Firefox yang mungkin tidak Anda ketahui.

Catatan: beberapa fitur terbaru butuh Firefox Nightly, tapi kebanyakan tersedia sekarang di Firefox biasa.

1. CSS Grid Inspector

CSS Grid mulai mengubah secara radikal bagaimana layout desain web dibuat, dan menjadi lebih baik. Sejauh yang saya tahu, saat ini satu-satunya inspector CSS Grid ditemukan di dev tools Firefox.

Antara lain, grid inspector grid bisa:

  • Identifikasi semua grid pada halaman
  • Beri Anda overlay yang menunjukkan bagaimana grid ditata
  • Tampilkan garis grid dan nomornya
  • Tampilan dinamai grid area
  • Visualisasikan efek transformasi yang diterapkan pada wadah grid

Jika Anda belum bermain dengan CSS Grid, Anda akan menyukainya, dan proses kerjanya pun membuatnya lebih mulus dengan tools grid inspector firefox.

Baca lebih lanjut di hacks.mozilla.org.

2. CSS Animation Inspector

Dev tools Firefox sekarang menyertakan  CSS Animation inspector yang mendalam yang secara otomatis akan mendeteksi animasi pada elemen yang dipilih, serta animasi pada child element. Untuk setiap elemen animasi, ini menunjukkan garis waktu dengan scrubber yang dapat Anda kontrol, dan memberi Anda kemampuan untuk menjeda, mempercepat atau memperlambat animasi.

Dengan animasi yang dipilih Anda bisa memodifikasi propertinya di tab Styles dan melihat efek perubahan Anda secara real time, sebuah fitur yang sangat membantu proses tweaking hal-hal seperti fungsi easing.

Cara animasi digambarkan dalam dev tools juga membantu Anda menentukan susunan setiap animasi, sesuatu yang akan kita masuki secara lebih dalam pada artikel lain segera terbit. Jadi jika Anda menyukai animasi CSS, nantikan terus!

Baca selengkapnya di developer.mozilla.org.

3. Developer Toolbar

Toolbar Developer adalah cara yang sangat praktis untuk mengaktifkan dan mengendalikan fitur yang ada di dev tool dengan cepat. Ini adalah interface command line yang relatif sederhana dimana Anda dapat berinteraksi dengan hampir semua hal yang dapat dilakukan oleh dev tools. Misalnya, Anda dapat menggunakannya untuk mengambil screenshot cepat, untuk mendapatkan pratinjau responsif situs Anda dalam dimensi tertentu, atau untuk mengambil warna dari halaman.

Tekan SHIFT + F2 untuk membuka toolbar, lalu masukkan perintah help untuk mengetahui semua perintah yang Anda miliki.

Baca selengkapnya di developer.mozilla.org.

4. Responsive Design Mode

Mode Desain Responsif membantu Anda mensimulasikan perangkat yang berbeda; dimensi, metode interaksi dan kecepatan koneksi yang khas. Anda dapat memilih dari daftar dimensi yang telah ditentukan, menambahkan definisi ukuran Anda sendiri ke dalam daftar, atau dengan bebas mengubah ukuran pratinjau.

Untuk mengaktifkannya klik ikon Responsive Design Mode pada dev tools. Atau, di Developer Toolbar, masukkan resize on untuk mengaktifkan mode ini, resize to <width> <height> untuk menguji ukuran tertentu, resize off untuk mematikannya lagi, atau resize toggle untuk mengaktifkannya dan aktifkan.

Baca selengkapnya di developer.mozilla.org.

5. Rulers

Perhatikan dimensi desain Anda dengan menggunakan page rules, serupa dengan yang Anda temukan dalam aplikasi desain grafis.

Klik ikon Rulers di bar atas pada dev tools untuk mengaktifkan, atau di Developer Toolbar masukkan perintah rulers.

Baca selengkapnya di developer.mozilla.org.

6. Eyedropper

Dengan mudah mengambil warna dari halaman dengan eyedropper, yang akan memperbesar apa pun yang Anda arahkan ke arah mouse untuk membuat pemetik warna lebih mudah. Anda dapat menentukan format kode warna yang Anda inginkan, atau memilikinya menggunakan format yang ditulis.

Aktifkan dari menu Web Developer, atau di Developer Toolbar masukkan perintah eyedropper.

Baca lebih lanjut di: developer.mozilla.org.

7. Screenshot Tool

Firefox memiliki tool screenshot super mudah; tidak perlu lagi ekstensi screenshot.

Dalam mode normal Anda dapat menggunakan alat screenshot untuk menangkap area drag-to-define, atau Anda dapat mengklik elemen halaman individual untuk men-capture. Bila dalam mode Desain Responsif Anda bisa mengklik tombol kecil di bagian kanan atas pratinjau untuk menangkap tangkapan layar tentang tampilan situs Anda pada perangkat tertentu.

Aktifkan tool screenshot dari toolbar utama di Firefox 57 (nightly), dari kanan atas dev tools, atau dari Developer Toolbar dengan command screenshot.

Baca selengkapnya di developer.mozilla.org.

8. Measure Tool

Ambil pengukuran cepat(quick measure)pada bagian manapun dengan mengaktifkan alat ukur dan seret persegi panjang. Anda akan mendapatkan tinggi, lebar, dan jarak diagonal antara sudut.

9. Dark, Light or Firebug Theme

Dev  tools Firefox dilengkapi dengan tiga tema: tema ringan (putih), tema gelap (biru), dan nice nod dev tools asli dari Firefox, tema Firebug.

Apakah Anda memiliki setup desktop Anda dalam warna terang atau gelap, Anda akan memiliki tema yang sesuai.

Segera mencobanya!

Firefox semakin baik dan lebih baik dari hari ke hari, terutama dengan perubahan besar pada versi 57 yang akan datang. Dan fitur yang ada sekarang di dev tools Firefox membuat Firefox sangat menarik bukan hanya untuk browsing, tapi juga untuk pengembangan.

Jika Anda belum memeriksa Firefox Dev Tools, Cobalah segera!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.