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

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

从 Chrome 说起

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

打开Chrome 开发者工具

1. 在Chrome菜单中选择 更多工具 > 开发者工具 。
2. 在页面元素上右键点击，选择 " 检查"。
3. 使用快捷键 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：

1. 右键->edit as HTML

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

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

滚动到视图

当您将鼠标悬停在或选中一个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键。

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