10 Tools Keren Untuk Developer Firefox yang Harus Kamu Coba

remote-debugging-overview

Firefox merupakan “browser developer” yang memiliki banyak tools besar yang membuat pekerjaan kita lebih mudah. Kamu akan menemukan kolek tools pada Firefox Developer Tools di web page. Serta dapat mencoba developernya di Edition Browser yang memiliki banyak fitur dan tools.

Kami telah mendaftarkan tools praktis yang mungkin kamu sukai dari koleksi tools developer. Kami juga akan menunjukkan tools apa yang bisa kamu gunakan sebagai GIF dan cara mengaksesnya:

  1. Control Horizontal dan Vertical

Firefox memiliki tools control yang menampilkan horizontal dan vertical dengan unit pixel di page. Tools ini berguna untuk mengatur elemen pagemu.

Untuk mengaksesnya kamu klik ☰>Developer> Developer Toobar (Shortcut: Shift+F2). Kemudian di bawah toolbar akan muncul jenis control dan tekan enter.

Untuk membuatnya selalu muncuk si menu, buka “Toolbox Options” di bagian bawah Toolbox yang tersedia “Turning to Page Control” dan beri centang.

  1. Gunakan CSS Untuk Screenshot

Meskipun firefox toolbar memungkinkanmu mengambil screenshot page, kami lebih menyarankan kamu menggunakan meted selector CSS. Karena CSS dapat menangkap screenshot dari elemen individual maupun elemen yang terlihat pada mouse (seperti menu).

Caranya kamu buka ☰>Developer>Developer Toolbar (shortcutshift+F2), maka toolbar dan jenis screenshot/ selector akan muncul di bawah page.

Agar terlihat di windows, klik “Toolbox Options” di bawah tombol Toolbox yang tersedia, kemudian pilih “ Screenshot Full Page”. Firefox memiliki built-in color picker atau “pipet”. Cara mengaksesnya buka Developer>Pipet.

Untuk bisa muncul di windows developer, klik “Toolbox Options” di bawah Toolbox tersedia selection check kemudian centang “The color of the page”.

  1. Page Layout 3D

Menampilkan web page di 3D akan membantu menyelesaikan masalah layout. Kamu akan melihat unsur yang berbeda setiap lapisan dalm tampilan 3D. Untuk melihat web page dalam 3D, klik “View 3D” button tools.

Agar bisa muncul di windows tools developer tools, klik “Toolsbox Options” kemudian klik “Buttons Toolbox”, terakhir pilih dan centang “layout 3D”.

  1. Browser Style

Browser style terdiri dari 2 jenis yaitu, browser default style yang menugaskan setiap elemen dan browser style tertentu. Dengan melihat browser style yang dapat mendiagnosa masalah override dalam stylesheetmu, serta untuk mengetahui dari browser style.

Cara mengangksesnya “Browser Style” melalui menu ☰>Developer>Inspectur, kemudian klik “Computed” di bagian kanan pilih centang “Browser style”.

Untuk membuka “Inspector” buka tab melalui shortcut Ctrl+Shift+C kemudian akses “Browser Style”.

  1. Nonaktifkan JavaScript

Pada praktek terbaik, pembaca yang kompatibilitas selalu menyarankan kode situs web sedemikian rupa. Fungsinya, agar tidak terhalang oleh lingkungan javascript. untuk menguji lingkungan, kamu dapat menonaktifkan JavaScript pada saat kamu bekerja.

Untuk menonaktifkan JavaScript klik “Toolbox Options” pilih “advanced setting”, kemudian centang “Nonaktifkan JavaScript”.

  1. Sembunyikan CSS Style Dari Page

Sama halnya dengan JavaScript, kekhawatiran aksesibilitas dalam merancang situs page sedemekian rupa masih harus dibaca tanpa style. Untuk melihatnya tanpa style, kamu dapat menonaktifkan di developer tools.

Untuk menghilangkan CSS Style (Inline, internal atau eksternal) diterapkan pada web page, klik symbol eyes dari stylesheet yang tercantum dalam “style editor”. Klik “back” ke tampilan aslinya. Untuk mengakses “style editor” buka ☰>Developer>Style Editor (Shortcut:Shift+F7).

  1. Preview Respond-an Permintaan konten HTML

Tools develepoer firefox memiliki pilihan untuk melihat respon jenis konten HTML. Ini akan membantu developer dalam melihat setiap 302 pengalihan dan memeriksa apakah informasi yang diberikan di respon atau tidak.

Cara mengakses “Preview” buka ☰>Developer>Network (shortcut: Ctrl+Shift+Q) kemudian buka web page pilihanmu atau reload page. Lalu, klik permintaan yang diinginkan (respon HTML) dari daftar permintaan dan klik “Preview” di bagian kanan.

  1. Preview Web Page Pada Ukuran Layar yang Berbeda

Untuk menguji web page yang responsive, gunakan “Responsive Design View”, dapat diakases di ☰>Developer>Responsive Design View atau dengan shortcut: Ctrl+Shift+M.

Untuk membuat “Design Modus Responsive” klik “Toolbox Options” bagian bawah akan tersedia button toolbox, kemudian centang “Design Mode Responsive”.

  1. Jalankan Page Pada JavaScript

Untuk mengeksekusi javascript pada web page gunakan “Scratchpad” pada tools firefox. Untuk mengakses “Scratchpad” dengan buka ☰>Developer>Scratchpad atau Shift+F4.

Agar buttons “Scratchpad”muncul di windows, kamu bisa gunakan klik “Toolsbox Options” dan kemudian centang “Scratchpad”.

 

Baca juga yang ini Lhooo .....

  • Web Scraping: Ini Dia Baik Buruknya Untuk Website dan Bisnis Web scraping  adalah teknik yang digunakan untuk mengambil isi sebuah halaman web secara spesifik, misalnya link gambar, isi berita atau sejenisnya. Bagaimana melakukan “Scraped” konten? Ada dua cara untuk melakukan “scraped” konten: 1. Manual – ini adalah […]
  • 9 Tools Kreatif Untuk Jualan Di Facebook! Facebook tercatat memiliki pendapatan tertinggi pada kuartal terbaru dengan basis pengguna aktif setiap harinya lebih dari satu miliar, ini bahkan diluar ekspektasi metrik engagement and financial. Facebook terus membuat terobosan baru di bidang produk untuk berbagai bisnis, termasuk […]
  • Memaksimalkan Pencarian Di Web Usaha Online-Mu Sebagai Peluang Penjualan Ketika pembeli mencari informasi di situs e-commerce, mereka berbagi wawasan tentang apa yang mereka harapkan dari situs dan apa yang mereka pikirkan tentang produk. E-commerce marketers bisa belajar dari wawasan ini yang berpotensi meningkatkan konversi dan efektivitas pemasaran. Untuk […]
  • 12 Tips Menulis di Clikable Search Ad Copy Bagi seorang marketer, menggarap konten menjadi bagian penting setiap harinya. Dimulai dari mengonsep ebook sampai mempromosikan webinar, tentu seorang marketer membutuhkan kreativitas dalam menulis yang bisa menarik minat pengunjung. Namun terkadang terdapat kendala dalam menemukan kata […]
  • Ini Dia 8 Hal yang Harus Diperhatikan dalam Black Friday & Cyber Monday! Black Friday dan Cyber Monday adalah sebuah event tahunan di Amerika Serikat dimana hampir semua toko-toko (baik offline dan online) memberikan diskon/potongan harga besar-besaran dalam satu hari. Kini, Black Friday dan Cyber Moday menjadi salah satu hari berbelanja terbesar di dunia. […]
  • 4 Provider Cloud Computing Terbaik Untuk Bisnis Kecil Sebagai web host, suka atau tidak akan banyak pilihan untuk start-up untuk mengefektifitaskan biaya. Senjata seperti IBM dan Amazon akan menawarkan secara gratis dari biaya awal bantuan Cloud Computing. Ini menjadi kekhawatiran bagi perusahaan web hosting karena bisa menyerang dari 2 […]

Tinggalkan Balasan

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

Gambar CAPTCHA

*