1 visual studio code 的 extentions 里安装插件 debugger for chrome
2 devtool: 'eval-source-map', cacheBusting:false
3 chrome 快捷方式 在目标一栏,最后加上 --remote-debugging-port=9222,注意要用空格隔开
4 .vscode 里面放一个 launch.json 文件

{

"version": "0.2.0",

    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}
5 先点击chrome快捷方式,启动调试版的chrome
6 启动项目,并且在chrome里运行,localhost:8080
7 点击调试的 绿色三角,用attach方式,map到chrome的localhost:8080 这个地址

Visual Studio Code 断点调试配置方法(请按我的步骤 一定可以做到)的更多相关文章

  1. visual studio code断点调试react

    在项目配置文件   .vscode\launch.json 中添加:   "sourceMaps": true,   "skipFiles": [   &quo ...

  2. Visual Studio Code 断点调试Nodejs程序跳过node内部模块(internal modules)

    Built-in core modules of Node.js can be referred to by the ‘magic name’ <node_internals> in a ...

  3. 如何用Visual Studio Code远程调试运行在服务器上的nodejs应用

    假设我有一个nodejs应用,运行在AWS - 亚马逊云平台上(Amazone Web Service).我想用本地的Visual Studio Code来远程调试服务器端的nodejs应用. Vis ...

  4. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

  5. Mac上使用Visual Studio Code开发/调试.NET Core代码

    Mac上使用Visual Studio Code开发/调试.NET Core代码 .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今 ...

  6. [翻译]使用Visual Studio Code怎样调试Rust

    我将 Visual Studio Code 作为Rust首选编辑器.遗憾的是 VS Code 不能非常好地完成 Rust 的调试. 配置调试器不难,但仍然需要几个步骤.我已经完整配置了好几次.我正在写 ...

  7. 在Mac上使用Visual Studio Code开发/调试.NET Core代码

    .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今天抽空研究了下在Mac下如何使用VS Code来开发.NET Core程序,并且调 ...

  8. SharePoint Framework 在Visual Studio Code中调试你的托管解决方案

    博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...

  9. visual studio code 编辑器的配置及快捷键等, vscode, csc

    visual studio code (vsc) 对开发node.js,javascript,python,html,golang等比较友好,同时支持git浏览及分屏对比,运行速度快,所以是值得一用的 ...

随机推荐

  1. [ Pytorch ] torch.squeeze() 和torch.unsqueeze()的用法

    squeeze的用法主要就是对数据的维度进行压缩或者解压. squeeze() torch.squeeze(a):去掉a中维数为1的维度. a.squeeze(N):去掉特定维度N下维数为1的维度. ...

  2. partition_show , a new version to check partition table status in sqlserver

    Dear all: I had put "partition_show" before . but this time it makes faster. partition_sho ...

  3. 通过Java创建XML(中文乱码已解决)

    package com.zyb.xml; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Ou ...

  4. Django学习 之 HTTP与WEB为Django做准备

    一.HTTP 1.HTTP 简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. ...

  5. LNMP一键安装包 PHP自动升级脚本

    LNMP一键安装包 PHP自动升级脚本 2011年03月15日 上午 | 作者:VPS侦探 前一段时间完成了lnmp一键安装包的PHP自动升级脚本,今天发布出来,如果想升级PHP版本的lnmp用户可以 ...

  6. [转]ubuntu备份与恢复

    在 使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工 具(通常都是私有软件),然后重启电脑进入备份工具提供 ...

  7. zabbix监控 -mysql数据库

    1.禁用安装防护[root@mysql213 ~]# vi /etc/selinux/config #关闭安装 SELINUX=disabled 2.授权zabbix监控账号 mysql -uroot ...

  8. No module named 'PyQt5.QtWebEngineWidgets' 解决方法

    “No module named 'PyQt5.QtWebEngineWidgets”报错的原因是PyQt5版本过高,解决方法主要有两大类方法: [方法一] 指定安装5.10.1版本的pyqt5 pi ...

  9. PDO 小知识

    一.前言 PDO(PHP Data Object)提供了一个通用接口访问多种数据库,即抽象的数据模型支持连接多种数据库. PDO扩展为PHP定义了一个访问数据库的轻量.持久的接口.其本身并不能实现任何 ...

  10. JavaSwing标准对话框

    package test001; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import jav ...