vscode 调试 react 项目
主要分为以下三个步骤
- 安装 debug for chrome
- 配置 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 项目的更多相关文章
- VsCode调试vue项目
VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+ ...
- VSCode 安装 React 项目
1 下载nodejs 安装 (此时npm 和 node环境都已经装好) 2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.tao ...
- Vscode 调试 Flutter 项目
1.Vscode 中打开 flutter 项目进行开发 2.运行 Flutter 项目 flutter run r 键:点击后热加载,也就算是重新加载吧. p 键:显示网格,这个可以很好的掌握布局情况 ...
- 使用VSCode调试Egret项目中的ts代码
发布一次Android项目后,会在代码里,生成对应的.map文件.这样就可以在编辑器里或是Chrome里面对相应的TS文件进行断点调试了. 实际只要在tsconfig.json里面配置一下," ...
- 四、VSCode调试vue项目
1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...
- 解决vscode开发react项目没有html标签自动补全
怎么设置自动补全: 左下角齿轮按钮--设置-- 在搜索框中输入Include Languages,选择Emmet,并在Emmet:include language下点击在setting.json中编辑 ...
- react-create-app 构建react项目的流程以及需要注意的地方
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...
- electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
随机推荐
- Django 项目目录重构
原因 一个完整的项目下来, 会涉及很多模块, 文件和资源, 对Django默认的文件目录结构基础上进行重构, 会使得我们的项目结构更加清晰, 便于后期管理 重构 """ ...
- [Oracle]Oracle的闪回归档
Oracle的闪回归档 场景需求,由于管理数据库的一些核心表,在实施初期会有人为误删除的问题.Oracle 11gR2提供了闪回归档的特性,可以保证不用RMAN来恢复误删除的数据.实践如下: 1.创建 ...
- (三)Django模板语言
一.字典,列表,类在template模板中的使用 在视图函数中,即views.py中进行传值操作,可通过render方法,进行传值 from django.shortcuts import rende ...
- 图解 kubernetes scheduler 架构设计系列-初步了解
资源调度基础 scheudler是kubernetes中的核心组件,负责为用户声明的pod资源选择合适的node,同时保证集群资源的最大化利用,这里先介绍下资源调度系统设计里面的一些基础概念 基础任务 ...
- Oracle数据库设计省市区小区数据库建表
省CREATE TABLE "SF_JECF_BASE"."SF_PROVINCE" ( "id" VARCHAR2(64 BYTE) NO ...
- 菜鸟学习Fabric源码学习 — 背书节点和链码容器交互
Fabric 1.4 源码分析 背书节点和链码容器交互 本文档主要介绍背书节点和链码容器交互流程,在Endorser背书节点章节中,无论是deploy.upgrade或者调用链码,最后都会调用Chai ...
- iSO垂直滑动条VerticalSlider
由于项目需要实现一个垂直的Slider,滑动条使用UIlabel实现,按钮使用UIButton,按钮可以设置背景图片,代码如下 VerticalSlider.h // // VerticalSlide ...
- 用markdown写博客,看这一篇就够了
0. 前言 记得上次用markdown写博客,尽管我有markdown使用经验,但第一篇markdown博客还是不得已的"回滚"了. 传送门:记录一下第一次用markdown写博客 ...
- Faster Rcnn随笔
步骤:1.build_head()函数: 构建CNN基层网络图像被缩放16倍2.build_rpn()函数: 在feature map上生成box的坐标和判断是否有物体 generate_anchor ...
- STM32动态内存分配需要注意的地方
STM32进行动态内存分配是需要注意动态内存分配大小不要超过.S文件中设置Heap Size大小 如图所示: 0x4000 :可以分配得最大字节是16384bytes 这个地方malloc的大小超过了 ...