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/3d_view/index.html | 102 ++++ files/zh-tw/tools/browser_toolbox/index.html | 41 ++ files/zh-tw/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 24 + .../debugger/how_to/set_a_breakpoint/index.html | 25 + files/zh-tw/tools/debugger/index.html | 58 ++ .../tools/firefox_os_1.1_simulator/index.html | 240 +++++++++ files/zh-tw/tools/index.html | 192 +++++++ files/zh-tw/tools/network_monitor/index.html | 584 +++++++++++++++++++++ .../how_to/examine_grid_layouts/index.html | 30 ++ files/zh-tw/tools/page_inspector/how_to/index.html | 11 + files/zh-tw/tools/page_inspector/index.html | 50 ++ .../zh-tw/tools/performance/allocations/index.html | 86 +++ .../zh-tw/tools/performance/frame_rate/index.html | 58 ++ files/zh-tw/tools/performance/index.html | 82 +++ .../firefox_for_android/index.html | 77 +++ files/zh-tw/tools/remote_debugging/index.html | 22 + .../zh-tw/tools/responsive_design_mode/index.html | 184 +++++++ files/zh-tw/tools/scratchpad/index.html | 109 ++++ files/zh-tw/tools/settings/index.html | 185 +++++++ files/zh-tw/tools/style_editor/index.html | 103 ++++ files/zh-tw/tools/web_audio_editor/index.html | 36 ++ .../tools/web_console/console_messages/index.html | 389 ++++++++++++++ files/zh-tw/tools/web_console/index.html | 37 ++ .../web_console/keyboard_shortcuts/index.html | 10 + .../web_console/opening_the_web_console/index.html | 23 + .../zh-tw/tools/web_console/rich_output/index.html | 75 +++ .../tools/web_console/split_console/index.html | 14 + .../the_command_line_interpreter/index.html | 121 +++++ files/zh-tw/tools/webide/index.html | 290 ++++++++++ .../zh-tw/tools/webide/troubleshooting/index.html | 46 ++ 31 files changed, 3315 insertions(+) create mode 100644 files/zh-tw/tools/3d_view/index.html create mode 100644 files/zh-tw/tools/browser_toolbox/index.html create mode 100644 files/zh-tw/tools/debugger/how_to/index.html create mode 100644 files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/zh-tw/tools/debugger/index.html create mode 100644 files/zh-tw/tools/firefox_os_1.1_simulator/index.html create mode 100644 files/zh-tw/tools/index.html create mode 100644 files/zh-tw/tools/network_monitor/index.html create mode 100644 files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/zh-tw/tools/page_inspector/how_to/index.html create mode 100644 files/zh-tw/tools/page_inspector/index.html create mode 100644 files/zh-tw/tools/performance/allocations/index.html create mode 100644 files/zh-tw/tools/performance/frame_rate/index.html create mode 100644 files/zh-tw/tools/performance/index.html create mode 100644 files/zh-tw/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/zh-tw/tools/remote_debugging/index.html create mode 100644 files/zh-tw/tools/responsive_design_mode/index.html create mode 100644 files/zh-tw/tools/scratchpad/index.html create mode 100644 files/zh-tw/tools/settings/index.html create mode 100644 files/zh-tw/tools/style_editor/index.html create mode 100644 files/zh-tw/tools/web_audio_editor/index.html create mode 100644 files/zh-tw/tools/web_console/console_messages/index.html create mode 100644 files/zh-tw/tools/web_console/index.html create mode 100644 files/zh-tw/tools/web_console/keyboard_shortcuts/index.html create mode 100644 files/zh-tw/tools/web_console/opening_the_web_console/index.html create mode 100644 files/zh-tw/tools/web_console/rich_output/index.html create mode 100644 files/zh-tw/tools/web_console/split_console/index.html create mode 100644 files/zh-tw/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/zh-tw/tools/webide/index.html create mode 100644 files/zh-tw/tools/webide/troubleshooting/index.html (limited to 'files/zh-tw/tools') diff --git a/files/zh-tw/tools/3d_view/index.html b/files/zh-tw/tools/3d_view/index.html new file mode 100644 index 0000000000..463946c4c7 --- /dev/null +++ b/files/zh-tw/tools/3d_view/index.html @@ -0,0 +1,102 @@ +--- +title: 3D view +slug: Tools/3D_View +translation_of: Tools/3D_View +--- +
+

自 Firefox 47 開始，3D View 不再可用

+ +

有個 Tilt 3D 套件提供相同功能。但是，請記得這和內建版本一樣，無法在 multiprocess Firefox 使用。

+
+ +

當您點擊 3D View 按鈕，頁面將進入 3D 檢視模式，在這模式之下，您將看到頁面以 HTML 標籤層次，形成從底部向外突起的 3D 模型。這功能讓您可用更簡單的方式檢視頁面結構。

+ +

+ +

經由點擊及拖曳，您可以旋轉、重新定位 3D 圖像，以看到不同角度來確定結構。原先於屏幕外的元素將變為可見，如此一來您將可看見他們和可見元素的關係。您可以點擊元素經由 HTML panel 或是 Style panel 查看 HTML。相反地，您也能點擊導航列去選擇選取 3D View 中的特定元素。

+ +

如果您在頁面檢測器沒看到 3D 按鈕，可能是您的顯示卡驅動需要更新。查看無法使用的清單以取得更多資訊

+ +

操作 3D View

+ +

該怎麼使用鍵盤快速鍵及滑鼠控制 3D View？

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能鍵盤按鍵滑鼠
縮放+ / -滾輪上下
左右旋轉a / d滑鼠左右
上下翻轉w / s滑鼠上下
左右平移← / →滑鼠左右
上下平移↑ / ↓滑鼠上下
重設縮放大小0重設縮放大小為預設值
聚焦於選擇的節點f請確定該節點可見 {{ fx_minversion_inline("13.0") }}
重設 3D Viewr將縮放、旋轉、位置重設為預設值 {{ fx_minversion_inline("12.0") }}
隱藏節點x +

隱藏選擇的節點，這在您需要找到被遮蓋的節點時很實用 {{ fx_minversion_inline("12.0") }}

+
+ +

3D view 的使用時機

+ +

下列時機中，3D View 很實用：

+ + + +

另見

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/zh-tw/tools/browser_toolbox/index.html b/files/zh-tw/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..686a7ed06d --- /dev/null +++ b/files/zh-tw/tools/browser_toolbox/index.html @@ -0,0 +1,41 @@ +--- +title: Browser Toolbox +slug: Tools/Browser_Toolbox +translation_of: Tools/Browser_Toolbox +--- +

瀏覽器工具箱有別於一般的工具箱，它可以讓您對附加元件以及瀏覽器本身的 JavaScript 程式碼除錯。瀏覽器工具箱所顯示的內容為整個瀏覽器而非僅有單一頁面的內容。h

+ +
+

註: 如果您要為無需新啟動或是基於 SDK 的附加元件除錯，請使用 Add-on Debugger。

+
+ +

啟用瀏覽器工具箱

+ +

瀏覽器工具箱預設為關閉。要啟用瀏覽器工具箱，您必須要勾選「Enable chrome and addon debugging」與「Enable remote debugging」兩個選項。

+ + + +

Now you should see a new item in the Web Developer menu in Firefox labeled "Browser Toolbox".

+ +

Click the menu item and you'll be presented with a dialog like this:

+ +

Click OK, and the Browser Toolbox will open in its own window:

+ +

You'll see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:

+ + + +

 

+ +

 

diff --git a/files/zh-tw/tools/debugger/how_to/index.html b/files/zh-tw/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/zh-tw/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html b/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..d630094589 --- /dev/null +++ b/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,24 @@ +--- +title: Open the debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

有三種方式可以打開除錯器:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +
+
+
diff --git a/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html b/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..04044571e5 --- /dev/null +++ b/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,25 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+ +

你可以使用以下任一種方法來設置中斷點；

+ + + +

以下影片使用 context menu 來設置一個中斷點:

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

每個中斷點會在除錯器中的兩個地方顯示；

+ + diff --git a/files/zh-tw/tools/debugger/index.html b/files/zh-tw/tools/debugger/index.html new file mode 100644 index 0000000000..ca245fc16a --- /dev/null +++ b/files/zh-tw/tools/debugger/index.html @@ -0,0 +1,58 @@ +--- +title: 除錯器 +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +
+

本頁在描述 Firefox Nightly 與 Firefox Developer Edition 第 52 版以後的 JavaScript 除錯器（Debugger）。

+ +

要找在此版本之前、或是位於 Beta 與 Release 通道的 Firefox，請參閱Firefox 52 之前的除錯器。

+ +

如果你是這個版本的除錯器，但需要用舊版本的除錯器，你可以去 about:config 那裡，把「devtools.debugger.new-debugger-frontend」選為 false

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

JavaScript 除錯器可以讓 JavaScript 單步執行，並檢查或修改其狀態，以便查找錯誤。

+ +

你可以在本地或是在遠端除錯用 Firefox 除錯。一個遠端除錯的例子，就是在 Android 設備上執行 Firefox for Android。請參閱遠端除錯以理解如何把欲除錯的目標，連接到除錯器上。

+ +

The debugger ships inside Firefox, and these pages describe how to use the version that's embedded in Firefox. However, you can also run it as a standalone web application, and can then use it to debug code running in other browsers and in Node. For more details on that, see the project's GitHub repository.

+ +

新版除錯器尚未支援所有舊版除錯器的功能。請參閱新版除錯器的侷限。

+ +
+

用戶介面導覽

+ +

如果要自己摸索除錯器，我們有UI 的快速導覽。

+ +
+

如何

+ +

如果要知道除錯器可以做什麼，請看看以下的教學：

+ +
+ +
+ +
+

參閱

+ +
+ +
diff --git a/files/zh-tw/tools/firefox_os_1.1_simulator/index.html b/files/zh-tw/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..08483cbb3f --- /dev/null +++ b/files/zh-tw/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,240 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
+
+
+

本頁將說明「舊版」的 Firefox OS 模擬器 (Firefox OS Simulator)。只有在開發 Firefox 1.1 所適用的 App 時，才使用 1.1 版模擬器。且本版模擬器僅能安裝於 Firefox 24 或 Firefox 25 之上。

+

如果要針對 Firefox OS 1.2 或更高版本開發 App，則必須使用「應用程式管理員 (App Manager)」。

+

若需要任何協助，請透過 dev-developer-tools 郵件群組或 #devtools on irc.mozilla.org 發問。

+
+

Firefox OS 模擬器 (Firefox OS Simulator) 附加元件，可讓你在桌機上測試自己的 Firefox OS App。若與實際裝置相較，模擬器可協助開發者順利完成「撰寫─測試─除錯」的程序，而且你還不用真的弄到實際設備就能夠測試 App。

+

此附加元件基本上包含：

+
    +
  • 模擬器：其內有 Firefox OS Desktop Client，屬於 Firefox OS 較高層級的版本，可於桌機中執行。模擬器所具備的某些附加模擬功能，甚至是標準 Firefox OS 桌面版所沒有的。
    • +
  • Dashboard：此為 Firefox 瀏覽器所管理的工具，可用以啟動/停止模擬器，並可安裝、除錯、解除安裝模擬器所執行的 App。Dashboard 亦可協助將 App 送入實際裝置，針對常見問題而檢查 App 的 manifest 檔案。.
    • +
+

下方截圖則是以模擬器所進行的除錯作業。

+

「Dashboard」即於右上的 Firefox 分頁中執行。我們在這裡新增了「Where am I?」的封裝式 (Packaged) App。左上方就是模擬器正執行的 App。這裡同時也連上了除錯工具，就位在視窗底端。你也可以看到我們設定了 App 的中斷點。

+

+

本篇指南涵蓋下列主旨：

+ +
+ 若要用模擬器對實際的 Apps 進行除錯，請參閱《Firefox OS 模擬器簡易攻略》頁面。
+

安裝「Firefox OS Simulator」附加元件

+

此模擬器軟體已封裝並發佈為 Firefox 的附加元件。安裝步驟為：

+
    +
  1. 開啟 Firefox 並前往 addons.mozilla.org 上的 Simulator 頁面。
    2. +
  2. 點選「Add to Firefox」。
    3. +
  3. 下載附加元件完畢，系統隨即提醒你安裝。點選「立刻安裝 (Install Now)」。
    4. +
+

由於附加元件的檔案大小有所不同，Firefox 可能於安裝期間暫停數秒，並可能顯示「注意：發現容易停止回應的程式碼 (Warning: Unresponsive script)」對話框。如果出現此對話框，就點選「繼續 (Continue)」等到安裝作業結束即可。自 Firefox 27 起應該就不會再出現此問題。
+
+ 一旦安裝模擬器附加元件完畢，Firefox 將定期檢查是否有更新版本，隨時保持最新版本。

+

模擬器安裝期間隨即自動開啟 Dashboard。另外只要點選「Firefox」選單 (若是 OS X 與 Linux，則為「工具」選單)，再點選「網頁開發者 (Web Developer)」→「Firefox OS Simulator」，都可再開啟 Dashboard：

+


+ Dashboard 可讓你將 App 新增至模擬器內並執行之。看起來就像下圖：

+

新增、移除、重新整理 App

+

新增 App

+

如果要將封裝式 (Packaged) App 新增至模擬器中，則請開啟 Dashboard，點選「Add Directory」並找到 App 的 manifest 檔案。
+
+ 若要新增托管式 (Hosted) App，則於「URL for page or manifest.webapp」的文字框中輸入網址，再點選「Add URL」。如果網址指向 manifest 檔案，就會使用該 manifest 檔案；反之，則 Dashboard 將針對該網址產生 manifest 檔案。所以只要輸入網站網址，都可新增該網站作為 App。
+
+ 在新增 App 時，Dashboard 將為 manifest 檔案執行一系列的測試，檢查是否有常見問題。可參閱下方 Manifest 檔案檢驗以了解測試細節。

+

除非 manifest 檔案檢驗程序真的發現了 App 的錯誤，否則 Dashboard 均將自動於模擬器中執行你的 App。

+

管理 App

+

一旦新增了 App，就會出現在管理程式的 App 清單中：
+
+ 各個項目均提供了 App 的相關資訊：

+
    +
  • App 的名稱 ─ 取自於 manifest 檔案
    • +
  • App 的類型 ─ 可能為「Packaged」、「Hosted」、「Generated」之一
    • +
  • 其 manifest 檔案的連結
    • +
  • manifest 檔案檢驗的結果
    • +
+

另外會提供 4 項指令：

+
    +
  • 「Refresh」：在變更過 App 之後，可透過此指令更新並重新載入模擬器中的 App。此指令亦可讓 Dashboard 再次檢驗 manifest 檔案。如果變更過 App 之後卻沒有自動反應在「installed app:」中，則必須重新整理才能套用變更。
    • +
  • 「Connect」：此指令可銜接開發工具與指定的 App。如果尚未執行 App 與模擬器，則 Dashboard 將啟動之。
    • +
  • 「Remove」(也就是「X」)：此指令可為 Dashboard 與模擬器移除 App。只要開啟了 Dashboard 分頁，亦可取消此動作。
    • +
  • 「Receipt」：此指令可針對付費 App 測試收據的驗證作業。在選擇了所要測試的收據類型之後，將重新安裝該 App 並包含所選類型的測試收據。
    • +
+
+

從模擬器視窗重新整理 App：在 App 執行時，只要透過選單列與相關快捷鍵，即可從模擬器視窗直接更新並重新載入 App。

+
+

檢驗 Manifest 檔案

+

當提供 manifest 檔案時，管理程式將執行某些檢驗測試，所回報的問題可分為 3 大類：

+
    +
  • manifest 錯誤：這種問題將導致 App 無法執行。
    • +
  • manifest 警示：這種問題將導致 App 無法正確運作。
    • +
  • 模擬器特定警示：目前模擬器尚未支援此 App 所使用的功能。
    • +
+

管理程式將總結 App 所遇到的問題。可點選摘要以獲得更多詳情。

+

Manifest 檔案錯誤

+

下列狀態均將由 Dashboard 回報為錯誤。也就是說，你必須修復之後才能在模擬器中繼續執行 App：

+
    +
  • manifest 檔案沒有必要的「name」欄位。
    • +
  • manifest 檔案為無效 JSON。
    • +
  • 此 App 屬於托管式 App，但其 manifest 檔案中的類型 (type) 欄位為「Privileged」或「Certified」；而此 2 種類型僅限用於封裝式 App。
    • +
  • 常見的 appCache 錯誤 (封裝式 App 無法使用 appCache，對 manifest 網址的請求，回傳了 HTTP 重新導向狀態或 HTTP 錯誤狀態)
    • +
+

如果新增的 manifest 檔案缺少了「name」欄位，就會出現如下圖的結果：
+

+

Manifest 檔案警示

+

下列 manifest 檔案的問題，Dashboard 均將回報為警示：

+
    +
  • 缺少圖示。
    • +
  • 圖示低於 128 像素：提交至 Marketplace 的所有 App，其代表圖示均必須為至少 128 像素的方塊圖。
    • +
  • 無法辨別「type」欄位。
    • +
  • manifest 檔案所請求的「權限」無法辨別。
    • +
  • manifest 檔案所請求的「權限」遭拒。
    • +
  • manifest 檔案所請求的「權限」無法決定其存取作業。
    • +
+

模擬器特定警示

+

最後，針對 App 所要使用的 Firefox OS 功能，但模擬器卻尚未支援的情況，管理程式將送出警示：

+
    +
  • 「type」欄位屬於「Certified」，但模擬器尚未完整支援 Certified App。
    • +
  • manifest 檔案請求「權限」以使用 API，但模擬器尚未支援此 API。
    • +
+

執行模擬器

+

有 2 種方式可啟動模擬器：

+
    +
  • 如果要新增、更新、移除 App，或是按下 App 輸入項旁邊的「Run」按鈕，則 Dashboard 就會在模擬器中自動執行 App。
    • +
  • 如果按下 Dashboard 左側的「Stopped」按鈕，則模擬器將回到首頁畫面，讓你再瀏覽自己的 App。
    • +
+

不論哪種方法，只要模擬器處於執行狀態，則「Stopped」按鈕會轉成綠色，且按鈕文字也會轉成「Running」。如果要停下模擬器，再按下相同按鈕即可。
+
+ 模擬器將以獨立視窗顯示，而該模擬畫面將為 320x480 像素，且底部工具列 (Toolbar) 將提供某些額外功能。

+

+

若要模擬觸控事件，只要點擊滑鼠不放再拖曳即可。所以如果在主畫面按下滑鼠並由右至左拖曳，就可以看到內建的 App 還有你自己新增的 App：

+

+

模擬器工具列

+

在模擬器視窗底部的工具列，由左至右分別為主畫面 (Home)、畫面旋轉 (Screen Rotation)、地理位置定位 (Geolocation) 共 3 個按鈕：

+
    +
  • 「主畫面」可回到主畫面 (或長按不放則可進入工作清單)。
    • +
  • 「畫面旋轉」可切換裝置的橫向、直向畫面；即產生 orientationchange 事件。
    • +
  • 「地理位置定位」將觸發對話框，詢問使用者是否要分享自己的地理位置。這個功能可能會套用你目前的座標，或提供自訂座標。App 可搭配 Geolocation API 而提供此功能。
    • +
+

+

模擬器選單列 (Menubar)

+

在頂端的選單列上即提供多項有用的指令，讓你達到更高的開發效率：

+

+
    +
  • File -> Quit (Ctrl/Cmd - Q)：關閉模擬器
    • +
  • App -> Refresh (Ctrl/Cmd - R)：重新整理執行中的 App
    • +
+

若於鍵盤上使用「App Refresh」 指令快捷鍵，則開發 App 就更像是撰寫網頁一樣：

+
    +
  • 更改程式碼 (並依需要而重新執行自己的程式設計工具，如 volo / yeoman / grunt)
    • +
  • 按下快捷鍵，即可重新整理正於模擬器中執行的 App
    • +
+
+

「Refresh App and Clear Data」隱藏快捷鍵：針對模擬器為 Apps 所儲存的資料，有時若能清除相關資料更有利於開發作業。因此模擬器亦提供隱藏版的快捷鍵「Shift - Ctrl/Cmd - R」。在清除下列資料時，此快捷鍵亦可重新整理正執行中的 App：

+
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+

附掛開發者工具

+

使用者可為模擬器附掛開發工具，讓 App 的除錯作業更順利。目前僅能附掛JavaScript 除錯器 (JavaScript Debugger)、網頁主控台 (Web Console)、樣式編輯器 (Style Editor)、效能分析器 (Profiler)、網路監測器 (Network Monitor)。當然，我們仍將持續支援更多開發工具。

+
+

某些工具僅能用於 Firefox 的 Beta、Aurora，或 Nightly 版本。

+
+

若要為模擬器附掛開發工具，則可按下任一 App 的「Connect」按鈕：

+

+

Dashboard 分頁下方隨即開啟開發者工具面板，並銜接 App：

+

+

網頁主控台 (Web Console)

+

如果勾選了「Stopped/Running」開關下方的「Console」方塊，則執行模擬器時會開啟錯誤主控台 (Error Console)。透過這個通用的主控台物件，你的 App 均將由主控台所記錄。

+

除錯器 (Debugger)

+

透過除錯器，可針對執行中的 App 逐行檢查其 JavaScript 程式碼、管理中斷點、監看表示式，以更迅速追蹤錯誤與問題。進一步了解除錯器。

+

樣式編輯器 (Style Editor)

+

可檢查並編輯 App 中設定的 CSS 檔案。你所進行的變更亦將即時套用至 App；而不需再重新整理。進一步了解樣式編輯器。

+

效能分析器 (Profiler)

+

若銜接 App 與效能分析器，即可找出 JavaScript 程式碼耗時過長的部分。效能分析器將對目前 JavaScript 的 Call stack 定期取樣，並編寫樣本的統計資料。進一步了解效能分析器。

+

網路監測器 (Network Monitor)

+

新的網路監測器提供友善介面，可針對 App 所啟動的網路請求，分析其狀態、標頭、內容、時間點等資訊。進一步了解網路監測器。

+

收據 (Receipt)

+

若你正開發付費 App，就應該在有效 (以加密方式簽署) 收據上，測試自己的收據驗證代碼 (此代碼將驗證使用者是否已購買了 App 或收到退款，接著通知使用者並鎖定/解鎖 App 的功能)。

+

模擬器的 Dashboard 對各個 App 均提供了「Receipts」選單，讓你可選擇「Valid」、「Invalid」、「Refunded」測試收據而安裝 App。只要選擇你想要測試的收據類型，則 Dashboard 就會從 Marketplace 收據服務中取得該類型的測試收據，並在模擬器中安裝 App：

+

+

直接傳輸 (Push to device)

+

如果你手上已經有 Firefox OS 裝置並連上了模擬器，就可以從 Dashboard 直接將 App 送進裝置。

+

連上裝置

+

根據指南中的說明，就可順利將 Firefox OS 裝置連上桌機。另請注意，模擬器附加元件已經包含了 ADB，所以你不需再次安裝。

+

將 App 送入裝置

+

設定完畢之後，就可透過 USB 銜接裝置與桌上型電腦。你可以看到 Dashboard 左邊出現「Device connected」的註記，而且各個 App 項目上都會出現新的「Push」指令：

+

+

按下「Push」就會把 App 安裝進 Firefox OS 裝置中。

+
+

手動步驟：

+
    +
  • +

    一旦將 App 送入裝置之後，就必須手動關閉並重新啟動，才能取得更新內容。

    +
    • +
  • +

    如果你更新了 manifest 檔案 (如 App 的名稱、方向、類型、權限)，就必須重新啟動作業系統，才能讓變更生效。

    +
    • +
+
+

Firefox OS 裝置連線確認

+

每次只要重新啟動裝置，就必須確認裝置上的第一次「Push」請求：

+

+

Linux 上的疑難排除

+

如果建立 udev 規則之後還是無法銜接裝置，則請參閱這個問題。

+

模擬器的限制

+

請注意，Firefox OS 模擬器仍無法提供完美的模擬作業。

+

硬體限制

+

模擬器除了螢幕尺寸的限制之外，也無法模擬 Firefox OS 裝置的硬體 (例如 CPU 速度或可用的記憶體容量)。

+

音訊/視訊編碼

+

下列編碼 (Codecs) 因硬體加速解碼而有所不同，因此尚未支援：

+
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+

也就是說，若 App 或網站 (如 Youtube) 使用這些編碼，則模擬器將無法測試其中的視訊回播功能。

+

尚未支援的 API

+

一般來說，因為桌上型電腦無法使用支援硬體，所以可於裝置上運作的特定 API，可能無法用於模擬器之上。我們另外針對某些 API (例如 Geolocation 地理位置定位) 建構了模擬功能，未來版本亦將新增更多模擬 API。但目前仍尚未支援下列 API。如果使用了這些 API，也只會得到錯誤的報告或結果：

+ +

獲得協助

+

如果你發現了任何錯誤，請到 GitHub 提交這些錯誤。如果有任何問題，也請透過 dev-developer-tools 郵件群組或到 #devtools on irc.mozilla.org 上發問。

+

啟動詳細資訊 (verbose) 記錄的方法

+

透過 about:config 即可建立 extensions.r2d2b2g@mozilla.org.sdk.console.logLevel，接著將之設定為整數值 0，並停用/重新啟用附加元件即可。有關模擬器作業的其他訊息，均將顯示於錯誤主控台 (Error Console) 中；或是較新版本 Firefox 的瀏覽器主控台 (Browser Console)。

+
+
+
+

 

+
+

 

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
+
能幫你找到目前在處理的錯誤。
+
+
diff --git a/files/zh-tw/tools/network_monitor/index.html b/files/zh-tw/tools/network_monitor/index.html new file mode 100644 index 0000000000..ee1a1d0624 --- /dev/null +++ b/files/zh-tw/tools/network_monitor/index.html @@ -0,0 +1,584 @@ +--- +title: Network Monitor +slug: Tools/Network_Monitor +translation_of: Tools/Network_Monitor +--- +

網路監視器提供檢視所有從 Firefox 送出的網路需求 (像是從瀏覽器開啟一個頁面，或是一個 XMLHttpRequests )，例如需求所花費的時間，以及其他更詳細的資訊。

+ +

Opening the Network Monitor

+ +

There are a few different ways to open the Network Monitor:

+ +
+

Please note the keyboard shortcut was changed in Firefox 55

+
+ + + +

The Network Monitor will appear at the bottom of the browser window. Reload the page to see the requests:

+ +

+ +

The Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page.

+ +

UI overview

+ +

The UI is divided into four main pieces:

+ + + +

+ + + +

Performance analysis view

+ +

Toolbar

+ +

From Firefox 47 onwards, the toolbar is at the top of the main window. In earlier versions of Firefox, it's at the bottom.

+ +

It provides:

+ + + +
+

Note: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).

+
+ +

Network request list

+ +

By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:

+ +

By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the Settings.

+ +

Network request columns

+ +

From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:

+ + + +

The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.

+ +

Image thumbnails

+ +

If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:

+ +

+ +

Security icons

+ +

The Network Monitor displays an icon in the Domain column:

+ +

+ +

This gives you extra information about the security status of the request:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IconMeaning
HTTPS
Weak HTTPS (for example, a weak cipher was used)
Failed HTTPS (for example, a certificate was invalid)
HTTP
Localhost
+ +

For weak and failed HTTPS requests, you'll see more details of the problem in the Security tab.

+ +

Cause column

+ +

The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:

+ + + +
+

When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened. Note that since Firefox 55, stack traces can be found in the Stack Trace tab of the {{anch("Network request details")}} panel instead.

+ +

+ +

You can then click on any of the entries in the popup to open up the relevant script in the Debugger pane.

+
+ +

Timeline

+ +

The request list also displays a timeline for the different parts of each request.

+ +

+ +

Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the Timings page.

+ +

Starting in Firefox 45, the timeline also contains two vertical lines:

+ + + +

Filtering requests

+ +

You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.

+ +

Filtering by content type

+ +

To filter by content type, use the buttons in the toolbar.

+ +

Filtering XHR

+ +

To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the toolbar.

+ +

Filtering WebSockets

+ +
+

New in Firefox 48

+
+ +

To see only WebSocket connections, use the "WS" button in the toolbar.

+ +

To monitor the data exchanged in WebSocket connections, try the WebSocket Monitor add-on.

+ +

Filtering by URL

+ +

To filter by URL, use the search box in the toolbar. Click in the search box, or press Ctrl + F (or Cmd + F on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.

+ +

From Firefox 45,  you can filter requests that don't contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.

+ +

Filtering by properties

+ +
+

New in Firefox 55

+
+ +

To filter by specific request properties, use the search box in the toolbar. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (-) negates the filter. You can combine different filters together by seperating them with a space.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordMeaningExamples
status-codeShows resources that have the specific HTTP status code.status-code:304
methodShows resources that have were requested via the specific HTTP request method.method:post
domainShows resources coming from a specifc domain.domain:mozilla.org
remote-ipShows resources coming from a server with the specified IP.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeShows resources matching a specific cause type. The types can be found in the description of the cause column.cause:js
+ cause:stylesheet
+ cause:img
transferredShows resources having a specific transferred size or a transferred size close to the one specified.  k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.transferred:1k
sizeShows resources having a specific size (after decompression) or a size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.size:2m
larger-thanShows resources that are larger than the specified size in bytes. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024.larger-than:2000
+ -larger-than:4k
mime-typeShows resources that match the specified MIME type.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached and is:from-cache shows only resources coming from cache.
+ is:running shows only resources, which are currently being transferred.		is:cached
+ -is:running
schemeShows resources transferred via the given scheme.scheme:http
has-response-headerShows resources that contain the specified HTTP response header.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainShows the resources that have a Set-Cookie header with a Domain attribute that matches the specified value.set-cookie-domain:.mozilla.org
set-cookie-nameShows the resources that have a Set-Cookie header with a name that matches the specified value.set-cookie-name:_ga
set-cookie-valueShows the resources that have a Set-Cookie header with a value that matches the specified value.set-cookie-value:true
regexpShows the resources having a URL that matches the given {{Glossary("regular expression")}}.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Context menu

+ +

Context-clicking on a row in the list displays a context menu with the following options:

+ + + +

Edit and Resend

+ +

This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.

+ +

Open in New Tab

+ +

Resends the request in a new tab — very useful for debugging asynchronous requests.

+ +
+

Note: Since Firefox 59, POST requests are correctly resent as POST requests ({{bug(1220758)}}).

+
+ +

Copy as cURL

+ +

This option copies the network request to the clipboard as a cURL command, so you can execute it from a command line. The command may include the following options:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]If the method is not GET or POST
--dataFor URL encoded request parameters
--data-binaryFor multipart request parameters
--http/VERSIONIf the HTTP version is not 1.1
-IIf the method is HEAD
-H +

One for each request header.

+ +

From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include --compressed instead of -H "Accept-Encoding: gzip, deflate". This means that the response will be automatically decompressed.

+
+ +

Copy/Save All As HAR

+ +
+

New in Firefox 41.

+
+ +

These options create an HTTP Archive (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.

+ +

Network request details

+ +

Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.

+ +

+ +

The tabs at the top of this pane enable you to switch between the following pages:

+ + + +

Clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.

+ +

Headers

+ +

This tab lists basic information about the request:

+ +

+ +

This includes:

+ + + +

You can filter the headers that are displayed:

+ +

+ +
+

New in Firefox 54

+
+ +

From Firefox 54 onwards, you will see a question mark icon next to each header in the Status code row — this is a link to more information about that particular status code, in the MDN documentation of the HTTP headers.

+ +

Cookies

+ +

This tab lists full details of any cookies sent with the request or response:

+ +

+ +

As with headers, you can filter the list of cookies displayed.

+ +

Params

+ +

This tab displays the GET parameters and POST data of a request:

+ +

+ +

Response

+ +

The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:

+ +

+ +

If the response is JSON, it will be shown as an inspectable object.

+ +

If the response is an image, the tab displays a preview:

+ +

+ +

HTML preview

+ +

From Firefox 59 onwards, if the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.

+ +

+ +

Timings

+ +

The Timings tab breaks a network request down into the following subset of the stages defined in the HTTP Archive specification:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
Blocked +

Time spent in a queue waiting for a network connection.

+ +

The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the network.http.max-persistent-connections-per-server preference. If all connections are in use, the browser can't download more resources until a connection is released.

+
DNS resolutionTime taken to resolve a host name.
ConnectingTime taken to create a TCP connection.
SendingTime taken to send the HTTP request to the server.
WaitingWaiting for a response from the server.
ReceivingTime taken to read the entire response from the server (or cache).
+ +

It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:

+ +

+ +

Security

+ +

If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:

+ +

+ +

The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:

+ +
    +
  1. Using SSLv3 instead of TLS
    2. +
  2. Using the RC4 cipher
    3. +
+ +

+ +

Stack trace

+ +

Since Firefox 55, stack traces are shown in the Stack Trace tab, for responses that have a stack trace of course.

+ +

+ +

Pausing and resume network traffic recording

+ +

In Firefox 58 and above, the Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.

+ +

The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — .

+ +

You can see it here in context:

+ +

+ +

Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.

+ +

Performance analysis

+ +

The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.
+
+ To run the performance analysis tool click the stopwatch icon in the toolbar.

+ +

(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)

+ +

The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:

+ +

+ +

The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.

+ +

To get back to the Network Monitor's list of network requests click the "Back" button on the left.

+ +

Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see only that resource type.

diff --git a/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..af308f0b0b --- /dev/null +++ b/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,30 @@ +--- +title: CSS 格線檢測器：檢查格線布局 +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +

在規則畫面的格線圖標

+ +
Firefox 52 新功能
+ +

自 Firefox 52 以後的開發者工具，可以針對格線布局，要求檢測器覆蓋上格線指示。

+ +

在擁有 display: grid 的元素內，規則畫面會出現格線圖標：。點選圖標以覆蓋顯示的格線，包括了線與軌道：

+ +

就算選擇其他元素，覆蓋還是會出現，因此你可以編輯 CSS 的格線單元、並檢查格線如何做動。

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

格線布局面板

+ +
Firefox 56 新功能
+ +

Firefox 56 基於前述的格線功能，提供了嶄新的面板。充分的選項及資訊，有利於格線偵錯。你可以在 Powerful New Additions to the CSS Grid Inspector in Firefox Nightly 查看所有需要的資訊。

+ +

{{EmbedYouTube("dU7xtnzfqxQ")}}

+ +

參見

+ + diff --git a/files/zh-tw/tools/page_inspector/how_to/index.html b/files/zh-tw/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..69184c59cc --- /dev/null +++ b/files/zh-tw/tools/page_inspector/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: 如何…… +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +

這裡蒐集了針對各種「如何……」的文章連結。這些文章連結會連到詳述有關「如何……」所需的技術。

+ +

{{ ListSubpages () }}

diff --git a/files/zh-tw/tools/page_inspector/index.html b/files/zh-tw/tools/page_inspector/index.html new file mode 100644 index 0000000000..dea2fd5139 --- /dev/null +++ b/files/zh-tw/tools/page_inspector/index.html @@ -0,0 +1,50 @@ +--- +title: 頁面檢測器 +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +

使用頁面檢測器檢測並修改網頁的 HTML 與 CSS。

+ +

You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.

+ +
+

用戶介面導覽

+ +

To find your way around the Inspector, here's a quick tour of the UI.

+ +
+

如何

+ +

想知道頁面檢測器可意做什麼，請參考以下教學：

+ +
+ +
+ +
+

參考

+ +
+ +
diff --git a/files/zh-tw/tools/performance/allocations/index.html b/files/zh-tw/tools/performance/allocations/index.html new file mode 100644 index 0000000000..e124139c49 --- /dev/null +++ b/files/zh-tw/tools/performance/allocations/index.html @@ -0,0 +1,86 @@ +--- +title: Allocations +slug: Tools/Performance/Allocations +translation_of: Tools/Performance/Allocations +--- +
+

The Allocations view in the Performance tool shows you which functions in your page are allocating the most memory over the course of the profile.

+ +

For performance this is important mostly because allocating a lot of memory, or making a lot of allocations, can trigger garbage collection. This in turn can hurt the responsiveness of a page.

+
+ +
+

The Allocations view is new in Firefox 46.

+
+ +

To enable the Allocations view, you must check "Record Allocations" in the Performance tool settings, before recording a profile. Then record a profile as usual, and you will see a new tab labeled "Allocations" in the toolbar:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Anatomy of the allocations view

+ +

The allocations view looks something like this:

+ +

+ +

The allocations view periodically samples allocations that are made over the recording. Each row represents a function in which at least one allocation-sample was taken during the recording.

+ +

It includes the following columns:

+ + + +

Rows are sorted by the "Self Bytes" column.

+ +

So in the example above:

+ + + +

Next to each function name is a disclosure arrow. Click this to see the places this function was called from:

+ +

+ +

Here you can see that signalLater() was called from two places: removeInner() and setSelectionInner(). In this way you can walk back up the call stack, and understand better the context for these allocations.

+ +

Self Cost and Total Cost

+ + + +

You'll see that there are separate sets of columns for "Self" and for "Total". "Self" records samples taken only in this function. "Total" records samples taken in this function or in functions called by this function. At the top level, these are always the same, since the view presents "leaf" functions at the top level (that is, it presents an inverted view of the call stack). But if you start walking back up the call stack, you'll see the difference:

+ +

+ +

Here, 8904 samples were taken in signalLater(). But signalLater() was called from two places: removeInner() and setSelectionInner(). Both these functions have 0 in Self Count, meaning that no allocations were seen directly in these functions. However, removeInner() has 8901 in Total Count, while setSelectionInner() has just 3 in Total Count. This is telling us that, of the 8904 allocations seen in signalLater(), all but three came through the removeInner() branch.

+ +

Allocations and garbage collection

+ +

Of course, the memory allocated by a site is in itself useful information to know. But the main connection between the allocation profile of a site and its responsiveness is the cost of garbage collection (GC).

+ +

With a garbage-collected language, like JavaScript, the runtime periodically needs to walk the heap looking for objects that are no longer reachable, and then freeing the memory they occupy. While GC events like this are executing, the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.

+ +

To reduce the impact on responsiveness, SpiderMonkey (the JavaScript engine in Firefox) can perform GC in small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.

+ +

GC events are shown as red markers in the Waterfall view, and are a big red flag for responsiveness,  sometimes running for hundreds of milliseconds:

+ +

+ +

If you're seeing GC events in your site's performance profile, what can you do? SpiderMonkey uses a complex set of heuristics to decide when to do what sort of garbage collection.

+ +

In general, though: allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes SpiderMonkey more likely to run garbage collection, and more likely to run full, non-incremental garbage collection.

+ +

If a GC event was caused by allocation pressure, then the sidebar on the right of the marker in the Waterfall view contains a link labeled "Show allocation triggers". If you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last GC cycle to the start of the one you clicked on. This shows you all the allocations that collectively triggered this GC event:

+ +

{{EmbedYouTube("tO5ovD9Jw4k")}}

+ +

If you're seeing these problems, consider whether you can reduce the number or size of the allocations you're making here. For example:

+ + diff --git a/files/zh-tw/tools/performance/frame_rate/index.html b/files/zh-tw/tools/performance/frame_rate/index.html new file mode 100644 index 0000000000..3c2c61467a --- /dev/null +++ b/files/zh-tw/tools/performance/frame_rate/index.html @@ -0,0 +1,58 @@ +--- +title: Frame rate +slug: Tools/Performance/Frame_rate +translation_of: Tools/Performance/Frame_rate +--- +
+

幀速率是一個網站的響應的量度。低或不一致的幀速率可以使一個網站出現反應遲鈍或janky，鬧了不好的用戶體驗。

+ +

60fps的幀頻是平穩的性能目標，給你所有需要響應某些事件更新的16.7毫秒時間預算。

+ +

在性能工具的幀速率圖表顯示你的幀速率在錄音的過程中。它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。

+
+ +

幀速率和響應

+ +

幀速率是指視頻設備可產生圖像（或幀）的速率。這是從電影和遊戲最熟悉的，但現在被廣泛用作網站和Web應用程序性能的措施。

+ +

在Web性能，幀封裝瀏覽器需要做的，以更新和重繪屏幕的工作。幀速率是最明顯適用於動畫：如果幀速率太低，動畫將具有生澀外觀，而更快的幀速率會更順暢。但幀速率也可用作站點的響應作為用戶的一般衡量與其交互。

+ +

例如，如果移動鼠標在某個頁面元素觸發一些JavaScript改變元素的外觀，並觸發回流和重繪，那麼所有這些工作需要在該框架完成。如果時間過長的瀏覽器來處理框架，那麼瀏覽器就會瞬間出現反應遲鈍（janky）。

+ +

同樣，如果通過網頁滾動涉及到很多複雜的頁面更新和瀏覽器無法跟上一個可接受的幀速率，滾動頁面會出現遲緩或偶爾會凍結。

+ +

在一般情況下，高和一致的幀速率將使用戶與網站的互動更愉快和吸引力。

+ +
+

60fps的幀頻被算為是平穩的性能目標，給你所有的需要在應對某些事件做出同步更新16.7毫秒的時間預算。

+ +

然而，一致性就顯得尤為重要：如果你不能提供60fps的，它是更好地實現較低的幀速率更穩定，並避免幀速率造成該網站凍結突然驟降。

+
+ +

幀速率圖

+ +

幀速率曲線圖中找到記錄概述性能工具的一部分。這需要當瀏覽器完成一幀的時間戳，並使用該跟踪幀速率的在記錄的過程中。

+ +

x軸是時間上的信息期間，和有三個註釋：最大幀速率，平均幀速率和最低幀速率。

+ +

使用幀速率圖

+ +

幀速率曲線的巨大價值在於，像Web控制台，它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。例如，這裡有一個性能配置截圖：

+ +

+ +

你可以看到，平均幀速率是相當健康的，但有三個點，其中幀頻為倒塌數十毫秒。這肯定會導致明顯的口吃的，在網頁中播放任何動畫。

+ +

幀速率圖表相關聯的瀑布摘要直接上面，並且有我們可以看到，在第一兩滴在幀速率是相關的橙色酒吧，其中表示時間花費在執行的JavaScript。

+ +

如果我們選擇了記錄這些片段之一，主瀑布視圖下它被放大到它，我們可以看到這是造成問題的功能：

+ +

+ +

我們從一個點擊事件的阻止主線程170毫秒的JavaScript函數。

+ +

它的功能有關係嗎？切換到火焰圖表看到在那個點調用堆棧：

+ +

+ +

有問題的函數被調用doPointlessComputationsInMainThread（） ，並且它在“main.js”定義。為了解決這個問題，我們可能會考慮將其分割成塊，並運行裡面件requestAnimationFrame，甚至運行在一個全功能的工人。在密集的JavaScript本文介紹如何使用這樣的策略，以修復因長期運行的JavaScript同步響應的問題。

diff --git a/files/zh-tw/tools/performance/index.html b/files/zh-tw/tools/performance/index.html new file mode 100644 index 0000000000..23ee0e1b61 --- /dev/null +++ b/files/zh-tw/tools/performance/index.html @@ -0,0 +1,82 @@ +--- +title: 效能 +slug: Tools/Performance +tags: + - 效能 +translation_of: Tools/Performance +--- +

效能工具給你網站整體反應度、JavaScript 與版面效能的洞察資訊。你可以使用效能工具在一段時間中錄製、測試你的網站的效能。這個工具會顯示瀏覽器在繪製你的網站時的所作之事，其總覽以及對應之畫框率的圖表。

+ +

你可以在這三個子工具中，了解效能數據多方面的深入資訊：

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

由此開始

+ +
+
+
+
UI Tour
+
+

從這裡開始探索效能工具，對介面的快速導覽。

+
+
+
+ +
+
+
How to
+
最基本的任務：開啟工具、建立、儲存、載入與設定錄製。
+
+
+
+ +
+

效能工具的元件

+ +
+
+
+
Frame rate
+
了解你網站的整體回應速度。
+
Call Tree
+
尋找你網站中的 JavaScript 瓶頸。
+
+
+ +
+
+
Waterfall
+
了解當用戶與你的網站互動時，瀏覽器在做些什麼。
+
Flame Chart
+
看看錄製過程中某個 JavaScript 函式在那時執行。
+
+
+
+ +
+

應用場景

+ +
+
+
+
Animating CSS properties
+
使用 Waterfall 了解瀏覽器如何更新頁面，各種不同的 CSS 屬性動畫如何影響效能。
+
 
+
+
+ +
+
+
Intensive JavaScript
+
使用格率與 Waterfall 工具，以調查長時間執行的 JavaScript 帶來的效能問題，並了解如何使用 worker 來幫助解決問題。
+
+
+
diff --git a/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html b/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..c2cd1e5e72 --- /dev/null +++ b/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,77 @@ +--- +title: Remotely debugging Firefox for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +

This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.

+

+

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. 

+

Prerequisites

+

First, you'll need:

+ +

ADB setup

+

Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.

+

On the Android device

+ +

On the desktop

+ +

To check it worked, open up a command shell on the desktop and type:

+
adb devices
+

You should see some output like:

+
List of devices attached
+51800F220F01564 device
+
+

(The long hex string will be different.)

+

If you do, then adb has found your device and you've successfully set up ADB.

+

Enable remote debugging

+

Next, you need to enable remote debugging on both the Android device and the desktop.

+

Firefox for Android 24 and earlier

+

To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true.

+

Go to about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press "Toggle".

+

+

Firefox for Android 25 and later

+

On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

+

+

The browser will display a notification reminding you to set up port forwarding, which we'll do later on.

+

On the desktop

+

On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:

+

+
+ If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.
+

You'll then see a new option in the Web Developer menu labeled "Connect...":

+

+

Connecting

+

Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.

+

On the desktop

+

Go to a command prompt, and type:

+
adb forward tcp:6000 tcp:6000
+

(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)

+

For Firefox OS, type:

+
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+

You'll need to reissue this command each time you physically attach desktop and device with the USB cable.

+

Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:

+

Unless you've changed the port numbers, choose 6000 and press the "Connect" button.

+

On the Android device

+

Next you'll see a dialog on the Android device asking you to confirm the connection:

+

Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.

+

On the desktop

+

Next, the desktop shows you a dialog that looks something like this:

+

This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.

+ +

Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:

+

+

The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.

diff --git a/files/zh-tw/tools/remote_debugging/index.html b/files/zh-tw/tools/remote_debugging/index.html new file mode 100644 index 0000000000..c7cad963ed --- /dev/null +++ b/files/zh-tw/tools/remote_debugging/index.html @@ -0,0 +1,22 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

+ +

Firefox for Android

+

Remotely debugging Firefox for Android describes how to connect to Firefox on an Android device over USB.

+

Firefox for Metro

+

Remotely debugging Firefox for Metro describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.

+

Firefox OS

+

Using the App Manager includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.

+

Thunderbird

+

Remotely debugging Thunderbird explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.

diff --git a/files/zh-tw/tools/responsive_design_mode/index.html b/files/zh-tw/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..fb931bd52f --- /dev/null +++ b/files/zh-tw/tools/responsive_design_mode/index.html @@ -0,0 +1,184 @@ +--- +title: 適應性設計模式 +slug: Tools/Responsive_Design_Mode +translation_of: Tools/Responsive_Design_Mode +--- +
+

本頁在講述 Firefox 52 及其後的適應性設計模式。要找之前的版本，請參閱適應性設計模式（Firefox 52 之前）。這個版本的適應性設計模式還要啟動 Firefox multi-process support (e10s)。如果沒有啟動的話，你還是會看到舊版的適應性設計模式。

+
+ +

適應性設計（響應式設計）是指能令大多數不同設備，能有著相似效果的網站設計實做。特別是指手機平板，也能有如同桌機筆電般的效果。

+ +

在此，最重要的影響因素是螢幕寬度。但也有其他諸如像素的密度、有沒有支援觸控之類的因素。適應性設計模式提供了這些因素的簡單模擬法、以觀察網站在不同的設備下，會是什麼樣子。

+ +

切換適應性設計模式

+ +

有三種方法能切換到適應性設計模式：

+ + + +

使用適應性設計模式

+ +

啟動適應性設計模式後，網頁的內容會縮成特定設備的尺寸。初始是 320 x 480 像素：

+ +

+ +

你可以獨立切換顯示開發者工具的位置：

+ +

當適應性設計模式啟動時，你可以在大小調整後的區域內，如同平常一般地瀏覽。

+ +

設備選擇

+ +

在視區上方你會看到「尚未選擇裝置」：點選此欄就能看到裝置清單。選一個裝置，適應性設計模式就會設定以模擬該裝置的這些屬性：

+ + + +

另外，Firefox 還會設定用戶代理的 HTTP 請求標頭，以標定自己為該裝置的預設瀏覽器。例如說，當你選了 iPhone，Firefox 就會把自己標為 Safari。navigator.userAgent 屬性也會成為該值。

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

選單所列出的裝置，只是選定裝置的子集。在該選單的底下有個「編輯清單…」的選項。選定以後就會看到所有選項，還能點選想要在選單出現的設備選項。設置的相關聯裝備與數值，是取自於 https://github.com/mozilla/simulated-devices。

+ +

儲存自訂設備

+ +

54 版以後的 Firefox 允許你自訂設備。各設備都會有：

+ + + +

另外，你還能透過把滑鼠停在設備名，以瀏覽該設備的屬性資訊。他們會以快顯視窗的形式出現。

+ +

+ +

裝置控制

+ +

你也能給多數設備支援自訂屬性。

+ +

設定螢幕大小

+ +

要設定螢幕大小，請點擊視窗下面的數值並修改之：

+ +

+ +

你也可以點右下角的三角形後不放，以自行調整你需要的大小。

+ +

設定設備像素比例

+ +

要自訂備像素比例，請點擊「DPR」標籤並選定想要的值。

+ +

+ +

模擬觸控事件切換

+ +

要啟動或關閉觸控事件，請點選手指圖示的圖標：

+ +

在觸控事件啟動時，滑鼠事件會被轉為觸控事件。

+ +

開啟觸控事件會強制頁面重啟，因為許多頁面會在載入的時候檢查觸控，若支持觸控事件的話，也將增加 event handler。

+ +

切換方向

+ +

要讓螢幕在直放與橫放間切換，請點選設備選擇器旁邊的圖標：

+ +

+ +

網路限速

+ +

若你只在網速很快的環境下測試，你網站可能會在網速慢的環境下碰上問題。在適應性設計模式裡面，你可以叫瀏覽器用大略的速度，模擬不同的上網方案。

+ +

這些方案會模擬：

+ + + +

下方表格列出了各網路方案的大略數值，但請不要用這個功能做精確的性能測量：此功能目的，是給出不同條件下的用戶體驗。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
選取下載速度上載速度最小延遲（毫秒）
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

要選擇網路的話，請點選標示著「不限速」的標籤：

+ +

+ +

擷圖

+ +

要擷取視口的螢幕畫面，請點擊相機圖示：

+ +

+ +

畫面會放在 Firefox 預設的下載目錄。

+ +

Firefox 53 以後，若你在設定頁面點選「將畫面擷圖拍到剪貼簿」，螢幕擷圖就會複製到作業系統的剪貼簿。

diff --git a/files/zh-tw/tools/scratchpad/index.html b/files/zh-tw/tools/scratchpad/index.html new file mode 100644 index 0000000000..880b0c13ee --- /dev/null +++ b/files/zh-tw/tools/scratchpad/index.html @@ -0,0 +1,109 @@ +--- +title: 程式碼速記本 +slug: Tools/Scratchpad +translation_of: Archive/Tools/Scratchpad +--- +

程式碼速記本（Scratchpad）提供使用 JavaScript 程式碼實驗的環境。您可以編寫，運行和檢查的程式碼與網頁互動的結果。

+ +

不同於網頁主控台，這是專為在同一時間解釋的一行程式碼，便簽讓您編輯較大的 JavaScript 程式碼塊，然後根據您希望如何使用輸出以各種方式執行。

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +

用法

+ +

打開程式碼速記本

+ +

要打開「程式碼速記本」窗口的話有很多辦法：

+ + + +

這將打開一個程式碼速記本窗口。

+ +

在工具箱開啟程式碼速記本

+ +
Firefox 47 引入。
+ +

From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.

+ +

Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in split Console mode: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.

+ +

編輯

+ +

程式碼速記本窗口看起來像這樣（在 macOS 選單列在螢幕的頂部）：

+ +

便簽本的屏幕截圖

+ +

檔案選單提供選項來儲存和載入JavaScript程式碼片段，因此，如果你喜歡，你可以在以後重用程式碼。

+ +

程式碼補全

+ +

程式碼速記本整合了ternjs ( javascript程式碼分析引擎 )，並使用該提供自動補全提示與包含在當前的符號資訊的視窗。要列出自動補全提示，按 Ctrl+Space 。

+ +

例如，嘗試輸入d，然後按 Ctrl+Space 。你會看到自動補全的視窗盒，如下圖：

+ +

提示左邊的每個圖標為目前提示的類型，目前高亮的提示會自動彈出更多資訊。使用↑和↓來循環高亮的提示，並使用Enter或Tab 來選擇目前高亮的提示。

+ +

內嵌說明

+ +

如果想看到內嵌說明視窗，可以在將滑鼠指標(cursor)0移到標識符的位置，並按下Ctrl + Shift + Space。例如：如果你先輸入document.addEventListener，然後再按下Ctrl + Shift + Space，你將會看到一個彈出視窗，顯示該函數的語法和使用說明。

+ +

在彈出視窗中的「[文件]」連結，點擊後，可直接連結到MDN對應符號的說明文件網頁。

+ +

執行

+ +

一旦你寫完你的代碼，選擇要運行的程式碼。如果不選擇任何內容，視窗中的所有程式碼將被執行。然後透過「執行」選單或右鍵選單，來選擇你想要的執行方式。程式碼在當前的分頁中執行。任何宣告在函式(function)之外的變數將被加入到當前分頁的全域物件。

+ +

選單中有四個執行選項可以選擇

+ +

執行

+ +

當你選取「執行」選項時, 被選取的程式碼將會被執行. 你會將此選項用於執行一個函式或一段操作頁面內容的程式碼，而不需要看到執行後的輸出。

+ +

檢測

+ +

「檢測」選項執行程式碼的方法就像執行選項; 然而，程式碼返回後，object inspector會打開讓你檢查返回值。

+ +

例如，如果你輸入代碼：

+ +
window
+
+ +

然後選擇「檢測」，object Inspector 看起來是這樣的：

+ +

在便簽中檢查對象

+ +

顯示

+ +

「顯示」選項執行所選取的程式碼，然後直接將結果插入到你的程式碼速記本編輯器視窗中，作為一個註解，所以你可以使用它作為一個REPL。

+ +

重新載入並執行

+ +

重新載入和執行選項僅在執行選單中。它首先重新載入頁面，然後執行該程式碼時，頁面上的「load」事件觸發。這適用於在剛開始的環境來執行程式碼。

+ +

在瀏覽器環境中執行程式碼速記本

+ +

你可以在瀏覽器環境運行程式碼速記本，而不是在特定網頁的環境中。如果您正在使用火狐本身或開發附加元件，這非常有用。要做到這一點，要勾選「啟用瀏覽器chrome與附加元件除錯工具箱」設定在開發者工具設置中。完成勾選後，執行程式碼速記本中，「環境」選單會有「瀏覽器」選項； 選擇「瀏覽器」選項後，你的範圍會是整個瀏覽器，而不僅僅是網頁的內容，此時，你將可以檢測一些全域變數來看：

+ +
window
+/*
+[ChromeWindow]
+*/
+
+gBrowser
+/*
+[object XULElement]
+*/
+ +

當程式碼速記本含有下列程式碼在第一行時，程式碼速記本會將執行環境設為整個瀏覽器：
+ // -sp-context: browser

+ +

鍵盤快捷鍵

+ +

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

源始碼編輯器的快捷鍵

+ +

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/zh-tw/tools/settings/index.html b/files/zh-tw/tools/settings/index.html new file mode 100644 index 0000000000..efcc04ce25 --- /dev/null +++ b/files/zh-tw/tools/settings/index.html @@ -0,0 +1,185 @@ +--- +title: Settings +slug: Tools/Settings +translation_of: Tools/Settings +--- +

{{ToolsSidebar}}

+ + + +

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab.

+ +

+ +

The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.

+ +

Show split console adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.

+ +

+ +

The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:

+ + + +

The Settings pane looks something like this:

+ +

Depicts the Toolbox options

+ +

Categories

+ +

Default Firefox Developer Tools

+ +

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+ +

Available Toolbox Buttons

+ +

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

+ +

As of Firefox 62, if the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.

+ +

Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.

+ +

Themes

+ +

This enables you to choose one of two themes.

+ + + +

Common preferences

+ +

Settings that apply to more than one tool. There's just one of these:

+ +
+
Enable persistent logs
+
A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.
+
+ +
+

If Common Preferences is not included in the Settings,  Web Console logs can be persisted  by using the 'about:config'  url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true

+
+ +

Inspector

+ +
+
Show browser styles
+
A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's Computed view.
+
Truncate DOM attributes
+
By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".
+
Default color unit
+
A setting to control how colors are represented in the inspector: +
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • color name
    • +
  • As authored.
    • +
+
+
Enable layout panel
+
Enable the experimental layout panel. This setting only exists in Firefox Nightly.
+
+ +

Web Console

+ +
+
Enable timestamps
+
Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.
+
Enable new console frontend
+
Switch to the experimental new console. This setting only exists in Firefox Nightly.
+
+ +

Debugger

+ +
+
Enable Source Maps
+
Enable source map support in the debugger.
+
Enable new debugger frontend
+
Enable the new debugger. This setting only exists in Firefox Nightly.
+
+ +

Style Editor

+ +
+
Show original sources
+
When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. Learn more about Style Editor support for CSS source maps. With this setting checked, the Page Inspector Rules view will also provide links to the original sources.
+
Autocomplete CSS
+
Enable the Style Editor to offer autocomplete suggestions.
+
+ +

Screenshot Behavior

+ +
+
Screenshot to clipboard
+
When you click the icon for the Screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.
+
Play camera shutter sound
+
When you click the icon for the Screenshot tool, play a shutter sound. New in Firefox 53.
+
+ +

Editor Preferences

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +
+
Detect indentation
+
Auto-indent new lines based on the current indentation.
+
Autoclose brackets
+
Determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you.
+
Indent using spaces
+
When checked, indentation will be performed using spaces, when off, the editor will use tabs instead.
+
Tab size
+
The frequency of tab stops in the editor. Select 2, 4, or 8.
+
Keybindings
+
Choose the default CodeMirror keybindings or keybindings from one of several popular editors: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Advanced settings

+ +
+
Show Gecko platform data
+
A setting to control whether or not profiles should include Gecko platform symbols.
+
+ +
+
Disable HTTP Cache
+
Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. +
Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not Service Workers/the Cache API.
+
+
Disable JavaScript
+
Reload the current tab with JavaScript disabled.
+
Enable Service Workers over HTTP
+
Enable Service Worker registrations from insecure websites.
+
Enable browser chrome and add-on debugging toolboxes
+
Enable you to use developer tools in the context of the browser itself, and not only web content.
+
Enable remote debugging
+
Enable the developer tools to debug remote Firefox instances.
+
Enable worker debugging
+
Enable a panel within the debugger to debug workers. +

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.

+
+
diff --git a/files/zh-tw/tools/style_editor/index.html b/files/zh-tw/tools/style_editor/index.html new file mode 100644 index 0000000000..058bf07f22 --- /dev/null +++ b/files/zh-tw/tools/style_editor/index.html @@ -0,0 +1,103 @@ +--- +title: 樣式編輯器 +slug: Tools/Style_Editor +translation_of: Tools/Style_Editor +--- +

樣式編輯器使您能夠:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

要打開樣式編輯器，請從“ 網頁開發者”選單中選擇“樣式編輯器”選項。（這是Mac上“工具”選單中的子選單）。 工具箱將會顯示在瀏覽器的視窗底部，並顯示樣式編輯器:

+ +

+ +

樣式編輯器分為兩個主要部分：

+ + + +
+

從Firefox 33開始，樣式編輯器還有第三個組件: 媒體測攔。

+
+ +

樣式列表

+ +

左側的樣式列表格列出了當前頁面正在使用的所有樣式表。 通過單擊工作表名稱左側的眼球圖標，可以快速打開和關閉樣式表的使用。 通過單擊列表中每個樣式表選項右下角的“儲存”按鈕，可以將對樣式表所做的任何更改保存到電腦硬碟裡。

+ +

樣式編輯器

+ +

中間是編輯器窗格。 您可以在此處閱讀和編輯所選樣式表的原始碼。 您所做的任何更改都會立即應用於頁面。 這使得嘗試，修改和測試更改變得容易。 對更改感到滿意後，可以單擊樣式列表窗格中工作表條目上的“儲存”按鈕，以在電腦上儲存副本。

+ +

The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of keyboard shortcuts.

+ +

The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

+ +

The Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.

+ +

You can switch autocomplete off in the Style Editor settings.

+ +

The media sidebar

+ +

From Firefox 33 onwards, the Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any @media rules. The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. The condition text of the rule is greyed-out if the media query doesn’t currently apply.

+ +

The media sidebar works especially well with Responsive Design View for creating and debugging responsive layouts:

+ +

{{EmbedYouTube("aVUXmvLSwoM")}}

+ +

Creating and importing style sheets

+ +

You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.

+ +

You can load a style sheet from disk and apply it to the page by clicking the Import button.

+ +

Source map support

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Web developers often create CSS files using a preprocessor like Sass, Less, or Stylus. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.

+ +

Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.

+ +

This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:

+ +

For this to work, you must:

+ + + +

Viewing original sources

+ +

Now, if you check "Show original sources" in the Style Editor settings, the links next to CSS rules in the Rules view will link to the original sources in the Style Editor.

+ +

From Firefox 35 onwards original sources are displayed by default.

+ +

Editing original sources

+ +

You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.

+ +

First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the --watch option:

+ +
sass index.scss:index.css --sourcemap --watch
+ +

Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.

+ +

Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.

+ +

Keyboard shortcuts

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/zh-tw/tools/web_audio_editor/index.html b/files/zh-tw/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..77e3ee44ba --- /dev/null +++ b/files/zh-tw/tools/web_audio_editor/index.html @@ -0,0 +1,36 @@ +--- +title: Web Audio Editor +slug: Tools/Web_Audio_Editor +translation_of: Tools/Web_Audio_Editor +--- +
+

The Web Audio Editor is new in Firefox 32.

+
+

With the Web Audio API, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:

+ +

Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single gain property, while the {{domxref ("OscillatorNode")}} has frequency and detune properties.

+

The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.

+

The Web Audio Editor examines an audio context constructed in the page and provides a visualization of its graph. This gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. You can then examine and edit the AudioParam properties for each node in the graph. Some non-AudioParam properties, like an OscillatorNode's type property, are displayed, and you can edit these as well.

+

This tool is still experimental. If you find bugs, we'd love it if you filed them in Bugzilla. If you have feedback or suggestions for new features, ffdevtools.uservoice.com or Twitter are great places to register them.

+

Opening the Web Audio Editor

+

The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the Developer Tool Settings and check "Web Audio". Now there should be an extra tab in the Toolbox toolbar labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:

+ +

Visualizing the graph

+

The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:

+

You can see that it uses three nodes: an {{domxref ("OscillatorNode")}} as the source, a {{domxref ("GainNode")}} to control the volume, and an {{domxref ("GainNode")}} as the destination.

+

Connections to AudioParams

+
+

Displaying connections to AudioParams is new in Firefox 34.

+
+

Connections between nodes are displayed as solid lines. If, instead, you've connected a node to an AudioParam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the AudioParam:

+

Inspecting and modifying AudioNodes

+

If you click on a node, it's highlighted and you get a node inspector on the right hand side. This list the values of that node's AudioParam properties. For example, here's what the OscillatorNode looks like:

+

With the Violent Theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. However, the value isn't updated in real time: you have to click the node again to see the updated value.

+

If you click on a value in the node inspector you can modify it: press Enter or Tab and the new value takes effect immediately.

diff --git a/files/zh-tw/tools/web_console/console_messages/index.html b/files/zh-tw/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..47849a3dab --- /dev/null +++ b/files/zh-tw/tools/web_console/console_messages/index.html @@ -0,0 +1,389 @@ +--- +title: 主控台訊息 +slug: Tools/Web_Console/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +

訊息顯示窗格佔據了網頁主控台的大部分：

+ +

+ +

每個訊息都會以單獨的行顯示出來：

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Time（時間）訊息被紀錄的時間。預設情況並不顯示：你可以在工具箱內設定讓時間戳出現。
Category（類別） +

類別：它標示這訊息屬於什麼類別：

+ +
    +
  • 黑色：網路請求
    • +
  • 藍色：CSS 警告/錯誤/日誌
    • +
  • 橘色：JavaScript 警告/錯誤
    • +
  • 紅色：安全性警告/錯誤
    • +
  • 綠色：伺服器日誌
    • +
  • 淺灰色：Console API 訊息
    • +
  • 暗灰色：與命令行解釋器互動的輸入/輸出
    • +
+
Type（種類）For all messages except network requests and interactive input/output an icon indicating whether it is an error(X), a warning(!) or an informational log message (i).
Message（訊息）訊息本身。
Number of occurrences（出現次數）若該行產生的警告或錯誤被執行一次以上，該行只會紀錄一次、並用計數器表明被執行多少次。
Filename and line number（文件名和行數） +

對 JavaScript、CSS 與主控台的 API 訊息而言，訊息可以追蹤到特定的程式碼行數。主控台接著會提供一個能鏈接到生成該訊息的文件名和行數。

+ +

從 Firefox 36 開始，還會提供訊息生成的列數。

+
+ +

By default, the console is cleared each time you navigate to a new page or reload the current page. To override this behavior, check "Enable persistent logs" in the Settings.

+ +

Message categories

+ +

Network

+ +
+

Network log messages are not shown by default. Use the filtering feature to show them.

+
+ +

Network requests are logged with a line that looks like this:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TimeThe time the message was recorded.
CategoryIndicates that the message is an HTTP request.
Method +

The specific HTTP request method.

+ +

If the request was made as an XMLHttpRequest, there's an additional note indicating this:

+ +

+
URIThe target URI.
SummaryThe HTTP version, status code, and time taken to complete.
+ +

Viewing network request details

+ +

If you click on the message, you'll be redirected to the Network panel where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.

+ +

Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:

+ + + +

{{EmbedYouTube("cFlcWzJ9j4I")}}

+ +

JS

+ +

JavaScript messages look like this:

+ +

+ + + +
New in Firefox 49
+ +

JavaScript errors contain a "Learn more" link that takes you to the JavaScript error reference containing additional advice for fixing issues:

+ +

{{EmbedYouTube("OabJc2QR6o0")}}

+ +

Source maps

+ +
New in Firefox 50 (but disabled by default)
+ +

From Firefox 50, the Web Console understands source maps. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.

+ +

At the moment source map support is disabled by default. To enable it, visit "about:config", find the preference "devtools.sourcemap.locations.enabled" and set it to true.

+ +

Be aware that support is still experimental. It may have bugs and may slow down console output. Bug 1289570 tracks any work that needs to be done before source map support can be enabled by default.

+ +

CSS

+ +
+

CSS warnings and reflow messages are not shown by default. Use the filtering feature to show them.

+
+ +

CSS messages look like this:

+ +

+ +

Reflow events

+ +

The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

+ +

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

+ +

Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Reflows".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

+ +

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

+ +

Security

+ +

Security warnings and errors look like this:

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Logging

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console API messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Server

+ +
+

New in Firefox 43

+
+ +
+

Server-side log messages are not shown by default. Use the filtering feature to show them.

+
+ +

From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Command line input/output

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

Filtering by category

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:

+ + + +

用文字過濾

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

清除日誌

+ +

>最後，您可以使用工具欄清除日誌。在 Firefox 48 以前，可以按下右邊的「清除」按鈕。在 Firefox 48 以後，可以按下左邊的垃圾桶圖示。

diff --git a/files/zh-tw/tools/web_console/index.html b/files/zh-tw/tools/web_console/index.html new file mode 100644 index 0000000000..49678e6d99 --- /dev/null +++ b/files/zh-tw/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: 網頁主控台 +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +

網頁主控台能：

+ +
    +
  1. 記錄網頁相關的資訊：網路請求、JavaScript、CSS、安全性相關的問題，警告和錯誤、以及頁面運行的 JavaScript 相關問題，警告，錯誤，和參考訊息。
    2. +
  2. 透過執行頁面文中的 JavaScript 表達式與網頁互動
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
打開網頁主控台
+
如何開始使用網頁主控台。
+
命令行解釋器
+
如何用主控台與文件互動。
+
分割主控台
+
把主控台拉到其他工具旁邊。
+
+
+ +
+
+
主控台訊息
+
主控台相關的紀錄訊息。
+
豐富的輸出對象
+
透過主控台觀察並與紀錄的物件互動。
+
鍵盤快速鍵
+
鍵盤快速鍵參考。
+
+
+
diff --git a/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html b/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..1d113d419c --- /dev/null +++ b/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: 鍵盤快捷鍵 +slug: Tools/Web_Console/Keyboard_shortcuts +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

全域快捷鍵

+ +

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/zh-tw/tools/web_console/opening_the_web_console/index.html b/files/zh-tw/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..85d89608b0 --- /dev/null +++ b/files/zh-tw/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,23 @@ +--- +title: 打開網頁主控台 +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +

要開啟網頁主控台：

+ + + +

網頁工具箱將出現在瀏覽器視窗底部，網頁主控台也會隨之啟動（網頁工具箱只會稱它為「主控台」）：

+ +

網頁主控台

+ +

網頁主控台介面主要有三大部分：

+ + diff --git a/files/zh-tw/tools/web_console/rich_output/index.html b/files/zh-tw/tools/web_console/rich_output/index.html new file mode 100644 index 0000000000..d09757cfa2 --- /dev/null +++ b/files/zh-tw/tools/web_console/rich_output/index.html @@ -0,0 +1,75 @@ +--- +title: 豐富的輸出對象 +slug: Tools/Web_Console/Rich_output +translation_of: Tools/Web_Console/Rich_output +--- +

當網路主控台印出物件時，它不但會顯示物件名、還會包括該物件資訊的 richer set。尤其是它要：

+ + + +

特定類型的 rich output

+ +

網路主控台給許多物件類型提供了 rich output，包括：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

New in Firefox 36

+
+

+
RegExp
Window
Document
Element
Event
+ +

檢查物件屬性

+ +

當控制台印出一個物件的時候，它會以斜體的樣式呈現。點擊它，你會看到一個有該物件詳細資訊的面板： +

+ +

要關閉此面板請按 Esc 鍵...

+ +

高亮顯示與 DOM 節點檢查

+ +

若你在控制台印出的 DOM 元素上懸停游標，頁面會高亮該元素：

+ +

In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the Inspector with that node selected.

diff --git a/files/zh-tw/tools/web_console/split_console/index.html b/files/zh-tw/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..398f771c79 --- /dev/null +++ b/files/zh-tw/tools/web_console/split_console/index.html @@ -0,0 +1,14 @@ +--- +title: 分割主控台 +slug: Tools/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +

您可以把主控台拉到其他工具旁邊。當你在工具箱中的另一種工具內，只要按下 Esc 或是在工具欄內的「切換分割主控台」按鈕。工具箱將會分割，上面是原有的工具、而下面會是網頁主控台。

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

如往常般，$0 在檢測器作為選中元素的速記：

+ +

當您使用含有除錯器的分割主控台，主控台的範圍，是當前執行的 stack frame。因此，若你在函數內選了一個斷點，範圍將是該函式的範圍。You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

+ +

diff --git a/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..72d9eba4fc --- /dev/null +++ b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,121 @@ +--- +title: 命令行解釋器 +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +

You can interpret JavaScript expressions in real time using the command line provided by the Web Console.

+ +

+ +

Entering expressions

+ +

To enter expressions just type into the command line and press Enter. To enter multiline expressions, use Shift+Enter instead of Enter.

+ +

The expression you type is echoed in the message display window, followed by the result:

+ +

+ +
New in Firefox 47
+ +

From Firefox 47 onwards, if your input does not appear to be complete when you press Enter, then the Console treats this as Shift+Enter , enabling you to finish your input.

+ +

For example, if you type:

+ +
function foo() {
+ +

and then Enter, the Console will not immediately execute the input, but will behave as if you had pressed Shift+Enter , so you can finish entering the function definition.

+ +

Accessing variables

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

+ +

+ +

Autocomplete

+ +

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

Type Enter or Tab to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

+ +

The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

+ +

You get autocomplete suggestions for array elements, as well:

+ +

+ +

Defining variables

+ +

You can define your own variables, and then access them:

+ +

+ +

Command history

+ +

The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.

+ +

From Firefox 39 onwards, this history is persisted across sessions. To clear the history, use the clearHistory() helper function.

+ +

Working with iframes

+ +

If a page contains embedded iframes, you can use the cd() command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using cd():

+ +

You can pass the iframe DOM element:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

You can pass a CSS selector that matches the iframe:

+ +
cd("#frame1");
+ +

You can pass the iframe's global window object:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

To switch the context back to the top-level window, call cd() with no arguments:

+ +
cd();
+ +

For example, suppose we have a document that embeds an iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

The iframe defines a new function:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

You can switch context to the iframe like this:

+ +
cd("#frame1");
+ +

Now you'll see that the global window's document is the iframe:

+ +

And you can call the function defined in the iframe:

+ +

+ +

Helper commands

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}

diff --git a/files/zh-tw/tools/webide/index.html b/files/zh-tw/tools/webide/index.html new file mode 100644 index 0000000000..7a2968a1ac --- /dev/null +++ b/files/zh-tw/tools/webide/index.html @@ -0,0 +1,290 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/WebIDE +--- +
+

從 Firefox 34 開始均可使用 WebIDE。

+ +

亦可於 Firefox 33 中變更偏好設定，以啟動 WebIDE。鍵入 about:config 並找到「devtools.webide.enabled 」，將之設定為「true」即可。

+
+ +
+

WebIDE 現已取代「應用程式管理員 (App Manager)」，且其功能一如應用程式管理員，並可透過 Firefox OS 模擬器 (Firefox OS Simulator) 或實體 Firefox OS 裝置，進而建構、編輯、執行、除錯 Web App。

+ +

不僅如此，WebIDE 亦可連接 Firefox 開發者工具與他款瀏覽器，包含 Firefox 行動版 (Firefox for Android)、Android 上的 Chrome、iOS 上的 Safari。可參閱遠端除錯頁面，以了解應如何連上特定瀏覽器。

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

你必須先在 WebIDE 中設定一個或多個執行環境 (Runtime)。Runtime 即是 App 的執行與除錯環境。不論是 Firefox OS 裝置透過 USB 連上桌機 (從 Firefox 39 或更高版本起，可透過 WiFi 連上桌機)，或是桌面版 Firefox 上安裝 Firefox OS 模擬器，都可當做執行環境。

+ +

接著就可建立 App 或啟動現有的 App。如果你要建立全新的 App，內建範本將提供你所需的資料目錄架構與最簡單的樣板；或有更完整的範本提供 Privileged App 所需要的 API。WebIDE 將以樹狀圖顯示 App 的檔案，讓你只要透過內建的編輯器即可修改並儲存檔案。當然，你也能選用自己習慣的編輯器開發 App，只用 WebIDE 除錯亦可。

+ +

最後，你可將 App 安裝於執行環境之中並執行。也能透過常見的開發者工具，如檢測器 (Inspector)、主控台 (Console)、JavaScript 除錯器 (JavaScript Debigger) 等，檢查並修改 App。

+ +

系統需求

+ +

若要以 WebIDE 開發 App 並除錯，必須使用 Firefox 33 或更高版本。如果要在實際 Freifox OS 裝置上測試 App，則該款裝置需搭載 Firefox OS 1.2 或更高版本，並搭配 1 組 USB 連接線。

+ +

如果要針對 Firefox OS 1.2 或更高版本開發 App，則限用 WebIDE 進行開發。

+ +

啟動 WebIDE

+ +

進入「網頁開發者」選單，點擊「WebIDE」即可將之啟動。亦可按下鍵盤的「Shift + F8」快捷鍵：左邊的「開啟應用程式 (Open App)」下拉式選單中，你可啟動現有的 App 或建立新的 App。右邊的「選擇 Runtime (Select Runtime)」下拉式選單中，你可選擇執行環境或設立新的執行環境。

+ +

在選擇了執行環境並開啟 App 之後，才可以按中間的「Run」、「Stop」、「Debug」按鈕。

+ +

設定執行環境

+ +

「選擇 Runtime」選單內，共分為 3 種執行環境：

+ + + +

第一次點開下拉式選單，你不會看見任何的執行環境：

+ +

接下來會帶你新增執行環境。

+ +

連結 Firefox OS 裝置

+ +

在開始連結 Firefox OS 裝置之前，必須先完成下列設定：

+ + + +
+

Linux 版本：

+ + +
+ +
+

Windows 版本：

+ + +
+ +

如果有其他 Android 裝置已連上你的電腦，請先中斷連線。再透過 USB 銜接裝置與電腦。則你的裝置應該會出現在「USB 裝置」之下：

+ +

+ +

如果還是沒看到你的裝置，請詳見〈疑難雜症〉頁面。

+ +

新增模擬器

+ +

Firefox OS 模擬器架構在 Firefox OS 之上，可在桌機上模擬 Firefox OS 裝置。且其執行的視窗尺寸、使用者介面、內建的 App 也都和 Firefox OS 裝置相同，更能模擬 Firefox OS 裝置的 API。

+ +

如此在許多情況下，就算你沒有實際裝置，也能測試或除錯自己的 App。

+ +

整個模擬器大到不能內建在 Firefox 之中，所以包裝成 Firefox 的附加元件。當你在 Runtimes 下拉式選單中點選「Install Simulator」，將會帶領你到安裝不同版本 Firefox OS 模擬器的頁面。

+ +

你可以安裝所有需要的模擬器。因為模擬器容量頗大，所以請耐心下載。當你安裝模擬器完畢，就能關閉「Extra Components」視窗。已安裝的模擬器就會出現在「Runtimes」的下拉式選單裡面：

+ +

若要進一步了解模擬器，詳見該頁。

+ +

自訂執行環境

+ +

透過可自訂的執行環境，你可用任意的 hostname 和埠 (port) 去連結遠端裝置。

+ +

Firefox OS 裝置與 Android 裝置，均是透過「Android Debug Bridge」這個程式 (也稱為 ADB) 連上桌機。WebIDE 已預設使用名為「ADB Helper」的附加元件。此簡單的附加元件可幫你安裝 ADB 並設定好「埠」的轉址，進而簡化相關程序。接著 Firefox 桌面版的工具就能和裝置交換訊息了。

+ +

上述功能在大部分情況下都很方便。但有時候你可能不想透過 WebIDE 使用 ADB (例如你想要直接用命令列來跑 ADB)。這時你可使用 adb forward 指令來使用特定的「主機 (Host)」與「埠」。
+
+ 如果你也想用 WebIDE 及命令列使用 ADB，就要停用 ADB Helper 附加元件，並透過「自訂 (Custom)」選項、輸入你傳送給 adb forward 的「主機」與「埠」，即可連接 WebIDE。

+ +

ADB Helper 目前還不支援連結 Firefox for Android。如果你想透過 WebIDE 連上 Firefox for Android，就必須設定自己的埠轉址 (Port forwarding) 與自訂的執行環境。可進一步參閱 connecting to Firefox for Android using ADB。

+ +

選擇執行環境

+ +

當你設定好執行環境之後，就能在「選擇 Runtime (Select Runtime)」中點選。

+ + + +

WebIDE 工具列中間的「play」按鈕這時已經可按。點下後就會執行所選的執行環境。 

+ +

執行環境的動作

+ +

選取執行環境之後，「Runtimes」下拉式選單會多出 3 個選項：

+ + + +

+ +

+ +

建立並開啟 App

+ +

在「開啟應用程式 (Open App)」選單之下共有 3 個選項：
+ 1). 新增應用程式... (New App...)
+ 2). 開啟封裝的應用程式... (Open Packaged App...)
+ 3). 開啟架設的應用程式... (Open Hosted App...)

+ +

+ +

建立新的 App

+ +

點選「新增應用程式」即可建立新 App。你會看到對話視窗內提供「Privileged Empty App」與「Privileged App」共  2 個範本。

+ +

+ +

此 2 個範本均來自於 Mozilla 的「app template collection」，以最基本的架構讓你輕鬆上手。「Privileged App」則會教你如何使用權限去取得跨領域 (cross-origin) 的內容。

+ +

在選擇範本之後，必須設定該 App 的名稱及其檔案儲存目錄，接著會在專案編輯器中開啟新 App。

+ +

開啟封裝式 App

+ +

點選「開啟封裝的應用程式...」即可開啟封裝式 (Packaged) App。你所選取的資料夾中必須具備 App 的 manifest 檔案，然後就會在專案編輯器中開啟 App。

+ +
+

注意：你會在「應用程式管理員 (App Manager)」中看到「manifest」中文翻譯為「安裝資訊檔」。

+
+ +

開啟托管/架設式 App

+ +

點選「開啟架設的應用程式...」開啟托管/架設式 (Hosted) App。你必須輸入 1 組網址指向該 App 的 manifest 檔案，然後就會在專案編輯器中開啟該 App。

+ +

編輯 App

+ +

專案編輯器可供編輯 App。左側邊欄是 App 所有檔案的樹狀結構，可透過右鍵選單來新增、刪除檔案。右邊一大塊就是檔案編輯面板。

+ +

App 總覽頁面

+ +

如果是第一次打開或新建 App 時，編輯面板會出現 App 總覽頁面：

+ +

+ +

你可隨時透過左側的檔案樹狀圖，回到 App 總覽頁面。

+ +

Manifest 檔案檢查

+ +

WebIDE 會自動檢查 manifest 檔案的常見問題。只要發現問題，就會在 App 總覽頁面中顯示並說明錯誤原因：

+ +

+ +

當然也可以在專案編輯器中，直接編輯 App 的 manifest.webapp 檔案。

+ +

原始碼編輯器

+ +

WebIDE 是使用 CodeMirror 原始碼編輯器。

+ +

原始碼編輯器快捷鍵

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

程式碼補齊

+ +

當編輯 CSS 和 JavaScript 時，編輯器會自動補齊建議字串。 CSS 自動補齊功能預設為開啟：

+ +

按「Control + Space」就可顯示 JavaScript 的自動補齊建議：

+ +

+ +

行內說明文件

+ +

編輯器也可顯示 JavaScript 的行內說明文件。只要按下「Shift + Space」，就會跳出目前滑鼠游標放置的條目之說明：

+ +

+ +

在提示視窗中點選 [docs] 連結，就會帶你到該條目所對應的 MDN 頁面。

+ +

儲存檔案

+ +

你必須儲存檔案之後，才能觀看檔案修改成果。如果是修改過但尚未儲存的檔案，則樹狀圖的檔名旁邊將顯示星號。你可透過選單或按下「Control+S」，即可儲存檔案 (Mac OS X 則為「Command+S」)。

+ +

移除專案

+ +

要從 WebIDE 移除 App，可在 App 總覽頁面點選「移除專案 (Remove Project)」。

+ +

執行並除錯 App

+ +

當準備好要執行 App 時，必須從「選擇 Runtime」下拉式選單中選取任一執行環境。如果沒有適合的執行環境，請參考設定執行環境。

+ +

WebIDE 工具列中間的「Play」按鈕現已可點擊。點下之後就會在你所選的執行環境中安裝並執行 App：

+ +

這時按下「Pause」就會出現開發者工具的工具箱，以利你對已連結的 App 進行除錯：

+ +

這裡會根據所選的執行環境而提供除錯工具，且必定會提供如檢測器 (Inspector)、主控台 (Console)、JavaScript 除錯器、樣式編輯器 (Style Editor)、效能分析器 (Profiler)、程式碼速記本 (Scratchpad) 等基本工具。就如同一般網頁，透過這些工具做出的修改，都可以即時在 App 中看到結果，但僅暫存。相反的，透過編輯面板修改的檔案，都會直接儲存到硬碟之中，但必須重新啟動 App 才能看到結果。

+ +

Certified App 的除錯

+ +

若是搭配模擬器，則只要已選擇了執行環境，再點擊 App 的下拉選單，則不僅僅是你的 App，只要是該執行環境正執行中的所有 App 都會列在上面，包含Certified App。這時即可除錯所你選擇的 App：

+ +

+ +


+ 不過，如果要在實際裝置除錯 Certified App 還需要：

+ + + +

如果要啟動 Certified App 除錯功能，就要先連接執行環境，然後在選單中找到 Runtime > Runtime Info。如果你在這裡看到「開發工具受限權限 (DevTools restricted privileges)」為「Yes」，就表示無法進行 Certified App 的除錯。根據你除錯對象的不同，後續步驟也有所差異：

+ + + +

現在 (或在重新啟動 B2G 桌機用戶端之後) 你應該可以到 WebIDE 看到裝置中的所有 Certified App 了。

+ +

監控效能

+ +

如果你想知道自己 App 的效能，也有幾種方法可於 WebIDE 的執行環境中測得：

+ + + +

疑難雜症 (Troubleshooting)

+ +

WebIDE 的其他使用問題，請參閱疑難雜症頁。

+ +

 

+ +

 

diff --git a/files/zh-tw/tools/webide/troubleshooting/index.html b/files/zh-tw/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..cfdadf7a1b --- /dev/null +++ b/files/zh-tw/tools/webide/troubleshooting/index.html @@ -0,0 +1,46 @@ +--- +title: WebIDE 錯誤排除 +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +

連接 Firefox OS 裝置

+ +

如果您連接了 Firefox OS 裝置，但該裝置沒有出現在 WebIDE 裡，有些事情您可以先試試：

+ + + +

為認證過的應用程式除錯

+ +

如果您想為認證過的應用程式（包括內建的應用程式）除錯，請參考 debugging certified apps 中的說明。

+ +

Enable logging

+ +

You can also enable verbose logging to gather diagnostics:

+ +
    +
  1. visit about:config, and add a new preference called .console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true
    2. +
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. +
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. +
+ +

尋求協助

+ +

請上 IRC 的 #devtools 頻道尋求協助。

-- cgit v1.2.3-54-g00ecf