直接从VS Code实时编辑和调试React应用-无需离开编辑器

通过VS Code和Chrome调试增强您的React调试工作流程

在我们最新版的VS Code Chrome调试器中,我们对sourcemapping-engine进行了许多改进,使我们能够使用create-react-app开箱即用地支持实时编辑和调试。

这使您作为开发人员能够在不离开编辑器的情况下编写和调试React代码,最重要的是,它使您能够拥有连续的开发工作流,其中上下文切换最少,因为您不必在工具之间进行切换。

现在,您可以编写代码,设置断点,更改代码并调试新修改的代码,所有这些操作都可以在编辑器中完成。

6个步骤开始

  1. 下载最新版本的VS Code并安装我们的Chrome调试器
  2. 使用create-react-app创建您的React应用
  3. launch.json文件使用以下配置,以配置VS Code调试器,并将其放在根文件夹中的.vscode中。

4.通过在您喜欢的终端上运行npm start来启动您的React应用

5.通过按F5或单击绿色的调试图标,开始在VS Code中进行调试。

调试愉快! 🎉🎈

细节

我们的Chrome调试器现在支持Webpack的热模块替换机制,该机制可通过运行本地文件查看器将模块更改推送到浏览器。

我们的调试器现在能够提取这些更改,并将新生成的HMR源映射重新应用到正在运行的已加载源文件中。 这样就可以进行实时编辑和调试, 而无需添加更多文件监视或后台工具。