![32e6f8d50e8a9ce3f35085d3a612514d.png](https://i-blog.csdnimg.cn/blog_migrate/1c5e31cd177303a5d71228cf5afb9bfd.jpeg)
本文是对常用的chrome调试技巧进行总结整理,如果你没有深入了解过chrome调试工具,此处总有你不知道的惊喜!
从 Chrome 说起
对于大部分人来说,Chrome 可能只是个浏览器,但是对于开发人员来说,它更是一个强大无比的工具,为了方便开发人员调试代码,主流的浏览器都内置了 DevTools, 所以无论你是前端还是后端,掌握 Chrome 的调试技巧意味着效率直接的提高。
打开Chrome 开发者工具
- 在Chrome菜单中选择 更多工具 > 开发者工具 。
- 在页面元素上右键点击,选择 " 检查"。
- 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。
移动端模式特点
1.预设了常用设备尺寸。
2.可添加自定义设备。可以设置设备名称,宽度,高度,设备像素比和用户代理字符串
【Device pixel ratio(设备像素比)(DPR)是逻辑像素和物理像素之间的比率】。
3.切换模拟设备的横向和纵向。
4.模拟传感器:地理位置和加速度。
八大面板
![315ac643ce9124612c61100f3420eabe.png](https://i-blog.csdnimg.cn/blog_migrate/f2d871200b32903fe8fe17798c3af799.jpeg)
本文主要对常用的前面4大面板进行总结。
Elements(元素面板)
添加/启用/禁用CSS 类
有时候我们为页面元素添加一些动态的样式,比如当鼠标悬停在元素上时的样式,这种动态样式很难调试。我们可以使用Force Element State 强制元素状态,便于调试。
![26202ad95ecd78d6238c96b959131275.png](https://i-blog.csdnimg.cn/blog_migrate/ba9052684981886d38c8b42933e82971.jpeg)
列如::link 、:visited 、:active、:hover等动态样式。
编辑DOM节点和其子节点的HTML:
![bd0d01e46b6e2bccc81488b0ade44ed6.png](https://i-blog.csdnimg.cn/blog_migrate/91d2622374d3896b5a1b1edeb34f693c.jpeg)
- 右键->edit as HTML
按F2(Windows / Linux) 或Fn+F2(Mac) 编辑。
- 按Ctrl+Enter(Windows / Linux) 或Cmd+Enter(Mac) 来保存更改(注,一般情况下,直接按Enter就可以了)。
- 按Esc退出编辑器而不保存更改。
滚动到视图
当您将鼠标悬停在或选中一个DOM节点时,渲染的节点在视口中会被突出显示。如果节点被滚动到屏幕之外,如果该节点在当前视口上方,您将在视口顶部看到一个提示条,如果该节点在当前视口下方,则在底部具有一个提示条。
要滚动页面使节点在视口中显示,请 右键点击 节点并选择 Scroll into View 。
设置DOM断点
在以下DOM更改都会触发断点:子树的变化,属性改变,节点删除 。
![3b011455c707fd78896c3677a59f8859.png](https://i-blog.csdnimg.cn/blog_migrate/1d30f493037d1bbd8e8a93b9fdaad48b.jpeg)
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 );
![04297a0e80d6a50f0d8689847803b287.png](https://i-blog.csdnimg.cn/blog_migrate/64365f1c2aa4268b951dbb2fccf735f9.jpeg)
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键。
- 点击Customize and control DevTools(自定义并控制DevTools,也叫开发者工具主菜单)按钮,然后选择Show c