使用WebStorm调试Vue

参考:

• Debugging Webpack applications in WebStorm
• Debugging JavaScript in Chrome
• Configuring JavaScript Debugger and JetBrains Chrome Extension

注意事项:

0. Chrome需要安装JetBrains插件

1. 使用WebStorm内置的server作为调试服务器时，因为它默认带了项目名作为URL前缀，会导致在调试时js和css文件找不到。 如WebStorm built-in web server gets 404 for every css and js file included in index.html

2. 不能使用webpack-dev-server作为调试服务器，它不会生成dist/build.js， 是直接从内存加载的，没法让webstorm加载。How to debug Webpack-dev-server (in memory) with WebStorm?

3. Vue文件里的js断点需要打在对应的dist/build.js文件里面里面，因为一些vue文件里面的断点没法和dist/build.js里面的内容做映射。(可能有更好的解决方法？)

4. 确保编译出来的dist/build.js没有压缩过或压缩过变量名, 方便调试。

5. 修改webpack.config.js里

    devtool: '#source-map'
   

6. 添加服务

      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
        "server": "cross-env NODE_ENV=development live-server",
        "builddev": "cross-env NODE_ENV=dev webpack --progress --hide-modules"
      },
   

调试

1. 构建dist/build.js

    npm run builddev 
   

2. 启动server

    npm run server
   

3. 如图配置webstorm

   

4. 在dist/build.js里添加断点，开始调试