使用檢查工具分析頁面

使用 [檢查] 工具可查看轉譯網頁內專案的相關信息。

• 當 [檢查] 工具作用中時，您 會將滑鼠停留 在網頁中的專案上，而DevTools則會在網頁上新增資訊重疊資訊和網格線醒目提示。

• 當您 按下 網頁中的專案時，[ 元素 ] 工具中的 DOM 樹狀結構會自動更新，以顯示對應至轉譯網頁中已點選專案的 DOM 元素，以及其在 [樣 式 ] 索引標籤中的 CSS 樣式。

啟用檢查工具

若要試用 檢查 工具：

1. 在新的視窗或索引標籤中開啟 [ 檢查示範 ] 頁面。

2. 以滑鼠右鍵按兩下示範網頁中的任何位置，然後選取 [ 檢查]，以開啟DevTools。

3. 在 DevTools 的左上角，按兩下 [ 檢查工具 ] () 按鈕。 或者，當 DevTools 有焦點時，請按 Ctrl+Shift+C (Windows、Linux) 或 Command+Shift+C (macOS) 。

   

   按鈕圖示會變成藍色 () ，表示 [檢查 ] 工具為作用中。

4. 在轉譯的網頁中，將滑鼠停留在專案上方，watch 資訊重疊和網格線醒目提示。

5. 按兩下轉譯網頁中的專案。

   [ 元素 ] 工具中的 DOM 樹狀結構會自動更新，以顯示對應至轉譯網頁中已點選專案的 DOM 元素，以及其在 [樣 式 ] 索引卷標中的 CSS 樣式。在網頁中按兩下 也會關閉網頁中的 [檢查 ] 模式。

從 Inspect 重疊取得項目資訊

當 [檢查] 工具處於作用中狀態時，將滑鼠停留在轉譯網頁上的任何元素上會顯示 [檢查 ] 重迭。 Inspect 重迭會顯示該元素的一般和輔助功能資訊。

當您將滑鼠停留在轉譯頁面上的頁面元素上時，DOM 樹狀結構會自動展開，以醒目提示您要停留在上方的專案。

Inspect 重疊會顯示元素的下列相關信息：

• 項目的名稱。
• 元素的維度，以像素為單位。
• 元素的色彩，以十六進位值和色彩樣式表示。
• 專案的字型設定。
• 元素的邊界和邊框間距，以像素為單位。

顯示的信息取決於項目類型及其套用的樣式。 如果元素是使用 CSS 方格或 CSS flexbox 放置，則會在 Inspect 重疊中的元素名稱旁邊顯示不同的圖示：

[檢查] 重疊的 [輔助功能] 區段會顯示下列相關信息：

• 文字色彩對比。
• 回報給輔助技術的項目名稱和角色。
• 專案是否可設定鍵盤焦點。

例如，在 [ 檢查示範 ] 頁面中，針對 Bad Contrast 按鈕， [檢查 ] 重疊在 1.77 的對比值旁邊有一個警告圖示。 [ 檢查 ] 重疊也會顯示按鈕無法透過鍵盤取得焦點。 按鈕無法透過鍵盤巡覽至 ，因為按鈕會實作為 <div> 類別為的專案 button，而不是實作為 <button> 專案。

檢查無法存取的專案

具有的 CSS 屬性的專案 pointer-events: none 不適用於 檢查 工具。 在 [ 檢查示範 ] 頁面中，將滑鼠停留在 Overlay Button 上，您會看到顯示 (div.wrapper) 的父元素，而不是 Overlay Button。

若要檢查 CSS 屬性為 的專案 pointer-events: none，請在將滑鼠停留在元素上時按 Shift 。 頁面配置區域上也有色彩重疊，表示您處於進階選取模式。

選取專案並終止檢查模式

當您按一下轉譯頁面中的元素時：

• 檢查工具已停用。
• 對應的 DOM 節點會反白顯示。
• [ 樣式] 工具會顯示套用至 專案的 CSS。

保存檢查工具的工具提示和網格線色彩重疊

使用 [檢查] 工具並四處移動轉譯的網頁時，您可以保持顯示目前的 [檢查 ] 重疊。 在轉譯的網頁中四處移動時，按住 Ctrl+Alt (Windows、Linux) 或 Ctrl+Option (macOS) 。 當您將滑鼠停留在轉譯網頁的不同部分時， 檢查 工具的現有工具提示和網格線色彩重疊仍會顯示。

暫時隱藏 Inspect 元素工具提示

若要在將滑鼠指標移至轉譯的網頁上時隱藏 檢查 工具的重疊，請按 住 Ctrl。

另請參閱

• 使用檢查工具來偵測輔助功能問題，方法是將滑鼠停留在網頁上