Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Trentech.id
No Result
View All Result

Ini Dia 10 Trik Firefox Dev Tools yang Kamu Belum Tahu

3 September 2018
in Learn
Ini Dia 10 Trik Firefox Dev Tools yang Kamu Belum Tahu
1.4k
VIEWS

Daftar Isi

  • Mengambil Screenshot Satu Halaman
  • Mengambil Screenshot di Satu Elemen
  • Menghapus kelas CSS di Sebuah Elemen
  • Drag-and-drop di Panel Element
  • Mengambil Reference Elemen Terpilih di Console
  • Shortcut Selector API
  • Gunakan Value dari Operasi Terakhir di Console
  • Referensi Elemen Manapun dari dalam Console
  • Debugging JavaSCript
  • Cari Tahu Font Mana yang Sedang Dipakai
  • Inspect CSS Grid
Berikan rating

Firefox sebagai rival utama Google Chrome juga memiliki Dev Tools yang bisa dipakai oleh web developer dalam bekerja. Meskipun kalah populer dibandingkan Chrome Dev Tools, namun Firefox Dev Tools juga memiliki fitur yang tak kalah keren. Berikut ini beberapa fitur menarik di Firefox Dev Tools yang bisa membantu proses pengembangan web kamu.

Mengambil Screenshot Satu Halaman

Firefox Dev Tools memiliki sebuah fitur dimana kita bisa mengambil screenshot sebuah halaman web secara utuh. Screenshot yang kita ambil akan disimpan di folder Downloads dengan lebar halaman sesuai dengan halaman yang sedang dibuka di browser.

Mengambil Screenshot di Satu Elemen

Selain memungkinkan kita mengambil screenshot untuk satu halaman utuh, Firefox Dev Tools juga memungkinkan kita untuk mengambil screenshot di salah satu elemen di halaman tersebut. Pilih elemen yang ingin diambil gambarnya di Element Inspector, klik kanan, lalu pilih Screenshot Node:

Menghapus kelas CSS di Sebuah Elemen

Terkadang sebuah elemen memiliki beberapa kelas CSS dan kita tidak tahu kelas mana yang memberikan stribut style tertentu. Dengan memilih salah satu elemen dan mengklik tombol .cls di pojok kanan atas panel Rules, kita bisa melihat semua kelas yang dimiliki oleh elemen tersebut dan kita bebas meng-enable/disable salah satu atau semuanya.

Drag-and-drop di Panel Element

Di panel Element kita bisa melakukan drag and drop hampir semua jenis elemen HTML dan mengubah posisinya di halaman yang sedang dibuka.

Mengambil Reference Elemen Terpilih di Console

Pilih salah satu node di panel Element, lalu ketik $0 di jendela console untuk mereferensikan node tersebut.

Shortcut Selector API

Salah fitur yang sangat keren di Firefox Dev Tools Console adalah shortcut untuk melakukan seleksi elemen di halaman HTML:

  • $() adalah shortcut untk document.querySelector()
  • $$() adalah shortcut untuk document.querySelectorAll()

Gunakan Value dari Operasi Terakhir di Console

Dengan menulis $_ kita bisa mengambil return value dari operasi yang sebelumnya dieksekusi di Console.

Referensi Elemen Manapun dari dalam Console

Klik kanan elemen manapun lalu pilih Use in Console. Elemen tersebut akan diberikan sebuah variabel sementara agar bisa dipanggil dari dalam jendela Console.

Debugging JavaSCript

Kita bisa memberikan sebuah breakpoint di source code JavaScript yang kita tulis dari panel Debugger, dan kita juga bisa mengawasi perintah tertentu di dalam file JavaScript tersebut.

Refresh halaman tersebut, maka kode JavaScript akan berhenti di posisi yang sebelumnya sudah di atur.

Cari Tahu Font Mana yang Sedang Dipakai

Atribut font-family memungkinkan kita mengatur daftar font untuk dipakai, apabila font pertama tidak tersedia maka CSS akan memakai font kedua dan seterusnya. Tapi, bagaimana kita bisa tahu saat itu font keberapa yang sedang dipakai? Di panel Rules kita bisa melihat font yang digaris bawah sebagai font yang aktif di halaman tersebut.

Inspect CSS Grid

CSS Grid adalah fitur baru yang masuk ke spesifikasi CSS. Firefox Devv Tools memiliki inspector yang bisa membantu kita melakukan debugging halaman web yang menggunakannya:

Jika menggunakan template area, kita bisa menampilkannya dengan mencentang kotak “Display area names”:

[cp/ap]
Tags: developerfirefoxfirefox dev toolsprogrammerprogramming
Previous Post

Inilah 9 Startup Yang Resmi Bergabung dengan Program Indigo

Next Post

Komika Raditya Dika Bergabung Sebagai Chief Creative Officer Penulis.ID

Angga Permana

Angga Permana

Maju terus sampai TUNTASSS!

Related Posts

coding sambil berdiri

Inilah Alasan Mengapa Seorang Programmer Jangan Terlalu Lama Duduk

19 April 2022
1.5k

Kemampuan untuk berpikir kreatif merupakan salah satu kemampuan yang harus dimiliki oleh programmer manapun. Dengan memiliki kemampuan ini, sang programmer...

film programmer

Programmer Wajib Tonton Film Ini

12 April 2022
1.6k

Dunia pemrograman memang ibarat sebuah teka-teki yang membuat banyak orang penasaran. Tidak sedikit orang yang mencintai dunia ini, namun tidak...

Pengorbanan Seorang Programmer, di Balik Celana Pendek dan Berangkat Siang

Pengorbanan Seorang Programmer, di Balik Celana Pendek dan Berangkat Siang

9 April 2022
1.5k

Bangun lebih siang dari pekerja pada umumnya, berangkat ke kantor ketika jalanan sudah sepi, menggunakan kaus dan celana pendek ke...

Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    902 shares
    Share 360 Tweet 225
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    324 shares
    Share 130 Tweet 81
  • 5 Pertanyaan Seputar Startup yang Wajib Anda Jawab Sebelum Membangun Startup

    135 shares
    Share 54 Tweet 34
  • Kamu Bisa Membuat 6 Hal Ini Dengan Javascript

    132 shares
    Share 53 Tweet 33
  • Kamu Wajib Tahu! 8 Website untuk Mencari Referensi Jurnal Indonesia dan Internasional

    116 shares
    Share 46 Tweet 29
  • Inilah 5 Hacker Indonesia Level Dewa yang Diakui dan Ditakuti Dunia

    155 shares
    Share 62 Tweet 39
  • Upgrade XAMPP? Beginilah Caranya

    227 shares
    Share 91 Tweet 57
  • Ini Dia Cara Membuat Template WordPress Dengan Bootstrap Mudah

    129 shares
    Share 52 Tweet 32
  • Founder Startup Sering Melewatkan Ini Saat Pitching

    128 shares
    Share 51 Tweet 32
  • Sarjana Komputer Tidak Bisa Coding? Apa Kata Dunia?

    165 shares
    Share 66 Tweet 41

About . Contact . Partnership

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.