這篇文章主要講解了“Chrome DevTools中的操作有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Chrome DevTools中的操作有哪些”吧！

創(chuàng)新互聯(lián)公司2013年成立，先為阜南等服務(wù)建站，阜南等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為阜南企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

命令（Command） 菜單 

“命令”菜單是最最常用的，本文也會(huì)多次用到，所以這里先說(shuō)一下打開(kāi)方式:

按Cmd + Shift + P（如果使用Windows，則按Ctrl + Shift + P）打開(kāi)“命令”菜單。

截圖DOM元素

當(dāng)你只想對(duì)一個(gè)特別的 DOM 節(jié)點(diǎn)進(jìn)行截圖時(shí)，你可能需要使用其他工具弄半天，但現(xiàn)在你直接選中那個(gè)節(jié)點(diǎn)，打開(kāi) 命令（Command） 菜單并且使用 節(jié)點(diǎn)截圖 就可以了。

截取特定節(jié)點(diǎn)對(duì)應(yīng)上圖命令是Screenshot Capture node screenshot。

截取特定DOM元素示例：

不只是這樣，你同樣可以用這種方式 實(shí)現(xiàn)全屏截圖 ：通過(guò) Screenshot Capture full size screenshot 命令。

  ?    請(qǐng)注意，這里說(shuō)的是全屏，并不只是頁(yè)面可視區(qū)域，而是包含滾動(dòng)條在內(nèi)的所有頁(yè)面內(nèi)容。    ?

對(duì)應(yīng)截取全屏示例：

在控制臺(tái)中使用上次操作的值

我是最近才發(fā)現(xiàn)這個(gè)技巧。使用$_可以引用在控制臺(tái)執(zhí)行的前一步操作的返回值。如果您正在控制臺(tái)調(diào)試一些JavaScript代碼，并且需要引用先前的返回值，那么這可能非常方便。

重新發(fā)起xhr請(qǐng)求

在平時(shí)和后端聯(lián)調(diào)時(shí)，我們用的最多的可能就是Network面板了。但是每次想重新查看一個(gè)請(qǐng)求，我們往往都是通過(guò)刷新頁(yè)面、點(diǎn)擊按鈕等方式去觸發(fā)xhr請(qǐng)求，這種方式有時(shí)顯得會(huì)比較麻煩，我們可以通過(guò)google提供的Replay XHR的方式去發(fā)起一條新的請(qǐng)求，這樣對(duì)于我們開(kāi)發(fā)效率的提升是有所幫助的。

編輯頁(yè)面上的任何文本

在控制臺(tái)輸入document.body.contentEditable="true"或者document.designMode = 'on'就可以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)的編輯了。

其實(shí)這個(gè)還是比較實(shí)用的，比如你要測(cè)試一個(gè)DOM節(jié)點(diǎn)文字太長(zhǎng)時(shí)，樣式是否會(huì)混亂，或者要去直接修改頁(yè)面元素去滿足一些業(yè)務(wù)需求時(shí)。（我之前是在Elements面板一個(gè)一個(gè)去修改的，，，）

網(wǎng)絡(luò)面板（Network）的幻燈片模式

啟動(dòng)Network 面板下的Capture screenshots就可以在頁(yè)面加載時(shí)捕捉屏幕截圖。有點(diǎn)幻燈片的感覺(jué)。單擊每一幀截圖，顯示的就是對(duì)應(yīng)時(shí)刻發(fā)生的網(wǎng)絡(luò)請(qǐng)求。這種可視化的展現(xiàn)形式會(huì)讓你更加清楚每一時(shí)刻發(fā)生的網(wǎng)絡(luò)請(qǐng)求情況。

動(dòng)畫(huà)檢查

DevTools 中有一個(gè)動(dòng)畫(huà)面板，默認(rèn)情況下它是關(guān)閉的，很多人可能不太清楚這個(gè)功能。它可以讓你控制和操縱 CSS 動(dòng)畫(huà)，并且可視化這些動(dòng)畫(huà)是如何工作的。

要打開(kāi)該面板，可以在 DevTools 右上角菜單 → More tools 中打開(kāi) Animations ：

默認(rèn)情況下，DevTools 會(huì)“監(jiān)聽(tīng)”動(dòng)畫(huà)。一旦觸發(fā)，它們將被添加到列表中。你能看到這些動(dòng)畫(huà)塊如何顯示。在動(dòng)畫(huà)本身上，DevTools 會(huì)向我們展示哪些屬性正在更改，例如 background-color 或 transform。

然后，我們可以通過(guò)使用鼠標(biāo)拖動(dòng)或調(diào)整時(shí)間軸來(lái)修改該動(dòng)畫(huà)。

遞增/遞減 CSS 屬性值

作為前端開(kāi)發(fā)，平時(shí)少不了通過(guò)Elements面板去查找元素以及它的css樣式。有時(shí)調(diào)整像素px會(huì)比較麻煩一點(diǎn)，這時(shí)就可以使用快捷鍵去幫你完成：

* 增量0.1    * Mac：Option +向上和Option +向下    * Windows：Alt +向上和Alt +向下  * 增量1    * Mac：向上+向下    * Windows：向上+向下  * 增量10    * Mac：?+向上和?+向下    * Windows：?+向上和?+向下  * 遞增100    * Mac：?+向上和?+向下    * Windows：Ctrl +向上和Ctrl +向下

在低端設(shè)備和弱網(wǎng)情況下進(jìn)行測(cè)試

我們平時(shí)開(kāi)發(fā)一般都是在辦公室（wifi 網(wǎng)速加快），而且設(shè)備一般都是市面上較新的。但是產(chǎn)品的研發(fā)和推廣，一定要考慮低設(shè)備人群和弱網(wǎng)的情況。

在Chrome DevTools中可以輕松調(diào)節(jié)CPU功能和網(wǎng)絡(luò)速度。這樣，我們就可以測(cè)試 Web 應(yīng)用程序性能并進(jìn)行相應(yīng)優(yōu)化。

具體打開(kāi)方式是：在Chrome DevTools中通過(guò)CMD/Ctrl + Shift + p打開(kāi)命令菜單。然后輸入Show Performance打開(kāi)性能面板。

copying & saving

在調(diào)試的過(guò)程中，我們總會(huì)有對(duì) Dev Tools 里面的數(shù)據(jù)進(jìn)行 復(fù)制 或者 保存 的操作，其實(shí)他們也是有一些小技巧的！

copy()

可以通過(guò)全局的方法 copy() 在 console 里 copy 任何你能拿到的資源

Store as global variable

如果在console中打印了一堆數(shù)據(jù)，想對(duì)這堆數(shù)據(jù)做額外的操作，可以將它存儲(chǔ)為一個(gè)全局變量。只需要右擊它，并選擇 “Store as global variable”選項(xiàng)。第一次使用的話，它會(huì)創(chuàng)建一個(gè)名為 temp1 的變量，第二次創(chuàng)建 temp2，第三次 ... 。通過(guò)使用這些變量來(lái)操作對(duì)應(yīng)的數(shù)據(jù)，不用再擔(dān)心影響到他們?cè)瓉?lái)的值。

自定義 devtools

大家平時(shí)用的最多的Chrome 主題可能就是白色/黑色這兩種了，但用的久了，難免想嘗試像IDE一樣切換主題。

打開(kāi)方式

•  首先需要啟用實(shí)驗(yàn)?zāi)Ｊ街械腁llow custom UI themes

  地址欄輸入如下url

chrome://flags/#enable-devtools-experiments # 啟用實(shí)驗(yàn)功能

•  啟用實(shí)驗(yàn)功能，并重啟瀏覽器      

•  控制臺(tái)中使用快捷鍵F1打開(kāi)設(shè)置，切換到Experiments 選項(xiàng)

•  啟用Allow custom UI themes    

• 從Chrome商店安裝Material DevTools Theme Collection擴(kuò)展程序       

  

選擇你喜歡的主題即可

CSS/JS 覆蓋率

Chrome DevTools 中的Coverage功能可以幫助我們查看代碼的覆蓋率。

打開(kāi)方式

•  打開(kāi)調(diào)試面板，用快捷鍵 shift+command+P （mac）輸入 Show Coverage調(diào)出相應(yīng)面板   

• 點(diǎn)擊reload 按鈕開(kāi)始檢測(cè)   

• 點(diǎn)擊相應(yīng)文件即可查看具體的覆蓋情況（綠色的為用到的代碼，紅色表示沒(méi)有用到的代碼）

自定義代碼片段 Snippets

在平常開(kāi)發(fā)過(guò)程中，我們經(jīng)常有些 JavaScript 的代碼想在 Chrome Devtools中調(diào)試，直接在 console 下 寫(xiě)比較麻煩，或者我們經(jīng)常有些代碼片段(防抖、節(jié)流、獲取地址欄參數(shù)等)想保存起來(lái)，每次打開(kāi) Devtools 都能獲取到這些代碼片段，而不用再去google，正好Chrome Devtool 就提供了這種功能。

如圖所示，在 Sources 這個(gè)tab欄下，有個(gè) Snippets 標(biāo)簽，在里面可以添加一些常用的代碼片段。

將圖片復(fù)制為數(shù)據(jù) URI

打開(kāi)方式

•  選擇Network面板

•  在資源面板中選擇Img

•  右鍵單擊將其復(fù)制為數(shù)據(jù)URI（已編碼為base 64）

媒體查詢(xún)

媒體查詢(xún)是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的基本部分。在Chrome Devtools中的設(shè)備模式下，在三圓點(diǎn)菜單中點(diǎn)擊 Show Media queries即可啟用：

Devtools會(huì)在樣式表中檢測(cè)媒體查詢(xún)，并在頂端標(biāo)尺中將它們顯示為彩色條形:

那怎么使用呢？其實(shí)也很簡(jiǎn)單：

•  點(diǎn)擊媒體查詢(xún)條形，調(diào)整視口大小和預(yù)覽適合目標(biāo)屏幕大小的樣式

•  右鍵點(diǎn)擊某個(gè)條形，查看媒體查詢(xún)?cè)?CSS 中何處定義并跳到源代碼中的定義

keys/values

這個(gè)是Devtools提供的快速查看一個(gè)對(duì)象的key、values的API。用起來(lái)也很簡(jiǎn)單：

  ?    你可能會(huì)說(shuō)Object.keys()和Object.values()也可以實(shí)現(xiàn)啊，但這個(gè)不是更簡(jiǎn)單點(diǎn)嗎 ?    ?

table

Devtools提供的用于將對(duì)象數(shù)組記錄為表格的API:

感謝各位的閱讀，以上就是“Chrome DevTools中的操作有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Chrome DevTools中的操作有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站欄目：ChromeDevTools中的操作有哪些
標(biāo)題URL：http://chinadenli.net/article4/gehgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站營(yíng)銷(xiāo)、動(dòng)態(tài)網(wǎng)站、建站公司、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)