本文是對(duì)常用的chrome調(diào)試技巧進(jìn)行總結(jié)整理，如果你沒有深入了解過chrome調(diào)試工具，此處總有你不知道的驚喜！

從 Chrome 說起

對(duì)于大部分人來說，Chrome 可能只是個(gè)瀏覽器，但是對(duì)于開發(fā)人員來說，它更是一個(gè)強(qiáng)大無比的工具，為了方便開發(fā)人員調(diào)試代碼，主流的瀏覽器都內(nèi)置了 DevTools， 所以無論你是前端還是后端，掌握 Chrome 的調(diào)試技巧意味著效率直接的提高。

打開Chrome 開發(fā)者工具

在Chrome菜單中選擇 更多工具 > 開發(fā)者工具 。

在頁面元素上右鍵點(diǎn)擊，選擇 " 檢查"。

使用快捷鍵 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

移動(dòng)端模式特點(diǎn)

1.預(yù)設(shè)了常用設(shè)備尺寸。

2.可添加自定義設(shè)備。可以設(shè)置設(shè)備名稱，寬度，高度，設(shè)備像素比和用戶代理字符串

【Device pixel ratio(設(shè)備像素比)（DPR）是邏輯像素和物理像素之間的比率】。

3.切換模擬設(shè)備的橫向和縱向。

4.模擬傳感器：地理位置和加速度。

八大面板

本文主要對(duì)常用的前面4大面板進(jìn)行總結(jié)。

Elements(元素面板)

添加/啟用/禁用CSS 類

有時(shí)候我們?yōu)轫撁嬖靥砑右恍﹦?dòng)態(tài)的樣式，比如當(dāng)鼠標(biāo)懸停在元素上時(shí)的樣式，這種動(dòng)態(tài)樣式很難調(diào)試。我們可以使用Force Element State 強(qiáng)制元素狀態(tài)，便于調(diào)試。

列如：:link 、:visited 、:active、:hover等動(dòng)態(tài)樣式。

編輯DOM節(jié)點(diǎn)和其子節(jié)點(diǎn)的HTML：

右鍵->edit as HTML

按F2(Windows / Linux) 或Fn+F2(Mac) 編輯。

按Ctrl+Enter(Windows / Linux) 或Cmd+Enter(Mac) 來保存更改（注，一般情況下，直接按Enter就可以了）。

按Esc退出編輯器而不保存更改。

滾動(dòng)到視圖

當(dāng)您將鼠標(biāo)懸停在或選中一個(gè)DOM節(jié)點(diǎn)時(shí)，渲染的節(jié)點(diǎn)在視口中會(huì)被突出顯示。如果節(jié)點(diǎn)被滾動(dòng)到屏幕之外，如果該節(jié)點(diǎn)在當(dāng)前視口上方，您將在視口頂部看到一個(gè)提示條，如果該節(jié)點(diǎn)在當(dāng)前視口下方，則在底部具有一個(gè)提示條。

要滾動(dòng)頁面使節(jié)點(diǎn)在視口中顯示，請(qǐng) 右鍵點(diǎn)擊 節(jié)點(diǎn)并選擇 Scroll into View 。

設(shè)置DOM斷點(diǎn)

在以下DOM更改都會(huì)觸發(fā)斷點(diǎn)：子樹的變化，屬性改變，節(jié)點(diǎn)刪除 。

Subtree Modifications 子樹修改

當(dāng)子元素被添加，刪除或移動(dòng)時(shí)，會(huì)觸發(fā)Subtree Modifications(子樹修改)斷點(diǎn)。

例如，如果在main-content元素上設(shè)置一個(gè)Subtree Modifications(子樹修改)斷點(diǎn)，以下代碼會(huì)觸發(fā)該斷點(diǎn)。

栗子：

var element = document.getElementById('main-content'); //modify the element's subtree. var mySpan = document.createElement('span'); element.appendChild( mySpan );

Attribute Modifications 屬性修改時(shí)

當(dāng)一個(gè)元素（類，id，name）的屬性動(dòng)態(tài)改變時(shí)，會(huì)觸發(fā)Attribute Modifications(屬性修改)斷點(diǎn)：

栗子：

var element = document.getElementById('main-content'); // class attribute of element has been modified. element.className = 'active';

Node Removal 節(jié)點(diǎn)移除

當(dāng)一個(gè)節(jié)點(diǎn)從DOM中刪除時(shí)，會(huì)觸發(fā)Node Removal(節(jié)點(diǎn)移除)斷點(diǎn)：

document.getElementById('main-content').remove();

Console(控制臺(tái)面板)

想要直接要打開專用的控制臺(tái)面板，請(qǐng)執(zhí)行以下之一操作：

按Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。

要在任何其他面板打開控制臺(tái)抽屜式窗格，請(qǐng)執(zhí)行以下之一操作： 1.在 DevTools 獲取焦點(diǎn)時(shí) 按Esc鍵。

點(diǎn)擊Customize and control DevTools(自定義并控制DevTools，也叫開發(fā)者工具主菜單)按鈕，然后選擇Show console(顯示控制?)

清除控制臺(tái)歷史信息

您可以通過執(zhí)行以下任一操作來清除 Console (控制臺(tái))的歷史記錄： 1）在Console(控制臺(tái))中右鍵單擊，然后選擇 Clear console (控制臺(tái))。

在控制臺(tái)中鍵入clear()。在JavaScript代碼中調(diào)用console.clear()。

使用快捷鍵 Ctrl+L （Mac，Windows，Linux）。

保留歷史記錄

勾選Console(控制臺(tái))頂部的 Preserve log (保留日志)復(fù)選框，可以在 頁面刷新 或 頁面跳轉(zhuǎn) 時(shí)保留控制臺(tái)歷史記錄。信息將被存儲(chǔ)，直到你清除Console(控制臺(tái))信息或關(guān)閉tab 頁。

選擇執(zhí)行上下文

在下面的截圖中以藍(lán)色高亮顯示的下拉菜單被稱為**Execution Context Selector(**執(zhí)行上下文選擇器)。

默認(rèn)上下文設(shè)置為 top（頁面的頂部框架） 。

其他框架和擴(kuò)展在其自己的上下文中起作用。要使用這些其他上下文，需要從下拉菜單中選擇它們。

例如，如果您想查看<iframe>元素中的日志輸出并修改該上下文中存在的變量，您需要在Execution Context Selector(執(zhí)行上下文選擇器) 下拉菜單中選擇它。

console 中的 $

在 Chrome 的 Elements 面板中，$0 是對(duì)我們當(dāng)前選中的 html 節(jié)點(diǎn)的引用 。

理所當(dāng)然，$1 是對(duì)上一次我們選擇的節(jié)點(diǎn)的引用，$2 是對(duì)在那之前選擇的節(jié)點(diǎn)的引用， 等等。一直到 $4

你可以嘗試一些相關(guān)操作(例如: $1.appendChild($0)) 2.$_ 是對(duì)上次執(zhí)行的結(jié)果的 引用

附加設(shè)置

console函數(shù)

栗子：

console.log("=======START我是分割線=======")console.log("我是console.assert函數(shù)")// 如果斷言為 false，則在信息到控制臺(tái)輸出錯(cuò)誤信息。console.assert(document.getElementById("demo"), "沒有 ID 為 'demo' 的元素");console.log("=======我是分割線=======")console.log("我是console.count函數(shù)")// 記錄標(biāo)簽為sela的計(jì)數(shù)器console.count("Sela 計(jì)數(shù)器");for (i = 0; i < 10; i++) {console.count(); // 記錄 count() 調(diào)用次數(shù)}console.count('Sela 計(jì)數(shù)器');console.log("=======我是分割線=======")console.log("我是console.group函數(shù)")console.group("SelaGroup");console.log("我在指定標(biāo)簽分組里。");console.groupEnd("SelaGroup");console.log("=======我是分割線=======")console.log("我是console.table函數(shù)")console.table(location)console.log("=======我是分割線=======")console.log("我是console.time函數(shù)")console.time("Sela 計(jì)時(shí)器");for (i = 0; i < 100000; i++) {// 代碼部分}console.timeEnd("Sela 計(jì)時(shí)器");console.log("=======OVER我是分割線=======")

Sources(源代碼面板)

條件斷點(diǎn)：

指定的條件為 true 時(shí)，才會(huì)觸發(fā)條件斷點(diǎn)。

無斷點(diǎn)：右鍵點(diǎn)擊**Add conditional breakpoint(添加條件斷點(diǎn))**來創(chuàng)建一個(gè)條件斷點(diǎn)。有斷點(diǎn)：希望使斷點(diǎn)有條件，右鍵單擊該斷點(diǎn)，點(diǎn)擊Edit breakpoint(編輯斷點(diǎn))。

在文本字段中輸入你的條件，并按Enter鍵。

條件斷點(diǎn)是金黃色的。

在XHR上中斷

有兩種方法可以觸發(fā)XHR上的斷點(diǎn)： 1.當(dāng)任何XHR到達(dá)XHR生命周期的某個(gè)階段時(shí)（readystatechange，load等） 2.當(dāng)XHR的URL與某個(gè)字符串匹配時(shí)。

當(dāng)一個(gè)事件觸發(fā)時(shí)中斷

使用Sources(源文件)面板上的Event Listener Breakpoints(事件偵聽器斷點(diǎn)) 窗格中斷

【當(dāng)某事件（例如，click(點(diǎn)擊)）或事件類別（例如，任何mouse(鼠標(biāo))事件）被觸發(fā)時(shí)】。

在未捕獲的異常上中斷

如果你的代碼拋出異常，你不知道他們來自哪里，點(diǎn)擊Sources(源文件)面板上的pause on exception(在異常上暫停)按鈕（

）。

DevTools在拋出異常的行自動(dòng)中斷。

如何調(diào)試混淆代碼：

JavaScript Source Map 詳解

簡(jiǎn)單說，Source map就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置。

打開混淆代碼，右鍵 Add source map ...

Network(網(wǎng)絡(luò)面板)

過濾請(qǐng)求

Network(網(wǎng)絡(luò))面板提供了許多方法來過濾顯示哪些資源。點(diǎn)擊filters(過濾器)按鈕以隱藏或顯示Filters(過濾器)窗格。

注意: 按住Cmd(Mac) 或者Ctrl(Windows/Linux) ，然后點(diǎn)擊過濾器可以同時(shí)啟用多個(gè)過濾器。

filter(過濾器)文本字段輸入框：

1)輸入字符串：篩選只顯示資源名字和它匹配的請(qǐng)求。

2）各類關(guān)鍵字：

下面的列表描述了所有關(guān)鍵字。

domain(域) : 僅顯示來自指定域的資源。您可以使用通配符（）來包括多個(gè)域。例如，.com顯示以.com結(jié)尾的所有域名中的資源。 DevTools會(huì)在自動(dòng)完成下拉菜單中自動(dòng)填充它遇到的所有????

larger-than(大于): 顯示大于指定大小的資源（以字節(jié)為單位）。設(shè)置值1000等效于設(shè)置值1k。

method(方法) : 顯示通過指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。

mime-type(mime類型) : 顯示指定MIME類型的資源。 DevTools使用它遇到的所有MIME類型填充下拉列表。

status-code(狀態(tài)碼) : 僅顯示其HTTP狀態(tài)代碼與指定代碼匹配的資源。

scheme(協(xié)議) : 顯示通過不受保護(hù)的HTTP（scheme:http）或受保護(hù)的HTTPS（scheme:https）檢索的資源。

mixed-content(混合內(nèi)容) 【在使用https的頁面引入了http的內(nèi)容】: 顯示所有混合內(nèi)容資源（mixed-content:all）或僅顯示當(dāng)前顯示的內(nèi)容（mixed-content:displayed）。

復(fù)制，保存和清除網(wǎng)絡(luò)信息

某個(gè)請(qǐng)求列表右鍵單擊：

Copy Response(復(fù)制響應(yīng)) : 將所選資源的HTTP響應(yīng)復(fù)制到系統(tǒng)剪貼板。

Copy as cURL(復(fù)制為cURL): 將所選資源的網(wǎng)絡(luò)請(qǐng)求作為cURL命令字符串復(fù)制到系統(tǒng)剪貼板。 請(qǐng)參閱將復(fù)制請(qǐng)求為cURL命令。

Open Link in New Tab(在新標(biāo)簽頁中打開鏈接) : 在新標(biāo)簽頁中打開所選資源。您還可以在Requests Table(請(qǐng)求列表)中雙擊資源名稱。

Replay XHR(重新發(fā)送XHR) : 重發(fā)請(qǐng)求，方便測(cè)試當(dāng)前請(qǐng)求環(huán)境中模擬重發(fā)請(qǐng)求測(cè)試cgi的情況。僅顯示在XHR資源上。

Block requests URL: network 面板右擊請(qǐng)求即可看到 block 選項(xiàng)，這個(gè)選項(xiàng)能夠使我們?cè)谡?qǐng)求和域的級(jí)別上打斷點(diǎn)。 方便調(diào)試服務(wù)異常等情況。

跳轉(zhuǎn)時(shí)保留網(wǎng)絡(luò)日志

默認(rèn)情況下，只要重新加載當(dāng)前頁面或加載不同的頁面，就會(huì)丟棄網(wǎng)絡(luò)活動(dòng)記錄。勾選Preserve log (保留日志)復(fù)選框可以在這些情況下保留網(wǎng)絡(luò)日志。新記錄附加在Requests Table(請(qǐng)求列表)的底部。

騷操作：

copying & saving

1. copy(...)

你可以通過全局的方法 copy() 在 console 里 copy 任何你能拿到的資源。例如 copy($_) 或 copy($0)

Store as global (存儲(chǔ)為一個(gè)全局變量)

如果你在 console 中打印了一堆數(shù)據(jù) (例如你在 App 中計(jì)算出來的一個(gè)數(shù)組) ，然后你想對(duì)這些數(shù)據(jù)做一些額外的操作比如我們剛剛說的 copy (在不影響它原來值的情況下) 。 那就可以將它轉(zhuǎn)換成一個(gè)全局變量，只需要 右擊 它，并選擇 “Store as global variable” (保存為全局變量) 選項(xiàng)。

第一次使用的話，它會(huì)創(chuàng)建一個(gè)名為 temp1 的變量，第二次創(chuàng)建 temp2，第三次 ... 。通過使用這些變量來操作對(duì)應(yīng)的數(shù)據(jù)，不用再擔(dān)心影響到他們?cè)瓉淼闹?

保存堆棧信息( Stack trace )

保存console 打印出來的堆棧跟蹤的信息。

快捷鍵和通用技巧

能直接快速提升開發(fā)效率的方式是什么？ 掌握快捷鍵

這里是一些我們?cè)谌粘Ｇ岸碎_發(fā)中，相當(dāng)實(shí)用的快捷鍵：

切換 DevTools 窗口的展示布局

快捷鍵ctrl + shift + D (? + shift + D Mac) 來實(shí)現(xiàn)位置的切換。

Inspect Element(檢查元素)快捷鍵

按Ctrl+Shift+C（Windows）或Cmd+Shift+C（Mac） 在檢查元素模式下打開DevTools，然后將鼠標(biāo)懸停在元素上。DevTools會(huì)在Elements(元素)面板中自動(dòng)突出顯示你鼠標(biāo)懸停的元素。單擊元素退出檢查模式，同時(shí)保持元素在Elements(元素)面板中突出顯示。

在控制臺(tái)中使用 inspect 方法，如 inspect(document.body)。

打開chrome devtool工具：

使用快捷鍵 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

4.切換設(shè)備模式

快捷鍵：Command+Shift+M(Mac) 或者Ctrl+Shift+M(Windows, Linux)

5.遞增/遞減

這個(gè)技巧，對(duì)調(diào)整樣式是最有用的：數(shù)值類型的值，包括顏色。對(duì)調(diào)整高度/字號(hào)等尺寸很方便。

6.打開console面版調(diào)試：

按Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。

使用 Command

在 Chrome 的調(diào)試打開的情況下 按下

[ Ctrl] + [Shift] + [P] (Mac： [?] + [Shift]+ [P] )

1.截屏的新姿勢(shì)

2.快速切換面板

3.快速切換主題

這個(gè)時(shí)候 主題 就派上了用場(chǎng)了：在 Commands 菜單中尋找與 theme 相關(guān)的選項(xiàng)，實(shí)現(xiàn) 明亮 & 暗黑 兩種主題之間的切換：

快捷鍵：Ctrl + p

代碼的覆蓋率分析

coverage 面板:查看css和 js 代碼的使用情況，點(diǎn)擊單個(gè)文件可以查看詳情，并且也是處于live 狀態(tài)，頁面發(fā)生變化時(shí)，覆蓋率報(bào)告也會(huì)隨之刷新。

右邊菜單 more tools 或者通過快捷鍵ctrl + shift +p (windows) 輸入coverage 即可打開 coverage。

作 用 ： 1.移除沒用的代碼

2.懶加載代碼（對(duì)于用戶觸發(fā)時(shí)加載的代碼進(jìn)行懶加載處理。

代碼塊的使用

假如我想看每個(gè)頁面的結(jié)構(gòu)

javascript: (function() { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) { items.push(elements[i]); } } if (items.length > 0) { for (var i = 0; i < items.length; i++) { items[i].innerHTML = ''; } } else { document.body.innerHTML += '<style>html * { outline: 1px solid red }</style>'; } })();

Sources 面板，在導(dǎo)航欄里選中 Snippets 1.使用**[ctrl] + [enter]**運(yùn)行。

2.ctrl+p 輸入！，再根據(jù)名字篩選代碼塊執(zhí)行。

自定義json輸出格式

formatter 長(zhǎng)什么樣呢？ 它是一個(gè)對(duì)象，最多包含三個(gè)方法： header : 處理如何展示在 console 的日志中的主要部分。hasbody : 如果你想顯示一個(gè)用來展開對(duì)象的 ? 箭頭，返回 true body : 定義將會(huì)被顯示在展開部分的內(nèi)容中。

一個(gè)基礎(chǔ)的自定義 formatter

自定義后輸出結(jié)果：

當(dāng)然還有更騷的

巧用chrome小書簽

小書簽又名 Bookmarklet，由英文單詞 Bookmark 和 Applet 組合而來。簡(jiǎn)單地說，小書簽就是把一段帶有特定功能的 JavaScript 代碼保存至收藏夾，當(dāng)你需要的時(shí)候點(diǎn)擊它來實(shí)現(xiàn)這段 JavaScript 代碼的功能。

查看頁面結(jié)構(gòu)：

javascript: (function() { var elements = document.body.getElementsByTagName(&apos;*&apos;); var items =[]; for (var i = 0; i &lt; elements.length; i++) { if (elements[i].innerHTML.indexOf(&apos;html * { outline: 1px solid red }&apos;) != -1) { items.push(elements[i]); } } if (items.length &gt; 0) { for (var i = 0; i &lt; items.length; i++) { items[i].innerHTML = &apos;&apos;; } } else { document.body.innerHTML += &apos;&lt;style&gt;html * { outline: 1px solid red }&lt;/style&gt;&apos;; } })();

生成二維碼

javascript:window.open(&apos;https://api.qrserver.com/v1/create-qr-code/? size=300x300&amp;data=&apos; + decodeURIComponent(location.href));void(0);

打印script

javascript:var scriptarray=document.getElementsByTagName(&quot;script&quot;);for(scriptindex in scriptarray){console.log(scriptarray[scriptindex])};

參考文章：

Chrome 開發(fā)者工具中文文檔

你不知道的 Chrome 調(diào)試技巧

Bookmarklet編寫指南

總結(jié)

以上是生活随笔為你收集整理的chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。