js项目之断点调试

vue 项目断点调试设置

• Webpack 设置 devtool
  不同的构建工具略有不同

  configureWebpack: {
      name: name,
      devtool: 'source-map',
      resolve: {
        alias: {
          '@': resolve('src')
        }
      }
    },

• 安装jsdebug 调试插件 大部分ide自带有

• idea 新建 JavaScript debug
  

• 启动项目
  npm run serve

• 启动调试
  

• 在启动的浏览器窗口中链接指向上面启动项目的链接

• 在vscode也是类似

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}