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. spring-cloud-服务调用流程

  2. 好用的log打印类

    package com.huawei.network.ott.weixin.util; import android.util.Log; public final class DebugLog { / ...

  3. axios发送post请求[body-parser]--['Content-type': 'application/x-www-form-urlencoded']

    const express = require('express') const axios = require('axios') const bodyParser = require('body-p ...

  4. windows 创建软连接

    mklink /d D:\www\child.ivyoffline\common\components\policy D:\www\child.ivyoffline\appOA\protected\c ...

  5. sqlserver 取数据常用

    sqlDataReader: public SqlDataReader GetAuth_CourtListByAuth(int autIntNo) { // Create Instance of Co ...

  6. Java单例模式:为什么我强烈推荐你用枚举来实现单例模式

    单例模式简介 单例模式是 Java 中最简单,也是最基础,最常用的设计模式之一.在运行期间,保证某个类只创建一个实例,保证一个类仅有一个实例,并提供一个访问它的全局访问点.下面就来讲讲Java中的N种 ...

  7. No qualifying bean of type 'org.springframework.ui.Model' available

    原因:@Autowired 下面没有注入类

  8. STM32CubeMX+FreeRTOS 定时器os_timer的使用

    转载:https://blog.csdn.net/jacklondonjia/article/details/78497120在STM32CubeMX的FreeRTOS配置中,使能FreeRTOS的S ...

  9. Linux CentOS7 VMware find命令、文件名后缀

    一.find命令 Linux系统中的 find 命令在查找文件时非常有用而且方便.它可以根据不同的条件来查找文件,例如权限.拥有者.修改日期/时间.文件大小等等.在这篇文章中,我们将学习如何使用 fi ...

  10. Codeforces Round #199 (Div. 2) D. Xenia and Dominoes

    把 'O' 看成 'X',然后枚举它的四个方向看看是否能放,然后枚举 $2^4$ 种可能表示每种方向是否放了,放了的话就标成 'X',就相当于容斥,对于新的图去dp. dp就是铺地砖,行用二进制来表示 ...