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.
Peralatan Inti
Pemeriksa Laman
Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk box model, animasi dan tata letak grid.
Konsol Web
Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.
Pen-debug JavaScript
Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.
Monitor Jaringan
Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.
Alat Kinerja
Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.
Mode Desain Responsif
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
- IRC: #devtools
- Team info: Dev tools wiki
- Blog: Hacks blog