前端调试系列一 react web项目

创建项目

我们以 React 项目为例，用 create-react-app 创建一个 react 项目：

yarn create react-app test-react-debug

配置vscode

用 VSCode 打开项目目录，注意要以当前文件目录为根路径去打开vscode

创建 .vscode/launch.json

{
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:你的项目的端口号",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• launch：调试模式启动浏览器，访问某个 url，然后连上进行调试
• attach：连接某个已经在调试模式启动的 url 进行调试
• userDataDir： user data dir 是保存用户数据的地方，比如浏览历史、cookie 等，一个数据目录只能跑一个 chrome，所以默认会创建临时用户数据目录，想用默认的目录可以把这个配置设为 false
• runtimeExecutable：切换调试用的浏览器，可以是 stable、canary 或者自定义的
• runtimeArgs：启动浏览器的时候传递的启动参数
• sourceMapPathOverrides：对 sourcemap 到的文件路径做一次映射，映射到 VSCode workspace 下的文件，这样调试的文件就可以修改了
• file：可以直接指定某个文件，然后启动调试

进入项目目录

npm run start

使用vscode开始debugger

启动了浏览器，并打开了这个 url

会出现对应的按钮，用法与chrome的基本一致

在文件中打断点，点击刷新按钮即可进入断点