在日常开发 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 中配置的路径。