initial commit

3 files changed, 91 insertions, 0 deletions

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
+---
+<h2 id="在規則畫面的格線圖標">在規則畫面的格線圖標</h2>
+
+<div class="geckoVersionNote">Firefox 52 新功能</div>
+
+<p>自 Firefox 52 以後的開發者工具，可以針對格線布局，要求檢測器覆蓋上格線指示。</p>
+
+<p>在擁有 <code><a href="/zh-TW/docs/Web/CSS/display">display: grid</a></code> 的元素內，規則畫面會出現格線圖標：<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">。點選圖標以覆蓋顯示的格線，包括了線與軌道：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">就算選擇其他元素，覆蓋還是會出現，因此你可以編輯 CSS 的格線單元、並檢查格線如何做動。</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<h2 id="格線布局面板">格線布局面板</h2>
+
+<div class="geckoVersionNote">Firefox 56 新功能</div>
+
+<p>Firefox 56 基於前述的格線功能，提供了嶄新的面板。充分的選項及資訊，有利於格線偵錯。你可以在 <a href="https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/">Powerful New Additions to the CSS Grid Inspector in Firefox Nightly</a> 查看所有需要的資訊。</p>
+
+<p>{{EmbedYouTube("dU7xtnzfqxQ")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>想看看各種有趣的格線示例，請參考 <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a>。</li>
+</ul>
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
+---
+<p><span class="seoSummary">這裡蒐集了針對各種「如何……」的文章連結。這些文章連結會連到詳述有關「如何……」所需的技術。</span></p>
+
+<p>{{ ListSubpages () }}</p>
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
+---
+<p>使用頁面檢測器檢測並修改網頁的 HTML 與 CSS。</p>
+
+<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p>
+
+<hr>
+<h2 id="用戶介面導覽">用戶介面導覽</h2>
+
+<p>To find your way around the Inspector, here's a <a href="/zh-TW/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="如何">如何</h2>
+
+<p>想知道頁面檢測器可意做什麼，請參考以下教學：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="參考">參考</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/Keyboard_shortcuts">鍵盤快捷鍵</a></li>
+ <li><a href="/zh-TW/docs/Tools/Tools_Toolbox#Inspector">設定</a></li>
+</ul>
+</div>