1、首先到visual studio code官网下载ide。

2、打开visual studio code，点击右侧菜单条的小图标

找到【Debugger for Chrome】，并安装

3、打开cmd命令，启动npm start。（假设npm监听地址为：http://localhost:8989）

4、点击菜单【调试】->【启动调试】，或者F5，选择chrome。

5、修改.vscode文件夹下launch.json的配置文件

将默认的URL修改为http://localhost:8989，与npm侦听地址一致

6、启动调试（F5）。

然后就可以愉快的debug代码了

visual studio code 调试reactjs的更多相关文章

  1. Visual Studio Code 调试 PHP

    Visual Studio Code 调试 PHP 2018/12/4 更新 Nginx + php-cgi.exe 下与 Visual Studio Code 配合调试 必需环境 Visual St ...

  2. Visual Studio Code调试node.js：无法在PATH上找到运行时的node

    首先,环境变量Path中加入nodejs的路径: 验证nodejs是否已经加入环境变量: 接着,重新启动Visual Studio Code, 试一下,是不是好了~   附录:Visual Studi ...

  3. Visual Studio Code调试electron主进程

    Visual Studio Code调试electron主进程 作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56  一·概述 此文原出自[水滴石]: htt ...

  4. windows下用visual studio code 调试go代码

    http://www.golangtc.com/download下载安装包或压缩包 配置环境变量 配置GOROOT: 配置PATH:在PATH最后添加 配置GOPATH:GOPATH的作用请自行百度, ...

  5. 用 Visual Studio Code 调试 Node.js

    环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...

  6. 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏

    使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...

  7. visual studio code 调试nodejs 配置简单HTTP服务器

    介绍 Visual Studio Code是一个轻量级的Web集成开发环境on Linux,Mac and Windows,特别是作为前端人员来了, 多了一个可供选择的生产力工具IDE,调试js代码简 ...

  8. Go学习笔记（二）搭建Visual Studio Code调试环境

    上一篇 Go学习笔记(一)安装Go语言环境 安装Visual Studio Code 这是目前我觉得最好用的文本编辑器了, https://code.visualstudio.com/ 中间有几部确认 ...

  9. 使用visual studio code调试php代码

    这回使用visual studio code折腾php代码的调试,又是一顿折腾,无论如何都进不了断点.好在就要放弃使用visual studio code工具的时候,折腾好了,汗~ 这里把步骤记录下来 ...

随机推荐

  1. SpringBoot 01_HelloWorld

    本文环境配置: JDK:1.8 开发工具:IDEA 操作系统:Windows10 集成工具:Maven SpringBoot版本:1.5.6.RELEASE 构件方式:Spring Initializ ...

  2. 一次读懂mybatis中的缓存机制

    缓存功能针对于查询(没听说果UPDATE,INSERT语句要缓存什么,都是直接执行的) 默认情况下,mybatis会启用一级缓存. 如果使用同一个session对象调用了相同的SELECT语句,则直接 ...

  3. Python学习day45-数据库(总结)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  4. Redis学习笔记01-分布式锁

    1.分布式锁的定义与理解 在并发任务中,当对数据执行修改和删除时为了防止多个任务同时拿到数据而产生的混乱,这时就要用到分布式锁来限制程序的并发执行. Redis分布式锁本质上要实现的目标就是在Redi ...

  5. HDU--2639 Bone Collector II（01背包）

    题目http://acm.hdu.edu.cn/showproblem.php?pid=2639 分析:这是求第K大的01背包问题,很经典.dp[j][k]为背包里面装j容量时候的第K大的价值. 从普 ...

  6. Activiti工作流 安装myeclipse activiti设计插件并生成数据库表

    从零开始学习Activiti工作流,记录下学习过程. 关于工作流的简介没什么好介绍了,只能说是个很有用的东西,数据库中23张表分别有什么用网上也有很详细的介绍,这里也不多加说明.activiti开发中 ...

  7. No context type was found in the assembly

    如果解决方法中有多个项目存在,记住要在默认项目中选择你需要的项目进行 enable-migrations    add-migration 以及updatebase

  8. css的其他相关样式属性

    一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如 ...

  9. Cesium官方教程4--影像图层

    原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...

  10. hive作业的优化策略

    Mapreduce自身的特点: 1.IO和网络负载大:优化策略:减少IO和网络负载. 2.内存负载不大.优化策略:增大内存使用率: 3.CPU负载不大.优化策略:增大CPU使用率: (hive的优化应 ...