VSCODE 如何调试 react UI 组件源码-icode9专业技术文章分享

本文主要是介绍VSCODE 如何调试 react UI 组件源码-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在VSCode中调试React UI组件源码，位于node_modules中的源码，你可以按照以下步骤操作：

1. 打开你的React项目所在的文件夹，并找到node_modules文件夹中对应的React UI组件源码。

2. 打开VSCode，在顶部菜单中选择文件(File) -> 打开文件夹(Open Folder)，选择你的React项目所在的文件夹。

3. 安装Debugger for Chrome插件。在左侧边栏的插件搜索框中搜索Debugger for Chrome，安装该插件。

4. 在VSCode中，按下Ctrl+Shift+D或者进入查看(View) -> 调试(DeBug)，点击创建 launch.json 文件并开始调试(Create a launch.json file and start debugging)。

5. 选择Chrome作为调试器，然后VSCode会生成一个launch.json的配置文件。

6. 打开你想要调试的React组件源码文件，在需要设置断点的地方点击行号左侧添加断点。

7. 启动你的React应用，确保React组件源码被加载。

8. 回到VSCode，点击调试工具栏上的播放按钮开始调试。

9. 打开Chrome浏览器，访问你的React应用并打开开发者工具。

10. 在Chrome的开发者工具中选择Sources选项卡，找到你需要调试的组件源码文件，断点应该已经生效了。

现在，你可以在VSCode中调试位于node_modules中的React UI组件源码了。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于VSCODE 如何调试 react UI 组件源码-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！