---
title: Alat
slug: Tools
tags:
  - Mengembangkan Mozilla
  - Panduan
  - Pengembangan Web
  - 'Pengmbang Web: Alat'
translation_of: Tools
---
<p class="summary">Uji, ubah, dan <em>debug</em> HTML, CSS, dan JavaScript di desktop dan di ponsel.</p>



<hr>
<div class="column-container">
<div class="column-third"></div>

<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>

<p style="text-align: center;">Untuk alat dan fitur terbaru, cobalah Firefox Edisi Pengembang, Cobalah Firefox Developer Edition.</p>

<p><a href="https://www.mozilla.org/id/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Unduh Firefox Developer Edition</a></p>
</div>
</div>

<h2 id="Peralatan_Inti">Peralatan Inti</h2>

<div class="column-container">
<div class="column-half">
<h3 id="Pemeriksa_Laman">Pemeriksa Laman</h3>

<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15481/57-inspector.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk <em>box model</em>, animasi dan tata letak <em>grid</em>.</p>
</div>

<div class="column-half">
<h3 id="Konsol_Web">Konsol Web</h3>

<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/15483/57-console.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Pen-debug_JavaScript">Pen-<em>debug   </em>JavaScript</h3>

<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/15485/57-debugger.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.</p>
</div>

<div class="column-half">
<h3 id="Monitor_Jaringan">Monitor Jaringan</h3>

<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15487/57-network.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Alat_Kinerja">Alat Kinerja</h3>

<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.</p>
</div>

<div class="column-half">
<h3 id="Mode_Desain_Responsif">Mode Desain Responsif</h3>

<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/15491/57-rdm.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Lihat bagaimana situs atau aplikasi Anda akan terlihat dan berperilaku pada perangkat dan jenis jaringan yang berbeda.</p>
</div>
</div>

<hr>
<h2 id="Alat_Lainnya">Alat Lainnya</h2>

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

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Memory">Memori</a></dt>
 <dd>Cari tahu objek mana yang sedang menyimpan memori yang digunakan.</dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">Pemeriksa Penyimpanan</a></dt>
 <dd>Memeriksa kuki, penyimpan lokal, <em>indexedDB</em>, dan Inspect cookies, local storage, indexedDB, dan penyimpanan sesi kini pada sebuah laman.</dd>
 <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM </a><em><a href="/en-US/docs/Tools/DOM_Property_Viewer">Property Viewer</a></em></dt>
 <dd>Memeriksa properti DOM laman, fungsi, dan lain-lain.</dd>
 <dt><a href="/en-US/docs/Tools/GCLI">Toolbar Pengembang</a></dt>
 <dd>Sebuah antarmuka <em>command-line</em> untuk alat pengembang.</dd>
 <dt><em><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></em></dt>
 <dd>Memilih warna dari laman.</dd>
 <dt><em><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></em></dt>
 <dd>Sebuah editor teks yang dibuat ke dalam Firefox yang  memungkinkan Anda menulis dan menjalankan JavaScript</dd>
 <dt><a href="/en-US/docs/Tools/Style_Editor">Editor Gaya</a></dt>
 <dd>Tinjau dan ubah gaya CSS untuk halaman saat ini.</dd>
 <dt><em><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></em></dt>
 <dd>Tinjau dan edit <em>vertex </em>dan <em>fragment shaders</em> yang digunakan oleh <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor Audio Web</a></dt>
 <dd>Periksa grafik dari node audio dalam kontek audio, dan modifikasi parameternya.</dd>
 <dt><a href="/en-US/docs/Tools/Screenshot_tool">Mengambil tangkapan layar</a></dt>
 <dd>Mengambil sebuah tangkapan layar dari keseluruhan laman atau dari sebuah elemen tunggal.</dd>
 <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Mengukur sebagian laman</a></dt>
 <dd>Mengukur area tertentu pada sebuah laman web.</dd>
 <dt><a href="/en-US/docs/Tools/Rulers"><em>Rulers</em> (Penggaris)</a></dt>
 <dd>Penggaris sepanjang horizontal dan vertikal pada sebuah laman web.</dd>
</dl>
</div>

<hr>
<h2 id="Menghubungkan_Alat_Pengembang">Menghubungkan Alat Pengembang</h2>

<p>Jika Anda membuka alat pengembang menggunakan <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">pintasan <em>keyboard</em></a> atau or item menu yang sama, mereka akan menargetkan dokumen yang telah di-<em>host</em> 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.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
 <dd>Men-<em>debug</em> <em>pengayas</em>, tab konten, dan pekerja yang berjalan di peramban.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Menghubungan ke Firefox untuk Android</a></dt>
 <dd>Menghubungkan alat pengembang ke sebuah <em>instance</em> dari Firefox yang berjalan pada sebuah perangkat Android.</dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">Menghubungkan ke iframes</a></dt>
 <dd>Menghubungkan alat pengembang ke sebuah iframe tertentu pada laman saat ini</dd>
 <dt><a href="/en-US/docs/Tools/Valence">Menghubungkan ke peramban lain</a></dt>
 <dd>Menghubungkan alat pengembang ke Chrome pada Android dan Safari pada iOS.</dd>
</dl>
</div>

<hr>
<h2 id="Men-debug_peramban">Men-<em>debug</em> peramban</h2>

<p>Secara <em>default</em>, 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 <em>pengayas</em>.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a></dt>
 <dd>Lihat pesan yang dicatat oelh peramban itu dan oleh <em>pengaya</em>, dan jalankan kode JavaScript di linkup peramban.</dd>
 <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Kotak Perkakas Peramban</a></dt>
 <dd>Menyematkan alat pengembang ke peramban itu sendiri.</dd>
</dl>
</div>

<hr>
<h2 id="Memperluas_devtools">Memperluas <em> devtools</em></h2>

<p>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-<em>debug</em> jarak jauh, Anda dapat menerapkan men-<em>debug</em> klien dan server Anda sendiri, memungkinkan Anda men-<em>debug</em> situs web menggunakan alat Anda sendiri atau untuk men-debug berbagai sasaran menggunakan alat Firefox.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Example_add-ons">Contoh pengaya alat pengembang</a></dt>
 <dd>Gunakan contoh-contoh ini untuk memahami bagaimana untuk menerapkan pengaya alat pengembang.</dd>
 <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Menambah sebuah panel baru ke alat pengembang</a></dt>
 <dd>Menulis sebuah pengaya yang menambah sebuah panel baru ke Kotak perkakas.</dd>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Protokol Men-<em>debug</em> Jarak Jauh</a></dt>
 <dd>Protokol digunakan untuk mengkoneksi Alat Firefox Developer Tools untuk sebuah target men-<em>debug</em> seperti <em>instance</em> dari perangkat Firefox atau Firefox OS.</dd>
 <dt><a href="/en-US/docs/Tools/Editor">Peubah Sumber</a></dt>
 <dd>Sebuah editor kode di buat kedalam Firefox yang bisa disematkan ke pengaya Anda.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger-API">Antarmuka <code>Debugger</code></a></dt>
 <dd>Sebuah API yang memungkinkan kode JavaScript mengemati eksekusi dari kode JavaScript yang lain. Alat Pengembang Firefox menggunakan API untuk menerapakan pen-<em>debug</em> JavaScript.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Konsol Web keluaran kustom</a></dt>
 <dd>Bagaimana memperluas keluaran dari <a href="/en-US/docs/Tools/Web_Console">Konsol Web</a> dan <a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a>.</dd>
</dl>
</div>

<hr>
<h2 id="Migrasi_dari_Firebug">Migrasi dari Firebug</h2>

<p>Firebug akan sampai pada akhir masa pakainya (lihat <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug tinggal di Firefox DevTools</a> 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 — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrasi dari Firebug</a>.</p>

<hr>
<h2 id="Kontribusi">Kontribusi</h2>

<p>Jika Anda ingin untuk membantu mengembangkan alat pengembang, sumber daya ini akan membantu Anda untuk memulai.</p>

<div class="twocolumns">
<dl>
 <dt><a href="https://devtools-html.github.io/#getting-in-touch">Ikut Terlibat</a></dt>
 <dd>Halaman wiki Mozilla menjelaskan bagaimana caranya untuk terlibat.</dd>
 <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
 <dd>Sebuah alat yang membantu mencari <em>bugs</em> untuk dikerjakan.</dd>
</dl>
</div>