initial commit

1 files changed, 41 insertions, 0 deletions

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
+---
+<p>瀏覽器工具箱有別於一般的<a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox">工具箱</a>，它可以讓您對附加元件以及瀏覽器本身的 JavaScript 程式碼除錯。瀏覽器工具箱所顯示的內容為整個瀏覽器而非僅有單一頁面的內容。h</p>
+
+<div class="note">
+<p>註: 如果您要為無需新啟動或是基於 SDK 的附加元件除錯，請使用 <a href="https://developer.mozilla.org/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>。</p>
+</div>
+
+<h2 id="啟用瀏覽器工具箱">啟用瀏覽器工具箱</h2>
+
+<p>瀏覽器工具箱預設為關閉。要啟用瀏覽器工具箱，您必須要勾選「Enable chrome and addon debugging」與「Enable remote debugging」兩個選項。</p>
+
+<ul>
+ <li>open the <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a></li>
+ <li>check <em>Enable chrome debugging</em> and <em>Enable remote debugging</em></li>
+</ul>
+
+<p>Now you should see a new item in the Web Developer menu in Firefox labeled "Browser Toolbox".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">Click the menu item and you'll be presented with a dialog like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">Click OK, and the Browser Toolbox will open in its own window:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>