blob: f61960184d540c1d913c3b517abccc2e43f7d31f (
plain)
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
190
191
192
|
---
title: Firefox 開發者工具
slug: Tools
tags:
- Developing Mozilla
- NeedsMarkupWork
- NeedsTechnicalReview
- NeedsTranslation
- Tools
- TopicStub
- Web Development
- 'Web Development:Tools'
translation_of: Tools
---
<div>{{ToolsSidebar}}</div><p class="summary">在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。</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;">要尋找最新的開發工具與功能，請試試 Firefox Developer Edition。</p>
<p><a href="https://www.mozilla.org/zh-TW/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;">Download Firefox Developer Edition</a></p>
</div>
<div class="column-third"></div>
</div>
<hr>
<h2 id="核心工具">核心工具</h2>
<div class="column-container">
<div class="column-half">
<h3 id="頁面檢測器">頁面檢測器</h3>
<p><a href="/zh-TW/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>檢視並編輯網頁的內容與版面。視覺化各種東西，包括盒子模型、動畫、格線版面。</p>
</div>
<div class="column-half">
<h3 id="網路主控台">網路主控台</h3>
<p><a href="/zh-TW/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>檢查網頁紀錄的訊息、並透過 JavaScript 與網頁互動。</p>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h3 id="JavaScript_除錯器">JavaScript 除錯器</h3>
<p><a href="/zh-TW/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>停步、逐步、試驗、修改網頁的 JavaScript。</p>
</div>
<div class="column-half">
<h3 id="網路監控">網路監控</h3>
<p><a href="/zh-TW/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>看看網頁載入時發了什麼請求。</p>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h3 id="效能工具">效能工具</h3>
<p><a href="/zh-TW/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>分析網站的通常反應、JavaScript、還有布局效能。</p>
</div>
<div class="column-half">
<h3 id="適應性設計模式">適應性設計模式</h3>
<p><a href="/zh-TW/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>看看網站或 app 在不同的設備與網路狀況下表現如何。</p>
</div>
</div>
<hr>
<h2 id="更多工具">更多工具</h2>
<p>Firefox 也內建了這些開發者工具，但通常不會像「核心工具」那麼常用。</p>
<div class="twocolumns">
<dl>
<dt><a href="/zh-TW/docs/Tools/Memory">記憶體</a></dt>
<dd>找出哪個物件是用了記憶體哪個地方。</dd>
<dt><a href="/zh-TW/docs/Tools/Storage_Inspector">儲存空間</a></dt>
<dd>檢查頁面存了什麼 cookie、本機的東西、indexedDB、session。</dd>
<dt><a href="/zh-TW/docs/Tools/DOM_Property_Viewer">DOM 屬性檢查器</a></dt>
<dd>檢查頁面的 DOM 屬性、函式之類的。</dd>
<dt><a href="/zh-TW/docs/Tools/GCLI">開發者工具列</a></dt>
<dd>開發者工具的命令行介面。</dd>
<dt><a href="/zh-TW/docs/Tools/Eyedropper">Eyedropper</a></dt>
<dd>選取網頁的顏色。</dd>
<dt><a href="/zh-TW/docs/Tools/Scratchpad">速記本</a></dt>
<dd>Firefox 裡面文字編輯器，讓你能撰寫並執行 JavaScript。</dd>
<dt><a href="/zh-TW/docs/Tools/Style_Editor">樣式編輯器</a></dt>
<dd>針對目前的頁面觀察與編輯 CSS 樣式。</dd>
<dt><a href="/zh-TW/docs/Tools/Shader_Editor">Shader Editor</a></dt>
<dd>查看與編輯 <a href="/zh-TW/docs/Web/WebGL">WebGL</a> 使用的 vertex 與 fragment shader。</dd>
<dt><a href="/zh-TW/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
<dd>檢查音頻的節點圖形，並修改其參數。</dd>
<dt><a href="/zh-TW/docs/Tools/Screenshot_tool">擷取畫面</a></dt>
<dd>擷取整個網頁或是某個元素。</dd>
</dl>
</div>
<hr>
<h2 id="連接開發者工具">連接開發者工具</h2>
<p>如果你透過<a href="/zh-TW/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">鍵盤快捷鍵</a>或等同的選單選項啟動了開發者工具，它的目標會針對目前頁籤的文件。不過，你也可以把工具連接到其他目標，不論是不是相同的瀏覽器、甚至是不是相同的設備。</p>
<div class="twocolumns">
<dl>
<dt><a href="/zh-TW/docs/Tools/about:debugging">about:debugging</a></dt>
<dd>針對附加元件、內容頁籤、還有瀏覽器運行的 worker。</dd>
<dt><a href="/zh-TW/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">連接到 Firefox for Android</a></dt>
<dd>連接開發者工具到在 Android 運行的 Firefox 實例。</dd>
<dt><a href="/zh-TW/docs/Tools/Working_with_iframes">連接到 iframes</a></dt>
<dd>把開發者工具連接到頁面內指定的 iframe。</dd>
<dt><a href="/zh-TW/docs/Tools/Valence">連接到其他瀏覽器</a></dt>
<dd>把開發者工具連接到 Android 的 Chrome 與 iOS 的 Safari。</dd>
</dl>
</div>
<hr>
<h2 id="給瀏覽器除錯">給瀏覽器除錯</h2>
<p>開發者工具預設上是附加在網頁或網路 app 的。不過，你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。</p>
<div class="twocolumns">
<dl>
<dt><a href="/zh-TW/docs/Tools/Browser_Console">瀏覽器控制台</a></dt>
<dd>看看瀏覽器附加元件紀錄的訊息，然後運行 JavaScript 程式碼。</dd>
<dt><a href="/zh-TW/docs/Tools/Browser_Toolbox">瀏覽器工具箱</a></dt>
<dd>將開發者工具附加到瀏覽器本身。</dd>
</dl>
</div>
<hr>
<h2 id="擴展開發者工具">擴展開發者工具</h2>
<p>開發者工具都設計為易於擴展的。Firefox 附加元件可以取用開發者工具與其元件，擴展現有工具或加入新工具。使用遠端除錯協定，可以建立自己的除錯用戶端與伺服器，讓你可以使用自己的工具為網站除錯，或針對不同的目標平台應用 Firefox 工具。</p>
<div class="twocolumns">
<dl>
<dt><a href="/zh-TW/docs/Tools/Example_add-ons">開發用附加元件示例</a></dt>
<dd>透過實例理解如何作出一個開發用的附加元件。</dd>
<dt><a href="/zh-TW/docs/Tools/Adding_a_panel_to_the_toolbox">給開發者工具加一個面板</a></dt>
<dd>給開發者工具寫一個添加新面板的附加元件。</dd>
<dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">遠端除錯協定</a></dt>
<dd>協定用於連接 Firefox 開發者工具到如 Firefox 或 Firefox OS 設備之類的除錯目標。</dd>
<dt><a href="/zh-TW/docs/Tools/Editor">原始碼編輯器</a></dt>
<dd>Firefox 內建，能嵌入到附加元件的原始碼編輯器。</dd>
<dt><a href="/zh-TW/docs/Tools/Debugger-API"><code>Debugger</code> 介面</a></dt>
<dd>可以讓 JavaScript 程式碼觀察其他 JavaScript 程式碼的 API。Firefox 開發者工具利用該 API 實做了 JavaScript 程式碼除錯器。</dd>
<dt><a href="/zh-TW/docs/Tools/Web_Console/Custom_output">自訂網頁主控台輸出</a></dt>
<dd>如何擴展與自訂 <a href="/zh-TW/docs/Tools/Web_Console">Web Console</a> 和 <a href="/zh-TW/docs/Tools/Browser_Console">Browser Console</a> 的輸出。</dd>
</dl>
</div>
<hr>
<h2 id="從_Firebug_遷移">從 Firebug 遷移</h2>
<p>Firebug 已經走到產品生命的盡頭（理由請參閱 <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a>），我們明白有些人要遷移到不太熟悉的 DevTools 產品線會有點困難。針對從 Firebug 遷移到 Firefox 開發者工具壓力的緩解，我們寫了個方便的指南：<a href="/zh-TW/docs/Tools/Migrating_from_Firebug">從 Firebug 遷移</a>。</p>
<hr>
<h2 id="貢獻">貢獻</h2>
<p>如果你想幫忙改進開發者工具，這些資源能幫助你。</p>
<div class="twocolumns">
<dl>
<dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt>
<dd>告訴你如何參與其中的 Mozilla wiki 頁面。</dd>
<dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
<dd>能幫你找到目前在處理的錯誤。</dd>
</dl>
</div>
|
