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. Plugin org.apache.maven.plugins:maven-clean-plugin:2.4.1 or one of its dependencies could not be resolved: Failed to read artifact descriptor for org.apache.maven.plugins:maven-clean-plugin:jar:2.4.1

    Plugin org.apache.maven.plugins:maven-clean-plugin:2.4.1 or one of its dependencies could not be res ...

  2. Django项目: 2.模板抽取

    为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% blo ...

  3. 让ASPX页面可以提交html标签代码的配置

    1:打开web.config文件,在system.web节点里,添加<httpRuntime requestValidationMode="2.0" /> 2:在asp ...

  4. wpf textbox只能输入数字，屏蔽中文输入

    1.设置textbox属性InputMethod.IsInputMethodEnabled="False" 2.增加KeyDown事件 private void TextBox_K ...

  5. java开发系列-Http协议

    概述 HTTP(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.这种协议用来规定通信数据的格式. HTTP请求 浏览器往服务器发送数据称之为请求.HTTP ...

  6. 2019-3-1-VisualStudio-扩展开发-获得输出窗口内容

    title author date CreateTime categories VisualStudio 扩展开发 获得输出窗口内容 lindexi 2019-03-01 09:21:41 +0800 ...

  7. Codeforces 500D. New Year Santa Network

    题目大意 给你一颗有\(n\)个点的树\(T\),边上有边权. 规定,\(d(i,j)\)表示点i到点j路径上的边权之和. 给你\(q\)次询问,每次询问格式为\(i, j\),表示将按输入顺序排序的 ...

  8. 05.Hibernate常用的接口和类---Configuration类和作用

    Configuration作用: 加载Hibernate配置文件,可以获取SessionFactory对象 加载方式: 1.加载配置文件 Configuration configuration = n ...

  9. webpack打包css文件

    1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中 ...

  10. gitlab merge request

    分支提了mr之后, 又有commit 不用重新提mr,mr中会自动更新 要保证项目下的.git目录中有hooks这个目录(如果是从github迁移到gitlab的项目, 可能没有这个目录, 导致mr不 ...