Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 811899 of Firefox 開發者工具

  • 版本網址代稱: Tools
  • 版本標題: Firefox 開發者工具
  • 版本 ID: 811899
  • 建立日期:
  • 建立者: irvinfly
  • 是目前線上的版本？ 否
  • 回應 翻譯分類名稱
標籤: 

版本內容
在桌面及行動裝置上進行 HTML、CSS 及 JavaScript 的檢查、編輯及除錯
安裝 Firefox Developer Edition

Firefox Developer Edition 有哪些新功能？

Firefox Developer Edition 是針對開發者的特別 Firefox 版本，包含 Firefox 最新的功能、以及實驗性的開發者工具。目前的 Developer Edition 包含以下開發者工具的新功能：

分享您的構想

分享您的點子

提出開發者工具新功能的點子，或是為其他開發者提出的構想投票。

創造

網站與 Web App 的開發工具

Scratchpad
A text editor built into Firefox that lets you write and execute JavaScript.
Style Editor
View and edit CSS styles for the current page.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.

探索與除錯

為網站與 Web App 測試、探索、與除錯

Web Console
See messages logged a web page, and interact with the page using JavaScript.
Page Inspector
View and modify the page HTML and CSS.
JavaScript Debugger
Stop, step through, examine and modify the JavaScript running in a page.
Network Monitor
See the network requests made when a page is loaded.
Storage Inspector
Inspect cookies, local storage, indexedDB and session storage present in a page.
Developer Toolbar
A command-line interface for the developer tools.
3D View
3D visualization of the page.
Eyedropper
Select a color from the page.
Working with iframes
How to target a particular iframe.

行動

為行動開發而生的工具

App Manager
Design and develop apps for Firefox OS.
WebIDE
The replacement for the App Manager, available from Firefox 33 onwards.
Firefox OS Simulator
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
Responsive Design View
See how your website or app will look on different screen sizes without changing the size of your browser window.
Debugging on Firefox for Android
Connect the developer tools to Firefox for Android.
Debugging Firefox for Android with WebIDE
For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.
Valence
Connect the developer tools to Chrome on Android and Safari on iOS

效能

測試與修復效能問題

 
Performance tool
Analyze your site's general responsiveness, JavaScript and layout performance.
Frame rate graph
See the frame rate for your site.
Waterfall
Figure out what the browser is doing as it runs your site.
Call Tree
Figure out where your JavaScript code is spending its time.
Flame Chart
See which functions are on the stack over the course of a performance profile.
Paint Flashing Tool
Highlights the parts of the page that are repainted in response to events.
Reflow Event Logging
See reflow events in the web console.
Network Performance
See how long the parts of your site take to load.

為瀏覽器除錯

開發者工具預設是用在網頁與 Web App 上的，但你也可以將其連結上瀏覽器，當開發瀏覽器與套件時非常實用

Browser Console
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

擴展開發工具

開發工具被設計成可供擴展。Firefox 附加元件可以取用開發工具與其元件，擴展現有工具或加入新工具。使用遠端除錯協定你可以建立自己的除錯用戶端與伺服器，讓你可以使用自己的工具為網站除錯，或針對不同的目標平台應用 Firefox 工具

Add a new panel to the devtools
Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor
A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface
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.
Web Console custom output
How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons
Use these examples to understand how to implement a devtools add-on.

更多資源

這個段落列出非由 Mozilla 開發工具小組維護，但廣為網頁開發者使用的資源。我們在這邊也列出了數個 Firefox 附加元件，但你可在 Firefox 附加元件網站的 Web Development 分類中看到完整列表。

Firebug
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
DOM Inspector
Inspect, browse, and edit the DOM of web pages or XUL windows.
Web Developer
Adds a menu and a toolbar to the browser with various web developer tools.
Webmaker Tools
A set of tools developed by Mozilla, aimed at people getting started with Web development.
W3C Validators
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
JSHint
JavaScript code analysis tool.
{{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")}}
  1. Creating
    1. Scratchpad
    2. Style Editor
    3. Shader Editor
    4. Web Audio Editor
  2. Debugging
    1. Page Inspector
    2. Web Console
    3. Debugger
    4. Network Monitor
    5. Storage Inspector
    6. Developer Toolbar
    7. 3D View
    8. Eyedropper
    9. Selecting iframes
  3. Mobile
    1. App Manager
    2. WebIDE
    3. Firefox for Android
    4. Firefox OS Simulator
    5. Responsive Design View
  4. Performance
    1. Performance
    2. Profiler
    3. Paint Flashing Tool
    4. Reflow Event Logging
    5. Network Performance
  5. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  6. Extending the devtools
    1. Remote Debugging Protocol
    2. Stream Transport
    3. Source Editor
    4. The Debugger Interface
    5. Web Console custom output
  7. Settings
  8. Release notes

版本來源

 
<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>&nbsp;</dt>
 <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>
還原至此版本