vscode+debugger for chrome插件 开发基于vux的移动端web程序，调试断点对不上

Question

问题描述

vscode+debugger for chrome插件 开发基于vux的移动端web程序，
在vue中加断点，执行的时候，断点对不上，调试有时停在没有设置断点的地方。

另外一个基于webpack 模板开发的程序能正常调试。

问题出现的环境背景及自己尝试过哪些方法

vscode 1.27.2 英文版
Debugger for Chrome 4.10.1
win10 中文版
node v8.11.2
npm 5.6.0
vue 2.9.6
vux 2.9.2

相关代码

1、使用下面的步骤创建工程

npm install vue-cli -g 
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev 

2、开发工具用的是vscode 1.27.2 + debugger for chrome 插件

3、位了调试配置的参数如下
.vscode/launch.json 内容如下：

{

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8088/hotel",
            "webRoot": "${workspaceFolder}"  // 改为${workspaceFolder}/src  跟踪不上任何断点
        }
    ]
}

config/index.js 中的部分配置如下

    devtool: 'eval-source-map', // 换成 source-map 也不行
    cacheBusting: false,
    cssSourceMap: true

你期待的结果是什么？实际看到的错误信息又是什么？

希望能正常调试，能停留在断点处。

Answer 1

Sourcemap 并不是完美的。Bundler、Compiler 大行其道的今天，Sourcemap 越来越力不从心了……