initial commit

3 files changed, 60 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>