Uji, ubah, dan debug HTML, CSS, dan JavaScript di desktop dan di ponsel.

 


 

Untuk alat dan fitur terbaru, cobalah Firefox Edisi Pengembang, Cobalah Firefox Developer Edition.

Unduh Firefox Developer Edition

Peralatan Inti

Pemeriksa Laman

The all-new Inspector panel in Firefox 57.

Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk box model, animasi dan tata letak grid.

Konsol Web

The all-new Console in Firefox 57.

Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.

Pen-debug   JavaScript

The all-new Firefox 57 Debugger.html

Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.

Monitor Jaringan

The Network panel in Firefox 57 DevTools.

Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.

Alat Kinerja

Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.

Mode Desain Responsif

Responsive Design mode in Firefox 57.

Lihat bagaimana situs atau aplikasi Anda akan terlihat dan berperilaku pada perangkat dan jenis jaringan yang berbeda.


Alat Lainnya

Alat pengembang ini juga dibuat ke dalam Firefox. Tidak seperti "Alat Inti" di atas, mungkin Anda tidak menggunakannya setiap hari.

Memori
Cari tahu objek mana yang sedang menyimpan memori yang digunakan.
Pemeriksa Penyimpanan
Memeriksa kuki, penyimpan lokal, indexedDB, dan Inspect cookies, local storage, indexedDB, dan penyimpanan sesi kini pada sebuah laman.
DOM Property Viewer
Memeriksa properti DOM laman, fungsi, dan lain-lain.
Toolbar Pengembang
Sebuah antarmuka command-line untuk alat pengembang.
Eyedropper
Memilih warna dari laman.
Scratchpad
Sebuah editor teks yang dibuat ke dalam Firefox yang  memungkinkan Anda menulis dan menjalankan JavaScript
Editor Gaya
Tinjau dan ubah gaya CSS untuk halaman saat ini.
Shader Editor
Tinjau dan edit vertex dan fragment shaders yang digunakan oleh WebGL.
Editor Audio Web
Periksa grafik dari node audio dalam kontek audio, dan modifikasi parameternya.
Mengambil tangkapan layar
Mengambil sebuah tangkapan layar dari keseluruhan laman atau dari sebuah elemen tunggal.
Mengukur sebagian laman
Mengukur area tertentu pada sebuah laman web.
Rulers (Penggaris)
Penggaris sepanjang horizontal dan vertikal pada sebuah laman web.

Menghubungkan Alat Pengembang

Jika Anda membuka alat pengembang menggunakan pintasan keyboard atau or item menu yang sama, mereka akan menargetkan dokumen yang telah di-host oleh tab yang sedang aktif. Tetapi Anda bisa memasang alat ke berbagai target lain, juga di dalam peramban saat ini dan di berbagai peramban atau bahkan perangkat yang berbeda.

about:debugging
Men-debug pengayas, tab konten, dan pekerja yang berjalan di peramban.
Menghubungan ke Firefox untuk Android
Menghubungkan alat pengembang ke sebuah instance dari Firefox yang berjalan pada sebuah perangkat Android.
Menghubungkan ke iframes
Menghubungkan alat pengembang ke sebuah iframe tertentu pada laman saat ini
Menghubungkan ke peramban lain
Menghubungkan alat pengembang ke Chrome pada Android dan Safari pada iOS.

Men-debug peramban

Secara default, alat pengembang dilampirkan ke laman web atau aplikasi web. Tetapi Anda bisa juga menghubungkan mereka ke peramban secara keseluruhan. Ini berguna untuk pengembangan peramban dan pengayas.

Konsol Peramban
Lihat pesan yang dicatat oelh peramban itu dan oleh pengaya, dan jalankan kode JavaScript di linkup peramban.
Kotak Perkakas Peramban
Menyematkan alat pengembang ke peramban itu sendiri.

Memperluas  devtools

Alat pengembang dirancang agar dapat diperluas. Pengaya Firefox dapat mengakses alat pengembang dan komponen yang mereka gunakan untuk memperluas alat yang ada dan menambahkan alat yang baru. Dengan protokol men-debug jarak jauh, Anda dapat menerapkan men-debug klien dan server Anda sendiri, memungkinkan Anda men-debug situs web menggunakan alat Anda sendiri atau untuk men-debug berbagai sasaran menggunakan alat Firefox.

Contoh pengaya alat pengembang
Gunakan contoh-contoh ini untuk memahami bagaimana untuk menerapkan pengaya alat pengembang.
Menambah sebuah panel baru ke alat pengembang
Menulis sebuah pengaya yang menambah sebuah panel baru ke Kotak perkakas.
Protokol Men-debug Jarak Jauh
Protokol digunakan untuk mengkoneksi Alat Firefox Developer Tools untuk sebuah target men-debug seperti instance dari perangkat Firefox atau Firefox OS.
Peubah Sumber
Sebuah editor kode di buat kedalam Firefox yang bisa disematkan ke pengaya Anda.
Antarmuka Debugger
Sebuah API yang memungkinkan kode JavaScript mengemati eksekusi dari kode JavaScript yang lain. Alat Pengembang Firefox menggunakan API untuk menerapakan pen-debug JavaScript.
Konsol Web keluaran kustom
Bagaimana memperluas keluaran dari Konsol Web dan Konsol Peramban.

Migrasi dari Firebug

Firebug akan sampai pada akhir masa pakainya (lihat Firebug tinggal di Firefox DevTools untuk lebih jelasnya mengapa), dan kita menghargai bahwa beberapa orang akan merasa migrasi ke set alat pengembang yang kurang terkenal akan menjadi menantang. Untuk memudahkan transisi dari Firebug ke alat pengembang Firefox, kami telah menulis panduan praktis — Migrasi dari Firebug.


Kontribusi

Jika Anda ingin untuk membantu mengembangkan alat pengembang, sumber daya ini akan membantu Anda untuk memulai.

Ikut Terlibat
Halaman wiki Mozilla menjelaskan bagaimana caranya untuk terlibat.
firefox-dev.tools
Sebuah alat yang membantu mencari bugs untuk dikerjakan.

Gabung dengan komunitas Developer tools

Pilih metode untuk bergabung diskusi: