vscode 调试 react 项目

主要分为以下三个步骤

  1. 安装 debug for chrome
  2. 配置 launch.json 文件

    配置内容如下

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000",  // 改为目标 url
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}",
        "skipFiles": [
            "node_modules/**"
        ],
        "sourceMapPathOverrides": {
            "webpack:///*": "${webRoot}/*"
        }
    }]
}
  1. 打断点,在 Debug 模块启动调试

本配置参考 csdn 博客进行配置,详细链接在此 链接

原文地址:https://www.cnblogs.com/yaolin1228/p/11625016.html

时间: 2024-11-04 03:54:14

vscode 调试 react 项目的相关文章

使用VSCode调试RN项目

1.安装VSCode(安装就不说了),为什么用它,最重要的一点,他免费啊,对于码农的我们,这就是刚需. 2.插件安装: a.点击下图1,进入扩展搜索界面,搜索debugger for chrome插件,安装,刷新. b.添加配置--点击1,然后点击2,如下图 然后,会出现如下界面,一定要选中方框里面的环境,记得保存,你的配置栏就会发生变化 接下来先运行attach to packger,然后开启degug模式,一切完成之后你就可以console.log('控制台输出数据')或进行断点调试,断点仅

VSCode调试vue项目

先决条件 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map.做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置.这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系. 打开 config/index.js 并找到 d

使用ng serve 在Vs Code里调试 anguar 项目

ng serve 是@angular/cli 下的运行命令 我们可以通过下载@angular/cli来生成angular2的模板 npm install -g @angular/cli ng new Anguar-Example --默认会下载依赖包 cd Angura-Example npm install --如果下载了依赖包这步可以不做 ng serve --运行angular 或 npm start 运行项目 默认通过http://localhost:4200/ 访问. 如果我们想用VS

react项目运行心得 -- 访问地址的问题

1.react项目运行时,要先在命名窗口输入相应的命令 2.在浏览器输入相应的地址,比如:http://localhost:3000/new/newlogin (地址一定要这样输入,否则是运行不出来的,绿色地方表示的是路由对应的地址,有的设置了默认,有的没有设置.当输入了"localhost:端口号"之后,如果界面没有输出,调试bug的第一步是查找路由,在"localhost:端口号"之后输入对应的路径,如果界面还是运行不出来,就仔细查看readme文件. 当然,除

vscode 调试node.js

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

在使用安卓模拟器调试react native项

在使用安卓模拟器调试react native项目时报错 "xxx keeps stopping" (xxx,项目名). 起因是代码里有一个地方属性值写错了,应该是"space-around",导致项目运行错误,这种情况下,就算改正了,再刷新也还是会报错. 解决办法,找到bug并修复这是必须的,然后,你需要重新执行react-native run-android  (必要时在模拟器里卸载app再执行react-native run-android). http://p

在CentOS 7中使用VS Code编译调试C++项目

1. 安装VSCODE 见VSCode官方链接 https://code.visualstudio.com/docs/setup/linux#_rhel-fedora-and-centos-based-distributions  先下载yum源: sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbas

远程调试Spring项目

目录 远程调试Spring项目 服务端启动: 启动jar包: 使用mvnDebug启动SpringMVC项目: 客户端设置: IDEA设置: VsCode设置: 参考: 远程调试Spring项目 服务端启动: 启动jar包: 一般启动: java -jar huishi-api.jar 远程调试启动: java -jar -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=8000 huishi-api.jar addres

react项目创建流程

react 项目搭建 系统: windows 1.安装 node node 下载地址.一路 next 如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径. 查看是否安装成功,打开终端 node -v npm -v 2.安装 vscode 编辑器 vscode 下载地址.一路 next 3.安装 react 项目脚手架 打开终端 npm install -g create-react-app 4.创建 react 项目 create-