1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
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>
|
