Selenium系列教程-02 使用Chrome開發者工具

趙陽陽發表於2018-05-30

系列資源：

本節主要內容

開啟Chrome開發者工具
瞭解裝置模式
熟練使用元素定位
瞭解Chrome開發者工具的其它功能

Chrome開發者工具

Chrome 開發者工具是一套內建於Google Chrome中的Web開發和除錯工具，可以用來對網站進行迭代，除錯和分析。在做Web自動化的過程中，我們經常需要藉助Chrome瀏覽器的開發者工具進行Web頁面元素的查詢。所以，掌握Chrome 開發工具的除錯技巧是我們做好Web自動化的前提條件。

開啟Chrome開發者工具

以下為三種不同的開啟方式：

在Chrome選單中選擇更多工具 > 開發者工具
在頁面元素上右鍵點選，選擇 “檢查”（或“Inspect”）
使用快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

瞭解皮膚

裝置模式

開啟裝置模式可以模擬網站在不同移動裝置上的顯示。如果我們要做基於移動裝置的網站自動化，那麼我們需要在開發者工具中啟用裝置模式。

當 Device Mode 開啟時，該圖示呈藍色
當 Device Mode 關閉時，該圖示呈灰色

你還可以通過按 Command+Shift+M (Mac) 或 Ctrl+Shift+M（Windows、Linux）來切換 Device Mode。要使用此快捷鍵，滑鼠焦點需要位於 DevTools 視窗中。

元素皮膚

使用元素皮膚可以自由的操作DOM和CSS來檢視佈局和設計頁面。在Web自動化的過程中，我們使用到最多的就是利用元素皮膚進行Web頁面元素的定位。下面就詳細說明如何進行元素定位。

元素定位介紹常用的兩種元素定位方式：
- 1.通過選擇器定位元素開啟元素皮膚後，啟用元素定位按鈕，之後滑鼠在頁面上不同元素上移動，可以看到當滑鼠移動在不同的頁面元素上，對應的元素上會有物件的背景色。如下圖，當滑鼠移動到聯絡我們上面的時候，聯絡我們元素被追加上對應的背景色。
  
  當我們找到對應的元素功能後，只需要點選滑鼠，就可以在開發者工具中定位到對應元素。當定位到元素之後，我們就可以根據selenium提供的一些方法進行元素的操作。具體操作方法，會在以後的教程中詳細講解。
- 2.直接在頁面元素上操作
  在頁面上對應的元素直接通過點選“檢查”選單定位到元素：
控制檯皮膚

在開發期間，可以使用控制檯皮膚記錄診斷資訊，或者使用它作為 shell在頁面上與JavaScript互動。
- 開啟控制檯皮膚
  要開啟專用的 Console 皮膚，請執行以下操作之一：按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。如果 DevTools 已開啟，則按 Console 按鈕。
原始碼皮膚

在原始碼皮膚中設定斷點來除錯 JavaScript ，或者通過Workspaces（工作區）連線本地檔案來使用開發者工具的實時編輯器。
網路皮膚
使用網路皮膚瞭解請求和下載的資原始檔並優化網頁載入效能。
效能皮膚
使用時間軸皮膚可以通過記錄和檢視網站生命週期內發生的各種事件來提高頁面的執行時效能。
記憶體皮膚
如果需要比時間軸皮膚提供的更多資訊，可以使用“配置”皮膚，例如跟蹤記憶體洩漏。
應用皮膚
使用資源皮膚檢查載入的所有資源，包括IndexedDB與Web SQL資料庫，本地和會話儲存，cookie，應用程式快取，影象，字型和樣式表。
安全皮膚
使用安全皮膚除錯混合內容問題，證照問題等等。