對(duì)于我們前端開(kāi)發(fā)者來(lái)說(shuō)，Chrome自帶的開(kāi)發(fā)者工具絕對(duì)是不可或缺的調(diào)試工具，我們常用的調(diào)試方法包含一些console等，而Chrome自帶的開(kāi)發(fā)者工具其實(shí)很強(qiáng)大，下面我們來(lái)聊聊一些你可能不知道的使用方法。

Scroll Into View 滾動(dòng)如視圖內(nèi)

在Elements 標(biāo)簽中，查看頁(yè)面元素的時(shí)候，如果當(dāng)前這個(gè)元素不在視圖內(nèi)，可以通過(guò)這個(gè)方法讓這個(gè)元素快速滾入視圖中。

操作：

• 在Elements 標(biāo)簽頁(yè)中選擇一個(gè)不在視圖內(nèi)的元素

• 右擊，選擇Scrollintoview

Copy As Fetch 復(fù)制為 Fetch

在Network 標(biāo)簽下的所有的請(qǐng)求，都可以復(fù)制為一個(gè)完整的Fetch 請(qǐng)求的代碼。

操作：

• 在Network 標(biāo)簽頁(yè)中，選中一個(gè)請(qǐng)求

• 右擊，選擇Copy –>Copyasfetch

阻塞請(qǐng)求

在Network 標(biāo)簽頁(yè)下，選中一個(gè)請(qǐng)求，右擊該請(qǐng)求，選擇Blockrequest domain 或Blockrequest URL，可以分別阻塞該請(qǐng)求所在domain 下的所有請(qǐng)求 和 該請(qǐng)求。

手動(dòng)給元素添加一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)

在debug 的時(shí)候，有時(shí)候需要在元素的點(diǎn)擊事件監(jiān)聽(tīng)函數(shù)中，將該點(diǎn)擊事件對(duì)象打印出來(lái)。有個(gè)更方便的方式，是可以直接在Elements 標(biāo)簽頁(yè)為頁(yè)面元素添加事件監(jiān)聽(tīng)事件。

操作：

• 在Elements 標(biāo)簽頁(yè)中選中一個(gè)頁(yè)面元素（選中之后，默認(rèn)可以通過(guò)$0 變量獲取到該元素 ）

• 在Console 標(biāo)簽頁(yè)中，調(diào)用函數(shù)monitorEvents，輸入兩個(gè)參數(shù)，第一個(gè)是當(dāng)前元素（$0），第二個(gè)是事件名（click）

• 按Enter后，當(dāng)被選中的元素觸發(fā)了點(diǎn)擊事件之后，Console 標(biāo)簽頁(yè)會(huì)將該點(diǎn)擊事件對(duì)象打印出來(lái)

拖動(dòng)頁(yè)面元素

在Elements 標(biāo)簽頁(yè)，你可以拖動(dòng)任何HTML 元素，改變它在頁(yè)面中的位置。

操作：如下圖。

DOM 斷點(diǎn)調(diào)試

基本上大家都會(huì)用JavaScript 的斷點(diǎn)調(diào)試，但是應(yīng)該很多人不知道DOM 節(jié)點(diǎn)也可以進(jìn)行斷點(diǎn)調(diào)試。ChromeDevTools提供了三種針對(duì)DOM 元素的斷點(diǎn)調(diào)試：子元素改變時(shí)、屬性改變時(shí) 和元素被移除時(shí)。

操作：

• 在Elements 標(biāo)簽頁(yè)，選中一個(gè)元素

• 右擊，選擇 Breakon –> subtree modifications  (或attribute modifications 或node removal )

截屏

在新版本的Chrome 中，提供了一個(gè)截圖的API，你可以將整個(gè)頁(yè)面截圖或者截取部分頁(yè)面元素，且截取的圖片尺寸跟瀏覽器當(dāng)前視圖中要截取的內(nèi)容所占尺寸一致。截圖輸出的是png 格式的圖片，會(huì)自動(dòng)通過(guò)瀏覽器下載到默認(rèn)的目錄下?，F(xiàn)在有三種截取的方式：截取整個(gè)頁(yè)面、部分元素 或當(dāng)前視圖。

截取頁(yè)面部分元素的操作：

• CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打開(kāi)命令菜單

• 在Elements 標(biāo)簽頁(yè)，選中要截取的頁(yè)面元素

• 選擇 Capture node screenshot

截取完整頁(yè)面的操作

• CMD + SHIFT + P (windows 中用 CTRL + SHIFT + P ) 打開(kāi)命令菜單

• 選擇 Capture full size screenshot （不需要選擇頁(yè)面元素）

截取當(dāng)前視圖內(nèi)的頁(yè)面

• CMD + SHIFT + P (windows 中用CTRL + SHIFT + P) 打開(kāi)命令菜單

• 選擇 Capture screenshot （不需要選擇頁(yè)面元素）

緩存上一步操作的結(jié)果

在ChromeDevTools 上運(yùn)行JavaScript 表達(dá)式的時(shí)候，可以使用$_ 來(lái)獲取到上一步操作的返回值。

Overrides 重寫(xiě)

在ChromeDevTools上調(diào)試css 或JavaScript時(shí)，修改的屬性值在重新刷新頁(yè)面時(shí)，所有的修改都會(huì)被重置。如果你想把修改的值保存下來(lái)，刷新頁(yè)面的時(shí)候不會(huì)被重置，那就看看下面這個(gè)特性（Overrides）吧。Overrides 默認(rèn)是關(guān)閉的，需要手動(dòng)開(kāi)啟，開(kāi)啟的步驟如下。

開(kāi)啟的操作：

• 打開(kāi)ChromeDevTools 的Sources 標(biāo)簽頁(yè)

• 選擇Overrides 子標(biāo)簽

• 選擇+Selectfolderforoverrides，來(lái)為Overrides 設(shè)置一個(gè)保存重寫(xiě)屬性的目錄

ChromeDevTools 中有很多調(diào)試的小技巧，如果細(xì)數(shù)的話，至少有幾十種。ChromeDevTools是前端開(kāi)發(fā)的測(cè)試一大利器，希望大家能靈活運(yùn)用

最新評(píng)論