From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../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 ++++++++++++++++++++++ 3 files changed, 91 insertions(+) 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 (limited to 'files/zh-tw/tools/page_inspector') 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.

+ +
+

如何

+ +

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

+ +
+ +
+ +
+

參考

+ +
+ +
-- cgit v1.2.3-54-g00ecf