主要分为以下三个步骤

  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}/*"
}
}]
}

3 使用 npm 启动项目, 关掉弹出的浏览器页面

4 打断点,在 Debug 模块启动调试

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

vscode 调试 react 项目的更多相关文章

  1. VsCode调试vue项目

    VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+ ...

  2. VSCode 安装 React 项目

    1 下载nodejs 安装 (此时npm 和 node环境都已经装好) 2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.tao ...

  3. Vscode 调试 Flutter 项目

    1.Vscode 中打开 flutter 项目进行开发 2.运行 Flutter 项目 flutter run r 键:点击后热加载,也就算是重新加载吧. p 键:显示网格,这个可以很好的掌握布局情况 ...

  4. 使用VSCode调试Egret项目中的ts代码

    发布一次Android项目后,会在代码里,生成对应的.map文件.这样就可以在编辑器里或是Chrome里面对相应的TS文件进行断点调试了. 实际只要在tsconfig.json里面配置一下," ...

  5. 四、VSCode调试vue项目

    1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...

  6. 解决vscode开发react项目没有html标签自动补全

    怎么设置自动补全: 左下角齿轮按钮--设置-- 在搜索框中输入Include Languages,选择Emmet,并在Emmet:include language下点击在setting.json中编辑 ...

  7. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  8. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  9. electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

随机推荐

  1. 014 Ceph管理和自定义CRUSHMAP

    一.概念 1.1 Ceph集群写操作流程 client首先访问ceph monitor获取cluster map的一个副本,知晓集群的状态和配置 数据被转化为一个或多个对象,每个对象都具有对象名称和存 ...

  2. 从0开发3D引擎(一):开篇

    介绍 大家好,本系列带你踏上Web 3D编程之旅- 本系列是实战类型,从0开始带领读者写出"良好架构.良好扩展性.最小功能集合(MVP)" 的3D引擎. 本系列的素材来自我们的产品 ...

  3. vc++简单的vector动态数组实现

    #ifndef __MYVECTOR__ #define __MYVECTOR__ #include <Windows.h> #define SUCCESS 1 // 成功 #define ...

  4. 1093 字符串A+B (20 分)C语言

    给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A 和 B,均为长度不超过 10^​6的 ...

  5. 物理ceph集群+K8s

    前提条件 在Ceph为k8s创建一个pool ceph osd pool create k8s 128 创建admin用户 ceph auth get-or-create client.admin m ...

  6. linux下挂载硬盘出错的解决方法

    我的电脑是 Uuntu16.04 + win10 双系统,今天在Ubuntu中打开D盘时报错 Error mounting /dev/sda5 原因是D盘的格式是ntfs,在linux中会出现不识别的 ...

  7. c++ 贪心讲解大礼包

    贪心是什么? 它其实类似一种思想 就是总问题可以分成许多的子问题 子问题的最优解可以直接推出整个问题 它和动态规划有一定的不同之处 动态规划不能由子问题的最优解推出整个问题的最优解 所以你看都要有一个 ...

  8. Maven 基础环境搭建 项目依赖jar包导入

    一.创建一个Maven工程 不清楚的话请查阅其它文档. 二.引入项目依赖的jar包 1.Spring 2.SpringMvc 3.Mybatis 4. 数据库连接池,驱动 5.其它(jstl.serv ...

  9. js css html加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...

  10. 对标Eureka的AP一致性,Nacos如何实现Raft算法

    一.快速了解Raft算法 Raft 适用于一个管理日志一致性的协议,相比于 Paxos 协议 Raft 更易于理解和去实现它. 为了提高理解性,Raft 将一致性算法分为了几个部分,包括领导选取(le ...