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
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget

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.

Baca lagi

Gaji Programmer Indonesia: Berapa Seharusnya?

Mozilla Temukan Label Privasi pada Aplikasi Populer di Play Store Tidak Sesuai Klaim

Rekomendasi Film untuk Programmer, Menelusuri Dunia Programmer Melalui Film

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

Trentech.id

Trentech.id

Tren Teknologi Indonesia

Related Posts

gaji programmer

Gaji Programmer Indonesia: Berapa Seharusnya?

11 March 2023
1.4k

Gaji programmer di Indonesia menjadi topik yang sering dibicarakan, terutama di kalangan para profesional di bidang teknologi informasi. Seiring dengan...

play store

Mozilla Temukan Label Privasi pada Aplikasi Populer di Play Store Tidak Sesuai Klaim

24 February 2023
1.4k

Mozilla, perusahaan yang terkenal dengan browser web Firefox, baru-baru ini melaporkan bahwa beberapa aplikasi populer di Google Play Store tidak...

rekomenasi film untuk programmer | the social network

Rekomendasi Film untuk Programmer, Menelusuri Dunia Programmer Melalui Film

19 February 2023
1.4k

Programmer memainkan peran penting dalam dunia teknologi saat ini. Mereka menjadi tangan dan pikiran yang menciptakan produk digital dan membuatnya...

Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    1152 shares
    Share 460 Tweet 288
  • Apa Saja Fitur Flipper Zero?

    124 shares
    Share 50 Tweet 31
  • Saham Kapal Induk: Apa Itu dan Apa Keuntungannya?

    182 shares
    Share 73 Tweet 46
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    407 shares
    Share 163 Tweet 102
  • Apa Itu Bisnis Model Kanvas dan Pentingnya untuk Sebuah Startup?

    136 shares
    Share 54 Tweet 34
  • BRI Digital Challenge Mencari Inovasi Terbaik dengan Hadiah Ratusan Juta Rupiah!

    112 shares
    Share 45 Tweet 28
  • Ini Dia 3 Kebiasaan Buruk Anak RPL

    131 shares
    Share 52 Tweet 33
  • 5 Pokemon Terkuat dan Terfavorit

    176 shares
    Share 70 Tweet 44
  • Ternyata Beginilah Cara Kerja Powerbank

    189 shares
    Share 75 Tweet 47
  • Upgrade XAMPP? Beginilah Caranya

    275 shares
    Share 110 Tweet 69

About . Contact . Partnership . Google News

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
  • Login
  • Sign Up
About . Contact . Partnership . Google News

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

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