一、console输出到控制台

如果Vue项目中，使用了eslint-loader（代码规范：空格，缩进，console等测试语句）的话，就没法使用console

一定需要使用console可以尝试关闭eslint-loader，在vue.config.js中添加以下配置，然后重启项目：

 module.exports = {
        lintOnSave: false
    }

二、网页network中直接js打断点

一般js可以使用，但是如果是vue项目，webpack会将vue文件解析成以下，无法清晰定位自己的代码并断点

三、debugger

vue的模板文件，在网页中不好直接调试，使用debugger可以自动帮我们定位到断点位置

debugger 语法

function fn() {
  debugger;
  // to do sth...
}

测试： 

 

 

四、vscode

4.1 vscode中安装 Debugger for Chrome 插件

4.2 vue.config.js配置

vue项目根目录下

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

4.3 babel.config.js 配置

vue项目根目录下

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

4.4 launch.json配置

vue项目根目录下建立 .vscode文件夹，再创建这个文件

• url:指项目url
• webroot：src目录
• sourceMap：会定位到指定路径

配置完成后，打开需要调试的文件，点击debug图标，打断点后，刷新页面，即可进行调试（在网页上和vscode中都可进行调试），调试时可进行自动定位，变量、数据查看等。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
    ]
}

测试：

注意：只有当前workspace为当前项目路径时才能将.vscode创建在当前项目根路径下。

也就是说每次通过debug里面配置创建的launch.json文件，都是创建在当前workspace下的，使用的也是这个文件，否则创建不生效

注意要点击这里以后自动打开的浏览器才能进行debug