chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧
本文是對常用的chrome調試技巧進行總結整理，如果你沒有深入了解過chrome調試工具，此處總有你不知道的驚喜！
從 Chrome 說起
對于大部分人來說，Chrome 可能只是個瀏覽器，但是對于開發人員來說，它更是一個強大無比的工具，為了方便開發人員調試代碼，主流的瀏覽器都內置了 DevTools， 所以無論你是前端還是后端，掌握 Chrome 的調試技巧意味著效率直接的提高。
打開Chrome 開發者工具
移動端模式特點
1.預設了常用設備尺寸。
2.可添加自定義設備。可以設置設備名稱，寬度，高度，設備像素比和用戶代理字符串
【Device pixel ratio(設備像素比)（DPR）是邏輯像素和物理像素之間的比率】。
3.切換模擬設備的橫向和縱向。
4.模擬傳感器：地理位置和加速度。
八大面板
本文主要對常用的前面4大面板進行總結。
Elements(元素面板)
添加/啟用/禁用CSS 類
有時候我們為頁面元素添加一些動態的樣式，比如當鼠標懸停在元素上時的樣式，這種動態樣式很難調試。我們可以使用Force Element State 強制元素狀態，便于調試。
列如：:link 、:visited 、:active、:hover等動態樣式。
編輯DOM節點和其子節點的HTML：
按F2(Windows / Linux) 或Fn+F2(Mac) 編輯。
滾動到視圖
當您將鼠標懸停在或選中一個DOM節點時，渲染的節點在視口中會被突出顯示。如果節點被滾動到屏幕之外，如果該節點在當前視口上方，您將在視口頂部看到一個提示條，如果該節點在當前視口下方，則在底部具有一個提示條。
要滾動頁面使節點在視口中顯示，請 右鍵點擊 節點并選擇 Scroll into View 。
設置DOM斷點
在以下DOM更改都會觸發斷點：子樹的變化，屬性改變，節點刪除 。
Subtree Modifications 子樹修改
當子元素被添加，刪除或移動時，會觸發Subtree Modifications(子樹修改)斷點。
例如，如果在main-content元素上設置一個Subtree Modifications(子樹修改)斷點，以下代碼會觸發該斷點。
栗子：
var element = document.getElementById('main-content'); //modify the element's subtree. var mySpan = document.createElement('span'); element.appendChild( mySpan );Attribute Modifications 屬性修改時
當一個元素（類，id，name）的屬性動態改變時，會觸發Attribute Modifications(屬性修改)斷點：
栗子：
var element = document.getElementById('main-content'); // class attribute of element has been modified. element.className = 'active';Node Removal 節點移除
當一個節點從DOM中刪除時，會觸發Node Removal(節點移除)斷點：
document.getElementById('main-content').remove();Console(控制臺面板)
想要直接要打開專用的控制臺面板，請執行以下之一操作：
按Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。
要在任何其他面板打開控制臺抽屜式窗格，請執行以下之一操作： 1.在 DevTools 獲取焦點時 按Esc鍵。
清除控制臺歷史信息
您可以通過執行以下任一操作來清除 Console (控制臺)的歷史記錄： 1）在Console(控制臺)中右鍵單擊，然后選擇 Clear console (控制臺)。
保留歷史記錄
勾選Console(控制臺)頂部的 Preserve log (保留日志)復選框，可以在 頁面刷新 或 頁面跳轉 時保留控制臺歷史記錄。信息將被存儲，直到你清除Console(控制臺)信息或關閉tab 頁。
選擇執行上下文
在下面的截圖中以藍色高亮顯示的下拉菜單被稱為**Execution Context Selector(**執行上下文選擇器)。
默認上下文設置為 top（頁面的頂部框架） 。
其他框架和擴展在其自己的上下文中起作用。要使用這些其他上下文，需要從下拉菜單中選擇它們。
例如，如果您想查看<iframe>元素中的日志輸出并修改該上下文中存在的變量，您需要在Execution Context Selector(執行上下文選擇器) 下拉菜單中選擇它。
console 中的 $
理所當然，$1 是對上一次我們選擇的節點的引用，$2 是對在那之前選擇的節點的引用， 等等。一直到 $4
你可以嘗試一些相關操作(例如: $1.appendChild($0)) 2.$_ 是對上次執行的結果的 引用
附加設置
console函數
栗子：
console.log("=======START我是分割線=======")console.log("我是console.assert函數")// 如果斷言為 false，則在信息到控制臺輸出錯誤信息。console.assert(document.getElementById("demo"), "沒有 ID 為 'demo' 的元素");console.log("=======我是分割線=======")console.log("我是console.count函數")// 記錄標簽為sela的計數器console.count("Sela 計數器");for (i = 0; i < 10; i++) {console.count(); // 記錄 count() 調用次數}console.count('Sela 計數器');console.log("=======我是分割線=======")console.log("我是console.group函數")console.group("SelaGroup");console.log("我在指定標簽分組里。");console.groupEnd("SelaGroup");console.log("=======我是分割線=======")console.log("我是console.table函數")console.table(location)console.log("=======我是分割線=======")console.log("我是console.time函數")console.time("Sela 計時器");for (i = 0; i < 100000; i++) {// 代碼部分}console.timeEnd("Sela 計時器");console.log("=======OVER我是分割線=======")Sources(源代碼面板)
條件斷點：
指定的條件為 true 時，才會觸發條件斷點。
無斷點：右鍵點擊**Add conditional breakpoint(添加條件斷點)**來創建一個條件斷點。有斷點：希望使斷點有條件，右鍵單擊該斷點，點擊Edit breakpoint(編輯斷點)。
在文本字段中輸入你的條件，并按Enter鍵。
條件斷點是金黃色的。
在XHR上中斷
有兩種方法可以觸發XHR上的斷點： 1.當任何XHR到達XHR生命周期的某個階段時（readystatechange，load等） 2.當XHR的URL與某個字符串匹配時。
當一個事件觸發時中斷
使用Sources(源文件)面板上的Event Listener Breakpoints(事件偵聽器斷點) 窗格中斷
【當某事件（例如，click(點擊)）或事件類別（例如，任何mouse(鼠標)事件）被觸發時】。
在未捕獲的異常上中斷
如果你的代碼拋出異常，你不知道他們來自哪里，點擊Sources(源文件)面板上的pause on exception(在異常上暫停)按鈕（
）。
DevTools在拋出異常的行自動中斷。
如何調試混淆代碼：
JavaScript Source Map 詳解
簡單說，Source map就是一個信息文件，里面儲存著位置信息。也就是說，轉換后的代碼的每一個位置，所對應的轉換前的位置。
打開混淆代碼，右鍵 Add source map ...
Network(網絡面板)
過濾請求
Network(網絡)面板提供了許多方法來過濾顯示哪些資源。點擊filters(過濾器)按鈕以隱藏或顯示Filters(過濾器)窗格。
注意: 按住Cmd(Mac) 或者Ctrl(Windows/Linux) ，然后點擊過濾器可以同時啟用多個過濾器。
filter(過濾器)文本字段輸入框：
1)輸入字符串：篩選只顯示資源名字和它匹配的請求。
2）各類關鍵字：
下面的列表描述了所有關鍵字。
domain(域) : 僅顯示來自指定域的資源。您可以使用通配符（）來包括多個域。例如，.com顯示以.com結尾的所有域名中的資源。 DevTools會在自動完成下拉菜單中自動填充它遇到的所有????
larger-than(大于): 顯示大于指定大小的資源（以字節為單位）。設置值1000等效于設置值1k。
method(方法) : 顯示通過指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
mime-type(mime類型) : 顯示指定MIME類型的資源。 DevTools使用它遇到的所有MIME類型填充下拉列表。
status-code(狀態碼) : 僅顯示其HTTP狀態代碼與指定代碼匹配的資源。
scheme(協議) : 顯示通過不受保護的HTTP（scheme:http）或受保護的HTTPS（scheme:https）檢索的資源。
mixed-content(混合內容) 【在使用https的頁面引入了http的內容】: 顯示所有混合內容資源（mixed-content:all）或僅顯示當前顯示的內容（mixed-content:displayed）。
復制，保存和清除網絡信息
某個請求列表右鍵單擊：
Copy Response(復制響應) : 將所選資源的HTTP響應復制到系統剪貼板。
Copy as cURL(復制為cURL): 將所選資源的網絡請求作為cURL命令字符串復制到系統剪貼板。 請參閱將復制請求為cURL命令。
Open Link in New Tab(在新標簽頁中打開鏈接) : 在新標簽頁中打開所選資源。您還可以在Requests Table(請求列表)中雙擊資源名稱。
Replay XHR(重新發送XHR) : 重發請求，方便測試當前請求環境中模擬重發請求測試cgi的情況。僅顯示在XHR資源上。
Block requests URL: network 面板右擊請求即可看到 block 選項，這個選項能夠使我們在請求和域的級別上打斷點。 方便調試服務異常等情況。
跳轉時保留網絡日志
默認情況下，只要重新加載當前頁面或加載不同的頁面，就會丟棄網絡活動記錄。勾選Preserve log (保留日志)復選框可以在這些情況下保留網絡日志。新記錄附加在Requests Table(請求列表)的底部。
騷操作：
copying & saving
1. copy(...)
你可以通過全局的方法 copy() 在 console 里 copy 任何你能拿到的資源。例如 copy($_) 或 copy($0)
Store as global (存儲為一個全局變量)
如果你在 console 中打印了一堆數據 (例如你在 App 中計算出來的一個數組) ，然后你想對這些數據做一些額外的操作比如我們剛剛說的 copy (在不影響它原來值的情況下) 。 那就可以將它轉換成一個全局變量，只需要 右擊 它，并選擇 “Store as global variable” (保存為全局變量) 選項。
第一次使用的話，它會創建一個名為 temp1 的變量，第二次創建 temp2，第三次 ... 。通過使用這些變量來操作對應的數據，不用再擔心影響到他們原來的值:
保存堆棧信息( Stack trace )
保存console 打印出來的堆棧跟蹤的信息。
快捷鍵和通用技巧
能直接快速提升開發效率的方式是什么？ 掌握快捷鍵
這里是一些我們在日常前端開發中，相當實用的快捷鍵：
切換 DevTools 窗口的展示布局
快捷鍵ctrl + shift + D (? + shift + D Mac) 來實現位置的切換。
Inspect Element(檢查元素)快捷鍵
打開chrome devtool工具：
使用快捷鍵 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。
4.切換設備模式
快捷鍵：Command+Shift+M(Mac) 或者Ctrl+Shift+M(Windows, Linux)
5.遞增/遞減
這個技巧，對調整樣式是最有用的：數值類型的值，包括顏色。對調整高度/字號等尺寸很方便。
6.打開console面版調試：
按Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。
使用 Command
在 Chrome 的調試打開的情況下 按下
[ Ctrl] + [Shift] + [P] (Mac： [?] + [Shift]+ [P] )
1.截屏的新姿勢
2.快速切換面板
3.快速切換主題
這個時候 主題 就派上了用場了：在 Commands 菜單中尋找與 theme 相關的選項，實現 明亮 & 暗黑 兩種主題之間的切換：
快捷鍵：Ctrl + p
代碼的覆蓋率分析
coverage 面板:查看css和 js 代碼的使用情況，點擊單個文件可以查看詳情，并且也是處于live 狀態，頁面發生變化時，覆蓋率報告也會隨之刷新。
右邊菜單 more tools 或者通過快捷鍵ctrl + shift +p (windows) 輸入coverage 即可打開 coverage。
作 用 ： 1.移除沒用的代碼
2.懶加載代碼（對于用戶觸發時加載的代碼進行懶加載處理。
代碼塊的使用
假如我想看每個頁面的結構
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 面板，在導航欄里選中 Snippets 1.使用**[ctrl] + [enter]**運行。
2.ctrl+p 輸入！，再根據名字篩選代碼塊執行。
自定義json輸出格式
formatter 長什么樣呢？ 它是一個對象，最多包含三個方法： header : 處理如何展示在 console 的日志中的主要部分。hasbody : 如果你想顯示一個用來展開對象的 ? 箭頭，返回 true body : 定義將會被顯示在展開部分的內容中。
一個基礎的自定義 formatter
自定義后輸出結果：
當然還有更騷的
巧用chrome小書簽
小書簽又名 Bookmarklet，由英文單詞 Bookmark 和 Applet 組合而來。簡單地說，小書簽就是把一段帶有特定功能的 JavaScript 代碼保存至收藏夾，當你需要的時候點擊它來實現這段 JavaScript 代碼的功能。
查看頁面結構：
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>'; } })();生成二維碼
javascript:window.open('https://api.qrserver.com/v1/create-qr-code/? size=300x300&data=' + decodeURIComponent(location.href));void(0);打印script
javascript:var scriptarray=document.getElementsByTagName("script");for(scriptindex in scriptarray){console.log(scriptarray[scriptindex])};參考文章：
Chrome 開發者工具中文文檔
你不知道的 Chrome 調試技巧
Bookmarklet編寫指南
總結
以上是生活随笔為你收集整理的chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android ui自动化框架选型,Ap
- 下一篇： python可视化分析网易云音乐评论_网