本節(jié)主要內(nèi)容
- 打開Chrome開發(fā)者工具
- 了解設(shè)備模式
- 熟練使用元素定位
- 了解Chrome開發(fā)者工具的其它功能
Chrome開發(fā)者工具
Chrome 開發(fā)者工具是一套內(nèi)置與Google Chrome中的Web開發(fā)和調(diào)試工具材义，可以用來對(duì)網(wǎng)站進(jìn)行迭代，調(diào)試和分析匾旭。在做Web自動(dòng)化的過程中，我們經(jīng)常需要借助Chrome瀏覽器的開發(fā)者工具進(jìn)行Web頁(yè)面元素的查找现使。所以指黎，掌握Chrome 開發(fā)工具的調(diào)試技巧是我們做好Web自動(dòng)化的前提條件硼端。
打開Chrome開發(fā)者工具
以下為三種不同的打開方式
- 在Chrome菜單中選擇 更多工具 > 開發(fā)者工具
- 在頁(yè)面元素上右鍵點(diǎn)擊，選擇 “檢查”
- 使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
了解面板
設(shè)備模式
[圖片上傳失敗...(image-9b4520-1525424013007)]
打開設(shè)備模式可以模擬網(wǎng)站在不同移動(dòng)設(shè)備上的顯示给梅。如果我們要做基于移動(dòng)設(shè)備的網(wǎng)站自動(dòng)化假丧，那么我們需要在開發(fā)者工具中激活設(shè)備模式。
當(dāng) Device Mode 打開時(shí)动羽，該圖標(biāo)呈藍(lán)色 ([圖片上傳失敗...(image-6fd607-1525424013007)])包帚。
當(dāng) Device Mode 關(guān)閉時(shí)，該圖標(biāo)呈灰色 ([圖片上傳失敗...(image-9b6f76-1525424013007)])运吓。
Device Mode 默認(rèn)處于啟用狀態(tài)渴邦。
<span data-type="color" style="color: rgb(33, 33, 33);">您還可以通過按?</span>Command<span data-type="color" style="color: rgb(33, 33, 33);">+</span>Shift<span data-type="color" style="color: rgb(33, 33, 33);">+</span>M<span data-type="color" style="color: rgb(33, 33, 33);">?</span>(Mac) 或 Ctrl<span data-type="color" style="color: rgb(33, 33, 33);">+</span>Shift<span data-type="color" style="color: rgb(33, 33, 33);">+</span>M<span data-type="color" style="color: rgb(33, 33, 33);">（Windows、Linux）來切換 Device Mode拘哨。要使用此快捷鍵谋梭，鼠標(biāo)焦點(diǎn)需要位于 DevTools 窗口中。</span>
元素面板
[圖片上傳失敗...(image-367b04-1525424013007)]
<span data-type="color" style="color: rgb(33, 33, 33);">使用元素面板可以自由的操作DOM和CSS來迭代布局和設(shè)計(jì)頁(yè)面倦青。在Web自動(dòng)化的過程中瓮床，我們使用到最多的就是利用元素面板進(jìn)行Web頁(yè)面元素的定位。下面就詳細(xì)說明如何進(jìn)行元素定位产镐。</span>
元素定位
介紹常用的兩種元素定位方式
- 打開元素面板后隘庄，激活元素定位按鈕（[圖片上傳失敗...(image-a0fac8-1525424013007)]），之后鼠標(biāo)在頁(yè)面上不同元素上移動(dòng)癣亚，可以看到當(dāng)鼠標(biāo)移動(dòng)在不同的頁(yè)面元素上丑掺，對(duì)應(yīng)的元素上會(huì)有對(duì)象的背景色。如下圖述雾，當(dāng)鼠標(biāo)移動(dòng)到 聯(lián)系我們 上面的時(shí)候吼鱼，聯(lián)系我們 元素被追加上對(duì)應(yīng)的背景色。
[圖片上傳失敗...(image-d5ee5d-1525424013007)]
當(dāng)我們找到對(duì)應(yīng)的元素功能后绰咽，只需要點(diǎn)擊鼠標(biāo)菇肃，就可以在開發(fā)者工具中定位到對(duì)應(yīng)元素。
[圖片上傳失敗...(image-13827e-1525424013007)]
當(dāng)定位到元素之后取募，我們就可以根據(jù)selenium提供的一些方法進(jìn)行元素的操作琐谤。具體操作方法，會(huì)在以后的教程中詳細(xì)講解玩敏。
- 在頁(yè)面上對(duì)應(yīng)的元素直接通過檢查定位到元素
[圖片上傳失敗...(image-2b0dbb-1525424013007)]
控制臺(tái)面板
<span data-type="color" style="color: rgb(33, 33, 33);">在開發(fā)期間斗忌，可以使用控制臺(tái)面板記錄診斷信息质礼，或者使用它作為 shell在頁(yè)面上與JavaScript交互。</span>
[圖片上傳失敗...(image-3fec53-1525424013007)]
打開控制臺(tái)面板
要打開專用的 Console 面板织阳，請(qǐng)執(zhí)行以下操作之一：
- 按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)眶蕉。
- 如果 DevTools 已打開，則按 Console 按鈕唧躲。
源代碼面板
<span data-type="color" style="color: rgb(33, 33, 33);">在源代碼面板中設(shè)置斷點(diǎn)來調(diào)試 JavaScript 造挽，或者通過Workspaces（工作區(qū)）連接本地文件來使用開發(fā)者工具的實(shí)時(shí)編輯器。</span>
[圖片上傳失敗...(image-4227e7-1525424013007)]
網(wǎng)絡(luò)面板
<span data-type="color" style="color: rgb(33, 33, 33);">使用網(wǎng)絡(luò)面板了解請(qǐng)求和下載的資源文件并優(yōu)化網(wǎng)頁(yè)加載性能弄痹。</span>
[圖片上傳失敗...(image-23cfcf-1525424013007)]
性能面板
<span data-type="color" style="color: rgb(33, 33, 33);">使用時(shí)間軸面板可以通過記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來提高頁(yè)面的運(yùn)行時(shí)性能饭入。</span>
[圖片上傳失敗...(image-446a08-1525424013007)]
內(nèi)存面板
<span data-type="color" style="color: rgb(33, 33, 33);">如果需要比時(shí)間軸面板提供的更多信息，可以使用“配置”面板肛真，例如跟蹤內(nèi)存泄漏谐丢。</span>
[圖片上傳失敗...(image-dad21b-1525424013007)]
應(yīng)用面板
<span data-type="color" style="color: rgb(33, 33, 33);">使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數(shù)據(jù)庫(kù)蚓让，本地和會(huì)話存儲(chǔ)乾忱，cookie壳鹤，應(yīng)用程序緩存醉途，圖像，字體和樣式表睛约。</span>
[圖片上傳失敗...(image-524a92-1525424013007)]
安全面板
<span data-type="color" style="color: rgb(33, 33, 33);">使用安全面板調(diào)試混合內(nèi)容問題执解，證書問題等等寞肖。</span>
[圖片上傳失敗...(image-10b338-1525424013007)]
歡迎加入QQ群 707467292 進(jìn)行nodejs&cucumber相關(guān)技術(shù)的討論
