使用launch在vscode中调试react

先用create-react-app或vite创建一个项目

image.png

  1. {
  2.     "configurations": [
  3.         {
  4.             "name": "Launch Chrome",
  5.             "request": "launch",
  6.             "type": "pwa-chrome",
  7.             "url": "http://localhost:3000",
  8.             "webRoot": "${workspaceFolder}",
  9.         }
  10.     ]
  11. }

启动项目

否则无法debug

找到需要debug的代码位置

image.png

点击vscode左侧图标

image.png

右三角图标

image.png

这时浏览器会自动打开一个窗口，并一直loading转圈，同时vscode代码编辑区会出现如Chrome源码调试图标

image.png

随即按F12打开就可以看到如下调试界面

当然这只是Chrome的调试界面，不过这次要说的是vscode里面的调试
image.png

Chrome与vscode调试界面对比介绍

image.png

Scope === VARIABLES

image.png

Call Stack

image.png
然后就可以按照在Chrome上的方式在vscode进行调试了
image.png
image.png

逐行debug

image.png
image.png
点击控制面板向下箭头图标，可以一直点
image.png
image.png
image.png
向上箭头图标
一直点完，然后就没了
image.png
可以点击重复图标，重新进行debug
image.png