From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/tools/index.html | 192 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 files/zh-tw/tools/index.html (limited to 'files/zh-tw/tools/index.html') diff --git a/files/zh-tw/tools/index.html b/files/zh-tw/tools/index.html new file mode 100644 index 0000000000..f61960184d --- /dev/null +++ b/files/zh-tw/tools/index.html @@ -0,0 +1,192 @@ +--- +title: Firefox 開發者工具 +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +
{{ToolsSidebar}}

在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。

+ +
+
+
+ +
+

+ +

要尋找最新的開發工具與功能，請試試 Firefox Developer Edition。

+ +

Download Firefox Developer Edition

+
+ +
+
+ +
+

核心工具

+ +
+
+

頁面檢測器

+ +

The all-new Inspector panel in Firefox 57.

+ +

檢視並編輯網頁的內容與版面。視覺化各種東西，包括盒子模型、動畫、格線版面。

+
+ +
+

網路主控台

+ +

The all-new Console in Firefox 57.

+ +

檢查網頁紀錄的訊息、並透過 JavaScript 與網頁互動。

+
+
+ +
+
+
+

JavaScript 除錯器

+ +

The all-new Firefox 57 Debugger.html

+ +

停步、逐步、試驗、修改網頁的 JavaScript。

+
+ +
+

網路監控

+ +

The Network panel in Firefox 57 DevTools.

+ +

看看網頁載入時發了什麼請求。

+
+
+ +
+
+
+

效能工具

+ +

+ +

分析網站的通常反應、JavaScript、還有布局效能。

+
+ +
+

適應性設計模式

+ +

Responsive Design mode in Firefox 57.

+ +

看看網站或 app 在不同的設備與網路狀況下表現如何。

+
+
+ +
+

更多工具

+ +

Firefox 也內建了這些開發者工具，但通常不會像「核心工具」那麼常用。

+ +
+
+
記憶體
+
找出哪個物件是用了記憶體哪個地方。
+
儲存空間
+
檢查頁面存了什麼 cookie、本機的東西、indexedDB、session。
+
DOM 屬性檢查器
+
檢查頁面的 DOM 屬性、函式之類的。
+
開發者工具列
+
開發者工具的命令行介面。
+
Eyedropper
+
選取網頁的顏色。
+
速記本
+
Firefox 裡面文字編輯器，讓你能撰寫並執行 JavaScript。
+
樣式編輯器
+
針對目前的頁面觀察與編輯 CSS 樣式。
+
Shader Editor
+
查看與編輯 WebGL 使用的 vertex 與 fragment shader。
+
Web Audio Editor
+
檢查音頻的節點圖形，並修改其參數。
+
擷取畫面
+
擷取整個網頁或是某個元素。
+
+
+ +
+

連接開發者工具

+ +

如果你透過鍵盤快捷鍵或等同的選單選項啟動了開發者工具，它的目標會針對目前頁籤的文件。不過，你也可以把工具連接到其他目標，不論是不是相同的瀏覽器、甚至是不是相同的設備。

+ +
+
+
about:debugging
+
針對附加元件、內容頁籤、還有瀏覽器運行的 worker。
+
連接到 Firefox for Android
+
連接開發者工具到在 Android 運行的 Firefox 實例。
+
連接到 iframes
+
把開發者工具連接到頁面內指定的 iframe。
+
連接到其他瀏覽器
+
把開發者工具連接到 Android 的 Chrome 與 iOS 的 Safari。
+
+
+ +
+

給瀏覽器除錯

+ +

開發者工具預設上是附加在網頁或網路 app 的。不過，你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。

+ +
+
+
瀏覽器控制台
+
看看瀏覽器附加元件紀錄的訊息，然後運行 JavaScript 程式碼。
+
瀏覽器工具箱
+
將開發者工具附加到瀏覽器本身。
+
+
+ +
+

擴展開發者工具

+ +

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

+ +
+
+
開發用附加元件示例
+
透過實例理解如何作出一個開發用的附加元件。
+
給開發者工具加一個面板
+
給開發者工具寫一個添加新面板的附加元件。
+
遠端除錯協定
+
協定用於連接 Firefox 開發者工具到如 Firefox 或 Firefox OS 設備之類的除錯目標。
+
原始碼編輯器
+
Firefox 內建，能嵌入到附加元件的原始碼編輯器。
+
Debugger 介面
+
可以讓 JavaScript 程式碼觀察其他 JavaScript 程式碼的 API。Firefox 開發者工具利用該 API 實做了 JavaScript 程式碼除錯器。
+
自訂網頁主控台輸出
+
如何擴展與自訂 Web Console 和 Browser Console 的輸出。
+
+
+ +
+

從 Firebug 遷移

+ +

Firebug 已經走到產品生命的盡頭（理由請參閱 Firebug lives on in Firefox DevTools），我們明白有些人要遷移到不太熟悉的 DevTools 產品線會有點困難。針對從 Firebug 遷移到 Firefox 開發者工具壓力的緩解，我們寫了個方便的指南：從 Firebug 遷移。

+ +
+

貢獻

+ +

如果你想幫忙改進開發者工具，這些資源能幫助你。

+ +
+
+
Get Involved
+
告訴你如何參與其中的 Mozilla wiki 頁面。
+
firefox-dev.tools
+
能幫你找到目前在處理的錯誤。
+
+
-- cgit v1.2.3-54-g00ecf