- Debugging Webpack applications in WebStorm
- Debugging JavaScript in Chrome
- Configuring JavaScript Debugger and JetBrains Chrome Extension
-
Chrome需要安装JetBrains插件
-
使用WebStorm内置的server作为调试服务器时,因为它默认带了项目名作为URL前缀,会导致在调试时js和css文件找不到。 如WebStorm built-in web server gets 404 for every css and js file included in index.html
-
不能使用
webpack-dev-server
作为调试服务器,它不会生成dist/build.js
, 是直接从内存加载的,没法让webstorm加载。How to debug Webpack-dev-server (in memory) with WebStorm? -
Vue文件里的js断点需要打在对应的
dist/build.js
文件里面里面,因为一些vue文件里面的断点没法和dist/build.js
里面的内容做映射。(可能有更好的解决方法?) -
确保编译出来的
dist/build.js
没有压缩过或压缩过变量名, 方便调试。 -
修改webpack.config.js里
devtool: '#source-map'
-
添加服务
"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" },