我们是袋鼠云数据栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累和传播经验价值。本文作者：作为一名前端开发者，我平时在开发中用的最多的是Chromedevtools，但可能很多同学和我一样平时用得最多的是Console、Elements和Network面板。除了一些我们常用的功能外，它还提供了很多强大但不常用的功能，可以大大提高我们的开发效率。我们来一探究竟。使用Chrome的截图工具对网页进行截图。一般我们使用第三方工具，但其实Chrome已经为我们提供了截图功能。使用Command+SHIFT+P（MAC）/CTRL+SHIFT+P（Window）打开命令菜单，在输入框中输入“capture”会自动关联截图命令。Captureareascreenshot自定义截图区域，类似常用的截图工具Capturefullsizescreenshot抓取html全渲染图Capturenodescreenshot抓取一个DOM节点的渲染图，使用前需要在Elements下选择节点，也可以选择之后的节点，右击在菜单中选择Capturenodescreenshot。捕获屏幕截图捕获浏览器窗口中的区域。Flex调试面板对于使用了flex布局的元素，点击display:flex右侧的按钮，会出现flex调试面板，可以直观的修改flex。相关样式，方便样式调试。Console面板相关$0,$1,$2,$3,$4$0是Element面板当前选中的html节点的引用，$1是上次选中的节点的引用，以此类推，直到$4，可以通过$DOM节点的一些属性参考。$和$$$等同于document.querySelector()$$等同于document.querySelectorAll()$_$_是对最后输出结果的引用console.tableconsole.table可以将数组或者对象显示为表，对象属性也可以显示。console.table接受两个参数，第一个是要显示的数据，第二个参数是一个包含列名的数组。time和timeEndconsole.time和console.timeEnd，两个方法配合计算并打印代码执行时间。在控制台快速发送请求在平时的界面调试中，对于同一个界面，我们有时需要修改传入的参数并重新发送。对于某些请求，您可以刷新下一页或重新操作重新发送。对于大表单，输入参数发送请求并跳转到页面后，需要重新调试。对于这样的场景，再次进入表单重新发送请求显然是非常低效的。捷径是什么？在Chrome中，我们可以进行如下操作：打开Network面板，选择Fetch/XHR；选择要重发的请求，右键选择Copy，选择Copyasfetch；进入Console粘贴，修改输入参数后重新发送。在Edge浏览器中，除了使用Chrome中的方法外，还可以使用NetworkConsole重新请求，具体操作如下：选中要重发的请求，右键选择EditandResend；进入NetworkConsole面板，修改参数后点击send发送请求。使用导入HAR文件/导出HAR文件来重现网络请求。网络面板上分别有导入HAR文件和导出HAR文件按钮。单击导出HAR文件按钮将导出har文件，其中存储了一些有关浏览器和服务器之间交互的数据。我们可以在任意浏览器页面点击ImportHARfile，导入har文件重现当时的请求。使用场景：当我们在客户环境不方便直接访问时，如果因为网络问题或者参数传递问题导致接口报错，我们可以导出har文件在本地复现当时的网络请求状态。当明确知道要调试的范围，并且只调试指定的条件分支时，使用条件断点。当条件满足时，断点才会生效。使用方法：点击行号处的AddConditionalBreakpoint...添加代码行条件断点。事件断点如果对代码不熟悉或者在长代码逻辑中，只知道点击触发业务逻辑，可以考虑事件监听断点。DOM断点当DOM节点发生变化时添加断点，它将定位到修改DOM的代码行。说明：子树修改触发断点当前DOM子节点属性修改触发断点当前DOM自身节点移除触发断点当前DOM节点移除触发断点使用Snippets写代码snippets在平时的开发中，经常需要在浏览器中调试一些JS代码，直接在控制台写会比较麻烦。这时候你可以使用Chrome提供的Snippets功能。使用方法：在Sources下选择Snippets，点击“NewSnippet”按钮新建一个代码片段；在代码区输入代码；按“Command+Enter”或单击右下角的按钮来执行代码。另外，你还可以使用Snippets来存储一些常用的代码片段，比如防抖、节流、正则表达式等，这样你每次打开Devtools都可以得到这些代码，不用去百度。与Snippets和Console相比，SnippetsConsole是跨标签可用的。当前选项卡可以永久保存，除非在页面重新加载后手动删除和清除。总结ChromeDevTools提供了更强大的功能供我们使用，可以大大提高我们的开发效率。以上只是ChromeDevTools中的一小部分使用技巧，更多的使用技巧欢迎在评论区补充分享。
