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

時間 2019-11-17

標籤 selenium 系列教程使用 chrome 開發者工具欄目 Chrome 简体版

原文原文鏈接

系列資源：node

本節主要內容

打開Chrome開發者工具
瞭解設備模式
熟練使用元素定位
瞭解Chrome開發者工具的其它功能

Chrome開發者工具

Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，能夠用來對網站進行迭代，調試和分析。在作Web自動化的過程當中，咱們常常須要藉助Chrome瀏覽器的開發者工具進行Web頁面元素的查找。因此，掌握Chrome 開發工具的調試技巧是咱們作好Web自動化的前提條件。shell

打開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.經過選擇器定位元素打開元素面板後，激活元素定位按鈕，以後鼠標在頁面上不一樣元素上移動，能夠看到當鼠標移動在不一樣的頁面元素上，對應的元素上會有對象的背景色。以下圖，當鼠標移動到聯繫咱們上面的時候，聯繫咱們元素被追加上對應的背景色。cookie
  
  當咱們找到對應的元素功能後，只須要點擊鼠標，就能夠在開發者工具中定位到對應元素。當定位到元素以後，咱們就能夠根據selenium提供的一些方法進行元素的操做。具體操做方法，會在之後的教程中詳細講解。網絡
- 2.直接在頁面元素上操做
  在頁面上對應的元素直接經過點擊「檢查」菜單定位到元素：編輯器
控制檯面板工具

在開發期間，可使用控制檯面板記錄診斷信息，或者使用它做爲 shell在頁面上與JavaScript交互。
- 打開控制檯面板
  要打開專用的 Console 面板，請執行如下操做之一：按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。若是 DevTools 已打開，則按 Console 按鈕。
源代碼面板

在源代碼面板中設置斷點來調試 JavaScript ，或者經過Workspaces（工做區）鏈接本地文件來使用開發者工具的實時編輯器。
網絡面板
使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能。
性能面板
使用時間軸面板能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面的運行時性能。
內存面板
若是須要比時間軸面板提供的更多信息，可使用「配置」面板，例如跟蹤內存泄漏。
應用面板
使用資源面板檢查加載的全部資源，包括IndexedDB與Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。
安全面板
使用安全面板調試混合內容問題，證書問題等等。