chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧

本文是对常用的chrome调试技巧进行总结整理，如果你没有深入了解过chrome调试工具，此处总有你不知道的惊喜！

从 Chrome 说起

对于大部分人来说，Chrome 可能只是个浏览器，但是对于开发人员来说，它更是一个强大无比的工具，为了方便开发人员调试代码，主流的浏览器都内置了 DevTools，所以无论你是前端还是后端，掌握 Chrome 的调试技巧意味着效率直接的提高。

打开Chrome 开发者工具

在Chrome菜单中选择 更多工具 > 开发者工具 。
在页面元素上右键点击，选择 " 检查"。
使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

移动端模式特点

1.预设了常用设备尺寸。

2.可添加自定义设备。可以设置设备名称，宽度，高度，设备像素比和用户代理字符串

【Device pixel ratio(设备像素比)（DPR）是逻辑像素和物理像素之间的比率】。

3.切换模拟设备的横向和纵向。

4.模拟传感器：地理位置和加速度。

八大面板

本文主要对常用的前面4大面板进行总结。

Elements(元素面板)

添加/启用/禁用CSS 类

有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用Force Element State 强制元素状态，便于调试。

列如：:link 、:visited 、:active、:hover等动态样式。

编辑DOM节点和其子节点的HTML：

右键->edit as HTML

按F2(Windows / Linux) 或Fn+F2(Mac) 编辑。

按Ctrl+Enter(Windows / Linux) 或Cmd+Enter(Mac) 来保存更改（注，一般情况下，直接按Enter就可以了）。
按Esc退出编辑器而不保存更改。

滚动到视图

当您将鼠标悬停在或选中一个DOM节点时，渲染的节点在视口中会被突出显示。如果节点被滚动到屏幕之外，如果该节点在当前视口上方，您将在视口顶部看到一个提示条，如果该节点在当前视口下方，则在底部具有一个提示条。

要滚动页面使节点在视口中显示，请 右键点击 节点并选择 Scroll into View 。

设置DOM断点

在以下DOM更改都会触发断点：子树的变化，属性改变，节点删除。

Subtree Modifications 子树修改

当子元素被添加，删除或移动时，会触发Subtree Modifications(子树修改)断点。

例如，如果在main-content元素上设置一个Subtree Modifications(子树修改)断点，以下代码会触发该断点。

栗子：

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

Attribute Modifications 属性修改时

当一个元素（类，id，name）的属性动态改变时，会触发Attribute Modifications(属性修改)断点：

栗子：

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

Node Removal 节点移除

当一个节点从DOM中删除时，会触发Node Removal(节点移除)断点：

document.getElementById(&apos;main-content&apos;).remove();

Console(控制台面板)

想要直接要打开专用的控制台面板，请执行以下之一操作：

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

要在任何其他面板打开控制台抽屉式窗格，请执行以下之一操作： 1.在 DevTools 获取焦点时按Esc键。

点击Customize and control DevTools(自定义并控制DevTools，也叫开发者工具主菜单)按钮，然后选择Show console(显示控制?)

清除控制台历史信息

您可以通过执行以下任一操作来清除 Console (控制台)的历史记录： 1）在Console(控制台)中右键单击，然后选择 Clear console (控制台)。

在控制台中键入clear()。在JavaScript代码中调用console.clear()。
使用快捷键 Ctrl+L （Mac，Windows，Linux）。

保留历史记录

勾选Console(控制台)顶部的 Preserve log (保留日志)复选框，可以在 页面刷新 或 页面跳转 时保留控制台历史记录。信息将被存储，直到你清除Console(控制台)信息或关闭tab 页。

选择执行上下文

在下面的截图中以蓝色高亮显示的下拉菜单被称为**Execution Context Selector(**执行上下文选择器)。

默认上下文设置为 top（页面的顶部框架） 。

其他框架和扩展在其自己的上下文中起作用。要使用这些其他上下文，需要从下拉菜单中选择它们。

例如，如果您想查看<iframe>元素中的日志输出并修改该上下文中存在的变量，您需要在Execution Context Selector(执行上下文选择器) 下拉菜单中选择它。

console 中的 $

在 Chrome 的 Elements 面板中，$0 是对我们当前选中的 html 节点的引用 。

理所当然，$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(检查元素)快捷键

按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.切换设备模式

快捷键：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(&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 开发者工具中文文档

你不知道的 Chrome 调试技巧

Bookmarklet编写指南