前端开发一般都是使用谷歌浏览器进行调试，能够熟练使用浏览器可以让我们更快地定位问题和解决问题。今年刚踏进社会，遭受社会的毒打之后，深感熟练使用谷歌浏览器的重要性。这段时间看了一些浏览器调试的文章，学有所得，想分享给路过的小伙伴，希望你们也能有所收获。
1.断点调试
断点调试是我们比较常用的定位问题的方式了，同时也是比较有效的方式。
- debugger
使用代码打断点是比较粗糙的方式了，但是还是有必要说一下的，毕竟有时也会用到
const name = '张三'
debugger;
console.log(name)
将debugger放在你想打断点的地方，当代码运行到debugger时就会在那里停下啦，这时候你就可以进行调试了，鼠标悬浮在一些变量上面可以看到变量的信息。而且此时代码的上下文环境是debugger所在的上下文，你可以将与debugger处于同一个上下文的变量复制到控制台下，可以看到这些变量所存储的值。
- 浏览器打断点
打开source选项卡，可以看到网页的资源，找到 js 代码，你看到的可能是一个压缩的源码，你可以点击下图的{}进行格式化，格式化后可以鼠标点击行号接口添加断点。
2.设置浏览器设备信息
一般我们可以通过 navigator.userAgent获取谷歌浏览器的设备信息，其实这些信息是可以改变的，你可以选择不同设备信息，也可以直接输入进行修改，看下图：
3.观察浏览器的渲染
快捷键 Ctrl + Shift + P，搜索 show paint flashing rectangles，点击可以开启，你就可以看到你操作的时候页面哪块在渲染。效果如下：鼠标聚焦输入框时，可以看到页面在渲染
搜索 hide paint flashing rectangles，点击可以关闭
4.快速清除网站上的所有数据
如果你想清除浏览器上的本地缓存的数据，你再也不用打开控制台，在application页面里删除了，有个快捷方式。快捷键 Ctrl + shift + p 打开命令面板 ，搜索folding，点击即可
5.浏览器屏幕截屏
虽然用微信和其他工具截图挺方便的，但是如果学会直接用浏览器截图，装转逼也不错呀！！！
您可以单击Cmd + Shift + P，然后选择Capture area screenshot。即可有鼠标框选你想截取的任意内容
6. 查看元素所绑定的事件，并定位到源码
这个是技巧是比较实用的，页面与用户之间的交互很多时候都是通过事件的监听触发来进行的，我们知道进行交互的元素，能够帮我们快速理清业务的同时，还能快速一些不常见的问题。
那么哪里可以看到元素绑定了什么事件呢？
首先，鼠标选中元素后会出现下图，选中 Event Listeners，可以看到该标签绑定了什么事件，点击图片框选的蓝色字体，可以定位到源码。
7. 快速获取 DOM 节点
控制台 Element选项卡下，手机选中任意元素，右键选择copy -> copy JS path。即可快速生成选取标签的代码，复制到控制台下即可看到。
谷歌浏览器还有很多强大的功能我还没探索到，希望路过的小伙伴们能够指点迷津。后续我有更多的收获也会分享给大家。
