【React】在VSCode中调试React的方法

首先

本文是一个初学者在学习编程过程中对一些疑问进行研究后总结的备忘录。因此,文章中可能包含错误。请谅解。
如果您发现了错误,请不吝指正,感激不尽。

使用VSCode调试React的方法

スクリーンショット!2022-02-27 22.52.03.png
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

通过这样,VSCode上的调试准备已经完成了。

スクリーンショット 2022-02-27 23.10.15.png

由于服务器未启动,因此请在终端中运行npm start。

$ npm start

然后,屏幕应该能正常显示出来。

通过进行以上操作,可以实现像下面的图像一样,在断点处停止执行或将其输出到调试控制台。

スクリーンショット 2022-02-27 23.17.41.png
广告
将在 10 秒后关闭
bannerAds