Semua yang Perlu Anda Ketahui Tentang Alat Pengembang Firefox

Firefox Developer Edition adalah versi khusus Firefox yang dibuat khusus untuk para pengembang. Ini menampilkan semua fitur Firefox terbaru bersama dengan sejumlah alat pengembang spesialis. Di sini saya akan memberikan panduan fitur-fiturnya sehingga Anda tahu semua yang perlu diketahui tentang Alat Pengembang Firefox.

Antarmuka pengguna

Setelah menginstal Firefox Developer Edition, Anda akan melihat tampilannya sedikit berbeda dengan toolbar Firefox standar. Firefox telah mengambil pendekatan yang lebih berpusat pada pengembang dalam mendesain bilah alatnya, membuatnya lebih sempit dalam tampilan dan dihiasi dengan lebih banyak tombol secara default.

Tema default untuk Alat Pengembang Firefox adalah gelap, yang kemungkinan merupakan hasil pengujian pengguna. Namun jika Anda tidak menyukai tema gelap, Anda selalu dapat menonaktifkan tema edisi pengembang dengan membuka Menu > Sesuaikan .

Membuat Alat

Firefox Developer Edition hadir dengan sejumlah alat pembuatan, yang dirancang untuk situs web dan aplikasi web pembuat. Di bawah ini saya telah memberikan ikhtisar alat dan manfaatnya sehingga Anda tidak perlu mencari informasi ini.

Papan penggaris

Alat ini memberi kesempatan kepada pengembang web untuk bereksperimen dengan kode JavaScript. Di lingkungan yang disediakan oleh Scratchpad Anda dapat menulis, menjalankan, dan memeriksa hasil kode yang berinteraksi dengan halaman saat ini.

Untuk membuka Scratchpad cukup tekan Shift F4 atau masuk ke menu Web Developer dan klik Scratchpad. Ini akan membuka jendela di mana Anda dapat menulis kode Anda. Setelah selesai, klik Execute > Run dan kode akan berjalan di tab saat ini.

Editor Gaya

Editor Gaya memungkinkan pengembang web untuk melihat dan mengedit semua lembar gaya dengan halaman terkait. Anda juga dapat membuat lembar gaya baru dari awal dan menerapkannya ke halaman, serta mengimpor lembar gaya yang ada dan menerapkannya ke halaman saat ini.

Untuk membuka Editor Gaya, buka menu Pengembang Web dan klik Editor Gaya . Firefox Developer Toolbox kemudian akan muncul di bagian bawah browser dengan Style Editor siap digunakan.

Editor bayangan

Menggunakan Editor Shader di Firefox itu sederhana. Pengembang dapat sepenuhnya melihat dan mengedit shader fragmen dan vertex seperti yang digunakan oleh WebGL. Dan bagi mereka yang tidak tahu, WebGL secara cerdas menggunakan JavaScript (melalui API) untuk merender grafik 2D dan 3D secara langsung melalui browser Firefox, sementara tidak memerlukan penggunaan plugin.

Untuk menggunakan Editor Shader, Anda harus mengaktifkannya terlebih dahulu. Untuk melakukannya, pergi ke pengaturan Toolbox dan kemudian centang kotak di sebelah 'Shader Editor'. Shader Editor kemudian akan ditampilkan di toolbar Firefox. Klik di atasnya dan Anda akan dapat membukanya.

Editor Audio Web

Web Audio Editor API memungkinkan pengembang untuk membuat konteks audio. Pengembang perlu membuat node audio dengan menyediakan:

• Sumber audio
• Node yang melakukan transformasi
• Catatan mewakili tujuan yang dipilih untuk streaming audio.

Editor Audio Web akan memeriksa aspek audio halaman dan memberikan representasi visualnya dalam grafik. Ini memungkinkan pengembang untuk memeriksa fungsionalitas dan operasi dan memeriksa apakah semua node terhubung dengan benar. Pengembang dapat mengedit dan memeriksa properti simpul AudioParam, serta properti lainnya juga.

Seperti Shader Editor, Web Audio Editor harus diaktifkan secara manual dan bukan merupakan pengaturan default. Mengaktifkannya mudah: cukup kembali ke Setelan Alat Pengembang lalu centang kotak di samping 'Audio Web'. Anda kemudian akan melihat bahwa ada tampilan tab tambahan di dalam toolbar Firefox Toolbox. Cukup klik pada tab ini dan halaman akan dimuat dari mana Anda dapat membuat konteks audio.

Alat Debug

Alat debugging Firefox dirancang untuk memeriksa, menjelajahi, dan men-debug situs web dan aplikasi web. Di bawah ini saya telah menguraikan fitur utama dari beberapa alat ini dan manfaatnya.

Inspektur Halaman

Alat Page Inspector memungkinkan pengembang untuk memeriksa dan mengedit kode HTML dan CSS halaman web. Dengan menggunakan alat ini, pengembang dapat menyelidiki halaman melalui versi yang dimuat secara lokal atau melalui target jarak jauh.

Membuka Page Inspector itu mudah. Jika Anda memiliki elemen yang dipilih, Anda cukup mengklik kanan pada elemen dan kemudian memilih 'Inspect Element.' Atau, Anda dapat pergi ke Menu Pengembang Web dan kemudian klik pada opsi Inspektur. Page Inspector kemudian akan muncul di bagian bawah browser Anda.

Konsol Web

Alat ini mencatat semua informasi yang terkait dengan halaman web, seperti permintaan jaringan, JavaScript, CSS, kesalahan dan peringatan keamanan, peringatan kesalahan, dan pesan informasi. Ini juga memungkinkan Anda untuk berinteraksi dengan halaman web dengan menggunakan JavaScript.

Konsol Web dirancang untuk menggantikan Konsol Kesalahan lama, yang awalnya merupakan bagian dari Alat Pengembang Firefox. Sementara Konsol Kesalahan menyediakan daftar besar kesalahan dari beberapa halaman, Konsol Web hanya akan menampilkan informasi yang terkait dengan halaman web tertentu, sehingga membuatnya lebih berguna.

Untuk membuka Konsol Web, buka submenu Pengembang Web di Menu Firefox dan klik 'Konsol Web'. Anda juga dapat menggunakan pintasan Ctrl Shift K. Toolbox kemudian akan muncul di bagian bawah browser dengan 'Konsol' diaktifkan.

Debugger

Alat Firefox Debugger memberikan kesempatan kepada pengembang web untuk memeriksa dan memodifikasi kode JavaScript Anda. Ini juga dapat digunakan untuk mengidentifikasi bug. Dengan menggunakan Debugger, Anda dapat men-debug kode secara lokal di Firefox, atau dari jarak jauh di perangkat Firefox OS atau Firefox untuk Android.

Untuk membuka debugger, buka submenu Pengembang Web di menu utama Firefox dan klik 'Debugger'. Atau Anda dapat menekan Ctrl Shift S dan kotak alat akan muncul di bagian bawah browser Anda dengan Debugger diaktifkan dan siap digunakan.

Monitor Jaringan

Monitor Jaringan dirancang untuk menunjukkan kepada Anda semua permintaan jaringan berbeda yang dibuat oleh Firefox, berapa lama waktu yang dibutuhkan setiap permintaan, dan detail setiap permintaan. Buka Menu Pengembang Web > Jaringan untuk mengaktifkan alat. Anda harus menyegarkan halaman untuk melihat permintaan.

Di Monitor Jaringan Anda akan dapat melihat garis waktu permintaan dan memfilter konten menurut jenisnya. Ada juga alat analisis kinerja, yang dapat Anda gunakan untuk melihat berapa lama waktu yang dibutuhkan browser untuk mengunduh berbagai bagian situs web Anda. Untuk menjalankan alat ini, cukup klik ikon stopwatch di bilah alat di bagian bawah Monitor Jaringan.

Inspektur Penyimpanan

Jika Anda ingin mengetahui tentang berbagai jenis penyimpanan yang dapat digunakan halaman web, Anda harus mengaktifkan alat Storage Inspector. Seperti saat ini, Storage Inspector dapat digunakan untuk memeriksa Cookie, Penyimpanan Lokal, Penyimpanan Sesi, dan IndexedDB.

Storage Inspector menyediakan tampilan penyimpanan hanya-baca. Namun Firefox telah mengatakan bahwa mereka sedang mengembangkan alat ini sehingga pengembang dapat mengedit konten penyimpanan mereka di masa mendatang.

Untuk membuka Storage Inspector, buka Submenu Web Developer dan klik Storage Inspector. Atau Anda dapat menekan Shift + F9 untuk menggunakan pintasan keyboard.

Bilah Alat Pengembang

Bilah Alat Pengembang dirancang untuk memberikan akses baris perintah pengembang web ke sejumlah Alat Pengembang Firefox. Selain menggunakan perintah yang diatur oleh Firefox, yang dapat Anda temukan di sini, Anda juga dapat menambahkan perintah Anda sendiri menggunakan Scratchpad. Ini dapat diubah menjadi add-on sehingga orang lain juga dapat menggunakannya.

Buka Developer Toolbar dengan menekan Shift + F2. Atau Anda dapat pergi ke Menu Pengembang Web dan klik pada Bilah Alat Pengembang.

Alat Debugging Lainnya – Tampilan 3D, Eyedropper, iFrames

Alat debugging lain yang disertakan dalam paket Alat Pengembang Firefox meliputi:

• Tampilan 3D: Ini memberi Anda tampilan 3D dari blok HTML dan konten bersarang Anda
• Eye Dropper: Ini memungkinkan Anda memilih warna tertentu dari halaman dan menyalinnya ke clipboard)
• Memilih iFrames: Ini memungkinkan Anda untuk mengarahkan alat pengembang Anda ke iFrames tertentu dalam dokumen.

Alat Seluler

Selain alat pembuat dan debugging Firefox, ada juga sejumlah alat seluler yang dapat digunakan pengembang untuk pengembangan seluler. Saya akan membahasnya secara lengkap di bawah ini.

Manajer Aplikasi

Alat ini memungkinkan pengembang untuk menguji, menyebarkan, dan men-debug aplikasi HTML5 di perangkat Firefox OS. Ini juga bertindak sebagai simulator sehingga pengujian dapat dilakukan langsung dari browser desktop Firefox.

Manajer Aplikasi dilengkapi dengan panel Aplikasi, tempat pengembang dapat mengelola aplikasi lokal dan aplikasi yang dihosting secara eksternal; panel Perangkat, yang memberikan informasi tentang perangkat yang terhubung seperti versi OS dan aplikasi yang diinstal; dan Kotak Alat, yang merupakan seperangkat Alat Pengembang Firefox yang dapat digunakan pada aplikasi yang sedang berjalan.

IDE Web

Alat seluler ini memungkinkan pengembang untuk membuat, mengedit, menjalankan, dan men-debug aplikasi web mereka melalui Firefox OS Simulator atau melalui perangkat Firefox OS. Anda dapat menggunakannya untuk menghubungkan ke Alat Pengembang Firefox dengan browser lain seperti Firefox untuk Android dan Chrome untuk Android.

Alat Seluler Lainnya

Alat seluler lainnya termasuk:

• Debugging Jarak Jauh untuk Firefox untuk Android
• Firefox OS Simulator: Ini mensimulasikan perangkat Firefox OS tetapi berjalan di desktop
• Tampilan Desain Responsif: Ini memungkinkan Anda untuk melihat bagaimana situs web atau aplikasi web Anda terlihat pada perangkat yang berbeda dengan ukuran layar yang berbeda.

Alat Kinerja

Kinerja sangat penting dalam pengembangan web, itulah sebabnya Firefox memberi pengembang web sejumlah alat yang dapat digunakan untuk mendiagnosis dan memperbaiki masalah kinerja apa pun dengan situs web dan aplikasi webnya.

Alat Kinerja

Alat Kinerja menggantikan profiler pengambilan sampel JavaScript asli Firefox. Masih berisi versi terbaru dari profil pengambilan sampel; namun juga memiliki garis waktu frame rate. Lebih banyak fitur diharapkan di masa depan.

Alat Kinerja dapat digunakan untuk membuat, menganalisis, dan mengambil sampel profil.

Profiler JavaScript

JavaScript Profiler dirancang untuk membantu pengembang menemukan masalah dalam kode JavaScript mereka. Ini dilakukan dengan mengambil sampel tumpukan panggilan JavaScript saat ini dan memberikan statistik tentangnya.

Alat Berkedip Cat

Alat ini akan menyorot bagian halaman web Anda yang perlu dicat ulang oleh browser sebagai tanggapan atas masukan. Ini memungkinkan pengembang web untuk mengetahui apakah situs web mereka membuat pengecatan ulang peramban lebih dari yang diperlukan. Ingat pengecatan ulang dapat berdampak negatif pada kinerja Anda, jadi sebaiknya gunakan alat ini untuk menghilangkan pengecatan ulang yang tidak perlu dan meningkatkan kinerja situs web Anda.

Profil Pengembang Terpisah

Harus beralih di antara versi Firefox akan sangat merepotkan. Kabar baiknya adalah Firefox Developer Edition menggunakan profil yang sepenuhnya terpisah dari versi Firefox lainnya yang telah Anda instal.

Catatan Rilis Pengembang

Pengembang yang ingin membaca catatan yang berkaitan dengan rilis Edisi Pengembang Firefox saat ini dan yang bersejarah dapat melakukannya hanya dengan mengunjungi tautan ini.

Membungkus

Jika Anda seorang pengembang web baru atau berpengalaman, Anda akan sangat diuntungkan dengan memanfaatkan Alat Pengembang Firefox yang terperinci dan beragam. Dari membuat kode hingga men-debug HTML, alat ini memungkinkan Anda melakukan berbagai tindakan yang diperlukan untuk mengembangkan situs web atau aplikasi web. Alat mobile juga sangat berguna, terutama bagi mereka yang mencari untuk membuat website responsif untuk manfaat dari terbaru ⁽²¹ April 2015) pembaruan algoritma Google.

Untuk informasi lebih lanjut tentang Alat Pengembang Firefox, kunjungi situs web Pengembang Mozilla dan bergabunglah dengan komunitas pengembang. Firefox Developer Edition gratis untuk diunduh dan digunakan.