0x00 前言

# Chrome 107 - What’s New in DevTools 半夜看了新的Chrome 107针对DevTools做的一些优化，记录一下一个调试的新技巧。 虽然这个功能不是Chrome 107引入的，但是估计Chrome发现用的人不多，把这个功能作为bonus放在视频的最后介绍了一下

0x01 Action

假设说场景中存在某个元素发生了改变，而我们不清楚是哪个方法导致的时，通过这个方法可以进行溯源

在视频中<span>2</span>在用户点击了之后变成了<span>3</span>，那么可以通过

右键 -> Break on -> subtree modifications

来进行断点

当用户再次点击减号时，就会断点到导致元素发生变化对应的方法

0x02 Action 2（自己用的本地调试方法）

我自己习惯使用Vscode的插件Debugger for Chrome

刚才开了一下，发现已经废弃了。。无语，过两天更新到新包去

编写此配置(/projectpath/.vscode/launch.json)

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome localhost",
          "url": "http://localhost:3001",
          "webRoot": "${workspaceFolder}",
          "sourceMaps": true,
          "skipFiles": [
              "node_modules/**"
          ],
          "sourceMapPathOverrides": {
              "webpack:///*": "${webRoot}/*"
          }
      }
  ]
}

本地启动在localhost:3001端口后，启动插件

顺滑的debugger体验～