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

從 Chrome 說起

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

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

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

在頁面元素上右鍵點擊，選擇 " 檢查"。

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

移動端模式特點

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

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

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

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

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

八大面板

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

Elements(元素面板)

添加/啟用/禁用CSS 類

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

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

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

右鍵->edit as HTML

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

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

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

滾動到視圖

當您將鼠標懸停在或選中一個DOM節(jié)點時，渲染的節(jié)點在視口中會被突出顯示。如果節(jié)點被滾動到屏幕之外，如果該節(jié)點在當前視口上方，您將在視口頂部看到一個提示條，如果該節(jié)點在當前視口下方，則在底部具有一個提示條。

要滾動頁面使節(jié)點在視口中顯示，請 右鍵點擊 節(jié)點并選擇 Scroll into View 。

設(shè)置DOM斷點

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

Subtree Modifications 子樹修改

當子元素被添加，刪除或移動時，會觸發(fā)Subtree Modifications(子樹修改)斷點。

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

栗子：

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

Attribute Modifications 屬性修改時

當一個元素（類，id，name）的屬性動態(tài)改變時，會觸發(fā)Attribute Modifications(屬性修改)斷點：

栗子：

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

Node Removal 節(jié)點移除

當一個節(jié)點從DOM中刪除時，會觸發(fā)Node Removal(節(jié)點移除)斷點：

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

Console(控制臺面板)

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

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

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

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

清除控制臺歷史信息

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

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

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

保留歷史記錄

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

選擇執(zhí)行上下文

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

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

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

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

console 中的 $

在 Chrome 的 Elements 面板中，$0 是對我們當前選中的 html 節(jié)點的引用 。

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

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

附加設(shè)置

console函數(shù)

栗子：

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

Sources(源代碼面板)

條件斷點：

指定的條件為 true 時，才會觸發(fā)條件斷點。

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

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

條件斷點是金黃色的。

在XHR上中斷

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

當一個事件觸發(fā)時中斷

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

【當某事件（例如，click(點擊)）或事件類別（例如，任何mouse(鼠標)事件）被觸發(fā)時】。

在未捕獲的異常上中斷

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

）。

DevTools在拋出異常的行自動中斷。

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

JavaScript Source Map 詳解

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

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

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

過濾請求

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

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

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

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

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

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

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

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é)議) : 顯示通過不受保護的HTTP（scheme:http）或受保護的HTTPS（scheme:https）檢索的資源。

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

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

某個請求列表右鍵單擊：

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

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

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

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

Block requests URL: network 面板右擊請求即可看到 block 選項，這個選項能夠使我們在請求和域的級別上打斷點。 方便調(diào)試服務(wù)異常等情況。

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

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

騷操作：

copying & saving

1. copy(...)

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

Store as global (存儲為一個全局變量)

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

第一次使用的話，它會創(chuàng)建一個名為 temp1 的變量，第二次創(chuàng)建 temp2，第三次 ... 。通過使用這些變量來操作對應(yīng)的數(shù)據(jù)，不用再擔心影響到他們原來的值:

保存堆棧信息( Stack trace )

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

快捷鍵和通用技巧

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

這里是一些我們在日常前端開發(fā)中，相當實用的快捷鍵：

切換 DevTools 窗口的展示布局

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

Inspect Element(檢查元素)快捷鍵

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

在控制臺中使用 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.遞增/遞減

這個技巧，對調(diào)整樣式是最有用的：數(shù)值類型的值，包括顏色。對調(dià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.截屏的新姿勢

2.快速切換面板

3.快速切換主題

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

快捷鍵：Ctrl + p

代碼的覆蓋率分析

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

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

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

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

代碼塊的使用

假如我想看每個頁面的結(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]**運行。

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

自定義json輸出格式

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

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

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

當然還有更騷的

巧用chrome小書簽

小書簽又名 Bookmarklet，由英文單詞 Bookmark 和 Applet 組合而來。簡單地說，小書簽就是把一段帶有特定功能的 JavaScript 代碼保存至收藏夾，當你需要的時候點擊它來實現(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调试技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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