webstorm debugger断点调试React前端项目教程

在日常开发 React 前端项目时，如果想调试前端 js 代码，我们一般都会在代码中插入console.log语句，通过在 Chrome 输出日志的方式进行查看。或者在 Chrome 的 source 中查找到目标代码片段，进行打点调试。这样调试的方式效率都比较低下，如果能在我们的本地 IDE 中进行断点调试前端代码，那么效率将会显著提高。

我们先看一下最终的调试效果：
Webtsrom 中的断点及 debug 情况 Chrome 中实时运行情况

#操作步骤：

1. 点击 Webstorm 右上角，设置 debug 配置，点击 Edit Configurations，进行 debug 程序配置。

2. 从该入口，运行 React 项目

3. 等 React 运行成功以后，执行刚刚添加的 js debug 程序

4. 最后就可以在 Webstorm 的代码中，加入断点，刷新页面，当程序运行到断点处，实时数据就会进入到我们的 IDE 中，就可以进行本地调试啦。

初步效果：Webstorm 会打开一个新的的浏览器页面，展示我们的 React 项目页面。当运行到我们在 IDE 中添加的断点处，浏览器会暂停，并将调试数据返回给 IDE，这样我们就能在本地实时调试了，还能一句一句执行程序，即高效又方便。

#Chrome 账号登录及个人配置丢失问题解决

目前新打开的浏览器中，没有登陆的 Chrome 账号信息，没有保留的书签，和我们安装的插件。这样虽然支持了debugger 的能力，没有登陆信息和 Chrome 插件，也十分不方便我们开发。下面将带领大家保留 Chrome 的配置信息。

可以参考 Webstorm 官方提供的设置方法

www.jetbrains.com/help/websto…

下面将按照官方提供的方法进行设置一遍：

1. 打开 Webstorm 的设置面板

2. 点击编辑，设置浏览器的用户配置地址，则下次打开时，将使用该地址进行信息存储
   地址路径为：/Users/Henry/Library/Application Support/JetBrains/WebStorm2021.2/chrome-user-data
   （不同的电脑，可以自定义存储的路径）

3. 关闭浏览器，重新启动上述 js debug 程序，在新打开的 Chrome 页面中，再一次进行账号登陆、重新插件安装。以后每次启动时我们的调试程序时，Chrome 的账号信息、书签和插件就可以保留了。

4. 注意：每次启动我们的 js debug 程序时，需要退出 Chrome，从而保证新打开的浏览器获取的用户配置信息，来自于我们在 Webstorm 中配置的路径。