initial commit

4 files changed, 118 insertions, 0 deletions

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
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>有三種方式可以打開除錯器:</p>
+
+<ul>
+ <li>select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li>
+ <li>
+  <p>press the <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> on Windows and Linux or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> on macOS</p>
+
+  <div class="blockIndicator note"><strong>Note:</strong> This shortcut will not work with Firefox 66 or later. However, you can press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd>, or <kbd>F12</kbd> to open the toolbox and then select the Debugger tool.</div>
+ </li>
+ <li>press the menu button ( <img alt="new fx menu" class="frameless wiki-image" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;" title=""> ), select "Developer", then "Debugger".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<div id="gtx-trans" style="position: absolute; left: 9px; top: 21px;">
+<div class="gtx-trans-icon"></div>
+</div>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>你可以使用以下任一種方法來設置中斷點；</p>
+
+<ul>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗中</a>，點選你想要設置中斷的行號來設置中斷點。</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗</a>，當你位於你想要中斷的那一行上時，啟動 context menu，然後選擇 "新增中斷點"</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane"> 原始碼視窗</a>，標記出你想要中斷的那一行，然後按下 Ctrl+B (Windows/Linux) 或是 Command+B (Mac OS X)</li>
+</ul>
+
+<p>以下影片使用 context menu 來設置一個中斷點:</p>
+
+<p>{{EmbedYouTube("P7b98lEijF0")}}</p>
+
+<p>每個中斷點會在除錯器中的兩個地方顯示；</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">中斷清單</a>中會顯示檔名以及中斷點所在的行號。</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗</a> 中，如果中斷點是<a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">有條件的</a>，那麼那一行將會以藍色或橘色的箭頭標記。</li>
+</ul>
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
+---
+<div class="note">
+<p>本頁在描述 Firefox Nightly 與 Firefox Developer Edition 第 52 版以後的 JavaScript 除錯器（Debugger）。</p>
+
+<p>要找在此版本之前、或是位於 Beta 與 Release 通道的 Firefox，請參閱<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger_%28before_Firefox_52%29">Firefox 52 之前的除錯器</a>。</p>
+
+<p>如果你是這個版本的除錯器，但需要用舊版本的除錯器，你可以去 about:config 那裡，把「devtools.debugger.new-debugger-frontend」選為 <code>false</code></p>
+</div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>JavaScript 除錯器可以讓 JavaScript 單步執行，並檢查或修改其狀態，以便查找錯誤。</p>
+
+<p>你可以在本地或是在遠端除錯用 Firefox 除錯。一個遠端除錯的例子，就是在 Android 設備上執行 Firefox for Android。請參閱<a href="/zh-TW/docs/Tools/Remote_Debugging">遠端除錯</a>以理解如何把欲除錯的目標，連接到除錯器上。</p>
+
+<p>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 <a href="https://github.com/devtools-html/debugger.html">project's GitHub repository</a>.</p>
+
+<p>新版除錯器尚未支援所有舊版除錯器的功能。請參閱<a href="/zh-TW/docs/Tools/Debugger/Limitations_of_the_new_debugger">新版除錯器的侷限</a>。</p>
+
+<hr>
+<h2 id="用戶介面導覽">用戶介面導覽</h2>
+
+<p>如果要自己摸索除錯器，我們有<a href="/zh-TW/docs/Tools/Debugger/UI_Tour">UI 的快速導覽</a>。</p>
+
+<hr>
+<h2 id="如何">如何</h2>
+
+<p>如果要知道除錯器可以做什麼，請看看以下的教學：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Open_the_debugger">打開除錯器</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Set_a_breakpoint">設定中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">設定有條件的中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Disable_breakpoints">解除中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Step_through_code">單步執行程式碼</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Breaking_on_exceptions">在例外中斷</a></li>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger/How_to/Set_Watch_Expressions">設定觀察表達式</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">美化壓縮檔案</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Search">搜尋</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Debug_eval_sources">eval 來源除錯</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="參閱">參閱</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Debugger/Keyboard_shortcuts">快捷鍵</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li>
+</ul>
+</div>