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. redhat 7.6 安装 inotify-tools 文件监控工具 搭配rsync

    1.解压inotify-tools tar -zxvpf inotify-tools-3.14.tar.gz 2.cd 到解压的目录 3../configure  编译,然后失败,提示checking ...

  2. Using webpack-dev-server

    官方讲解地址:https://webpack.js.org/guides/development/#using-webpack-dev-server The webpack-dev-server pr ...

  3. mysql5.6源码安装(转)

    mysql5.6源码安装 转自 jabbok博客园 https://www.cnblogs.com/jabbok/p/9418344.html 1 编译安装 1 2 3 4 5 6 groupadd ...

  4. Linux-使用之vim出现的问题

    参考来源: https://stackoverflow.com/questions/47667119/ycm-error-the-ycmd-server-shut-down-restart-wit-t ...

  5. 用 lastIndexOf()、substr()、split()方法截取一段字符串

    lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. split() 方法用于把一个字符串分割成字符串数组,抽取到分割符前面部分. subst ...

  6. android 动态壁纸开发

    转:http://www.eoeandroid.com/thread-100389-1-1.html android 动态壁纸开发参考:http://www.ophonesdn.com/article ...

  7. 4.2 Scikit-Learn简介(机器学习篇)

    目录 第四章 机器学习 4.1 机器学习简介 4.1.1 机器学习分类 4.2 Scikit-Learn简介 4.2.1 Scikit-Learn的数据表示 4.2.2 Scikit-Learn的评估 ...

  8. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

  9. 算法:辗转相除法求最大公约数(C语言实现)

    辗转相除法,一种求最大公约数的算法 已知:A / B = C ······ R  (A.B.C.R皆是整数) 假设:D是A的余数,D也是B的余数,那么D就是A和B的公约数 D是A和B的约数,则A和B是 ...

  10. gitlab导入备份数据

    1.将南阳的gitlab 迁入到本地80虚拟机 由于本地ip地址没有固定,所以,是本地去拉取南阳的代码,虽然,之后固定了ip,但,由于只用一次这样的操作,所以,还是一直在做拉取而不是推送的工作 2.具 ...