×

React VSCode Webpack Debug

96
甘言川
2017.01.11 22:15* 字数 322

VSCode 使用者的福音。在公司原来使用WebStrom开发React,Webstrom 开发React调试详见(debugging-webpack-applications-in-webstorm),后来发现VSCode是开源免费的,于是转战VSCode。虽然大中国破解很牛逼,但是在国企上班不能用破解,你懂的。废话不多说,详见一下内容。

内容大纲

  1. VSCode 调试配置
  2. webpack.config.js 配置
  3. 完整操作步骤
  4. 常见问题

VSCode 调试配置
VSCode调试快捷键F5,如果默认没有配置过,F5会有提示,我们选择Chrome


2017-01-11_220056.png

选择之后会在项目目录自动生成.vscode/launch.json,以下是我的launch.json文件,特别注意图中提示


2017-01-11_220307.png

webpack.config.js 配置
webpack.config的配置最主要注意两个东西,详见下图


2017-01-11_220745.png

完整操作步骤

  • 第一步启动Webpack调试项目:
    webpack-dev-server --config webpack.config.dev.js
  • 第二步在VSCode中按F5开启调试

常见问题

  • 127.0.0.1:9222 连接失败,如下图:

    zL4P2.png

    处理办法:关闭所有的Chrome浏览器,重新在VSCode中F5调试即可,因为已经打开的Chrome有可能会阻止调试或者占用调试端口(默认9222)
IDE
Web note ad 1