<div class="summary"><span class="seoSummary">在桌面及行動裝置上進行 HTML、CSS 及 JavaScript 的檢查、編輯及除錯</span></div>
<div class="column-container zone-callout"><a href="https://www.mozilla.org/zh-TW/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; 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;">安裝 Firefox Developer Edition</a>
<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Firefox Developer Edition 有哪些新功能?</h3>
<p><a href="/zh-TW/Firefox/Developer_Edition">Firefox Developer Edition</a> 是針對開發者的特別 Firefox 版本,包含 Firefox 最新的功能、以及實驗性的開發者工具。目前的 Developer Edition 包含以下開發者工具的新功能:</p>
<ul>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">Improvements to the Animations view</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">Get help from MDN for CSS property syntax</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit filters in the Page Inspector</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Web_Console#console_API_messages">Web Console now shows messages from workers</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Network_Monitor#Filtering_by_URL">Filter requests by URL in the Network Monitor</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Network_Monitor#Context_menu">Many new context menu options in the Network Monitor</a></li>
<li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">Filter rules in the Page Inspector</a></li>
</ul>
</div>
<div class="column-container zone-callout"><a href="https://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; 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;">分享您的構想</a>
<h3 id="Share_your_ideas" name="Share_your_ideas">分享您的點子</h3>
<p>提出開發者工具新功能的點子,或是為其他開發者提出的構想投票。</p>
</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display:block; height:467px; margin-left:auto; margin-right:auto; width:815px" /></p>
<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">創造</h2>
<p>網站與 Web App 的開發工具</p>
<dl>
<dt><a href="/zh-TW/docs/Tools/Scratchpad">Scratchpad</a></dt>
<dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd>
<dt><a href="/zh-TW/docs/Tools/Style_Editor">Style Editor</a></dt>
<dd>View and edit CSS styles for the current page.</dd>
<dt><a href="/zh-TW/docs/Tools/Shader_Editor">Shader Editor</a></dt>
<dd>View and edit the vertex and fragment shaders used by <a href="/zh-TW/docs/Web/WebGL">WebGL</a>.</dd>
<dt><a href="/zh-TW/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
<dd>Examine the graph of audio nodes in an audio context, and modify their parameters.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Exploring" name="Exploring">探索與除錯</h2>
<p>為網站與 Web App 測試、探索、與除錯</p>
<dl>
<dt><a href="/zh-TW/docs/Tools/Web_Console">Web Console</a></dt>
<dd>See messages logged a web page, and interact with the page using JavaScript.</dd>
<dt><a href="/zh-TW/docs/Tools/Page_Inspector">Page Inspector</a></dt>
<dd>View and modify the page HTML and CSS.</dd>
<dt><a href="/zh-TW/docs/Tools/Debugger">JavaScript Debugger</a></dt>
<dd>Stop, step through, examine and modify the JavaScript running in a page.</dd>
<dt><a href="/zh-TW/docs/Tools/Network_Monitor">Network Monitor</a></dt>
<dd>See the network requests made when a page is loaded.</dd>
<dt><a href="/zh-TW/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
<dd>Inspect cookies, local storage, indexedDB and session storage present in a page.</dd>
<dt><a href="/zh-TW/docs/Tools/GCLI">Developer Toolbar</a></dt>
<dd>A command-line interface for the developer tools.</dd>
<dt><a href="/zh-TW/docs/Tools/3D_View">3D View</a></dt>
<dd>3D visualization of the page.</dd>
<dt><a href="/zh-TW/docs/Tools/Eyedropper">Eyedropper</a></dt>
<dd>Select a color from the page.</dd>
<dt><a href="/zh-TW/docs/Tools/Working_with_iframes">Working with iframes</a></dt>
<dd>How to target a particular iframe.</dd>
</dl>
</div>
</div>
<hr />
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">行動</h2>
<p>為行動開發而生的工具</p>
<dl>
<dt><a href="/zh-TW/Firefox_OS/Using_the_App_Manager">App Manager</a></dt>
<dd>Design and develop apps for Firefox OS.</dd>
<dt><a href="/zh-TW/docs/Tools/WebIDE">WebIDE</a></dt>
<dd>The replacement for the App Manager, available from Firefox 33 onwards.</dd>
<dt><a href="/zh-TW/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
<dd>Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.</dd>
<dt><a href="/zh-TW/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt>
<dd>See how your website or app will look on different screen sizes without changing the size of your browser window.</dd>
<dt><a href="/zh-TW/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt>
<dd>Connect the developer tools to Firefox for Android.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt>
<dd>For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.</dd>
<dt><a href="/zh-TW/docs/Tools/Valence">Valence</a></dt>
<dd>Connect the developer tools to Chrome on Android and Safari on iOS</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Performance" name="Performance">效能</h2>
<p>測試與修復效能問題</p>
<dl>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Performance">Performance tool</a></dt>
<dd>Analyze your site's general responsiveness, JavaScript and layout performance.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
<dd>See the frame rate for your site.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
<dd>Figure out what the browser is doing as it runs your site.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
<dd>Figure out where your JavaScript code is spending its time.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
<dd>See which functions are on the stack over the course of a performance profile.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
<dd>Highlights the parts of the page that are repainted in response to events.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
<dd>See reflow events in the web console.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
<dd>See how long the parts of your site take to load.</dd>
</dl>
</div>
</div>
<hr />
<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">為瀏覽器除錯</h2>
<p>開發者工具預設是用在網頁與 Web App 上的,但你也可以將其連結上瀏覽器,當開發瀏覽器與套件時非常實用</p>
<dl>
<dt><a href="/zh-TW/docs/Tools/Browser_Console">Browser Console</a></dt>
<dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd>
<dt><a href="/zh-TW/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
<dd>Attach the Developer Tools to the browser itself.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">擴展開發工具</h2>
<p>開發工具被設計成可供擴展。Firefox 附加元件可以取用開發工具與其元件,擴展現有工具或加入新工具。使用遠端除錯協定你可以建立自己的除錯用戶端與伺服器,讓你可以使用自己的工具為網站除錯,或針對不同的目標平台應用 Firefox 工具</p>
<dl>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
<dd>Write an add-on that adds a new panel to the Toolbox.</dd>
<dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
<dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Editor">Source Editor</a></dt>
<dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
<dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
<dd>How to extend and customize the output of the <a href="https://developer.mozilla.org/zh-TW/docs/Tools/Web_Console">Web Console</a> and the <a href="https://developer.mozilla.org/zh-TW/docs/Tools/Browser_Console">Browser Console</a>.</dd>
<dt><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
<dd>Use these examples to understand how to implement a devtools add-on.</dd>
</dl>
</div>
</div>
<hr />
<h2 id="More_resources" name="More_resources">更多資源</h2>
<p>這個段落列出非由 Mozilla 開發工具小組維護,但廣為網頁開發者使用的資源。我們在這邊也列出了數個 Firefox 附加元件,但你可在 <a href="https://addons.mozilla.org/zh-TW/firefox/extensions/web-development/">Firefox 附加元件網站的 Web Development 分類中</a>看到完整列表。</p>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
<dd>A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd>
<dt><a href="/zh-TW/docs/DOM_Inspector">DOM Inspector</a></dt>
<dd>Inspect, browse, and edit the DOM of web pages or XUL windows.</dd>
<dt><a href="https://addons.mozilla.org/zh-TW/firefox/addon/web-developer/">Web Developer</a></dt>
<dd>Adds a menu and a toolbar to the browser with various web developer tools.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="https://webmaker.org/zh-TW/tools/">Webmaker Tools</a></dt>
<dd>A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd>
<dt><a href="https://www.w3.org/Status.html">W3C Validators</a></dt>
<dd>The W3C website hosts a number of tools to check the validity of your website, including its <a href="https://validator.w3.org/" title="https://validator.w3.org/">HTML</a> and <a href="https://jigsaw.w3.org/css-validator/" title="https://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
<dt><a href="https://www.jshint.com/">JSHint</a></dt>
<dd>JavaScript code analysis tool.</dd>
</dl>
</div>
</div>
<hr />
<div>{{CommunityBox("Developer tools", "dev-developer-tools", "mozilla.dev.developer-tools", "devtools", "Team info|https://wiki.mozilla.org/DevTools|Dev tools wiki|Designs and plans for the dev tools||Blog|https://hacks.mozilla.org/|Hacks blog|Hacks blog", "FirefoxDevTools", "firefox-developer-tools")}}</div>
<h2 id="Subnav" name="Subnav">Subnav</h2>
<ol>
<li><a href="#">Creating</a>
<ol>
<li><a href="/zh-TW/docs/Tools/Scratchpad">Scratchpad</a></li>
<li><a href="/zh-TW/docs/Tools/Style_Editor">Style Editor</a></li>
<li><a href="/zh-TW/docs/Tools/Shader_Editor">Shader Editor</a></li>
<li><a href="/zh-TW/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li>
</ol>
</li>
<li><a href="#">Debugging</a>
<ol>
<li><a href="/zh-TW/docs/Tools/Page_Inspector">Page Inspector</a></li>
<li><a href="/zh-TW/docs/Tools/Web_Console">Web Console</a></li>
<li><a href="/zh-TW/docs/Tools/Debugger">Debugger</a></li>
<li><a href="/zh-TW/docs/Tools/Network_Monitor">Network Monitor</a></li>
<li><a href="/zh-TW/docs/Tools/Storage_Inspector">Storage Inspector</a></li>
<li><a href="/zh-TW/docs/Tools/GCLI">Developer Toolbar</a></li>
<li><a href="/zh-TW/docs/Tools/3D_View">3D View</a></li>
<li><a href="/zh-TW/docs/Tools/Eyedropper">Eyedropper</a></li>
<li><a href="/zh-TW/docs/tools/Working_with_iframes">Selecting iframes</a></li>
</ol>
</li>
<li><a href="#">Mobile</a>
<ol>
<li><a href="/zh-TW/Firefox_OS/Using_the_App_Manager">App Manager</a></li>
<li><a href="/zh-TW/docs/Tools/WebIDE">WebIDE</a></li>
<li><a href="/zh-TW/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android</a></li>
<li><a href="/zh-TW/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></li>
<li><a href="/zh-TW/docs/Tools/Responsive_Design_View">Responsive Design View</a></li>
</ol>
</li>
<li><a href="#">Performance</a>
<ol>
<li><a href="/zh-TW/docs/Tools/Performance">Performance</a></li>
<li><a href="/zh-TW/docs/Tools/Profiler">Profiler</a></li>
<li><a href="/zh-TW/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
<li><a href="/zh-TW/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></li>
<li><a href="/zh-TW/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></li>
</ol>
</li>
<li><a href="#">Debugging the browser</a>
<ol>
<li><a href="/zh-TW/docs/Tools/Browser_Console">Browser Console</a></li>
<li><a href="/zh-TW/docs/Tools/Browser_Toolbox">Browser Toolbox</a></li>
</ol>
</li>
<li><a href="#">Extending the devtools</a>
<ol>
<li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li>
<li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li>
<li><a href="/zh-TW/docs/Tools/Editor">Source Editor</a></li>
<li><a href="/zh-TW/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li>
<li><a href="/zh-TW/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li>
</ol>
</li>
<li><a href="/zh-TW/docs/Tools_Toolbox#Settings">Settings</a></li>
<li><a href="/zh-TW/docs/Tools/Release_notes">Release notes</a></li>
</ol>