vscode 打包的文件会放到哪里_在VSCode中调试webpack-dev-server项目

（首发于知乎，如需转载请注明出处）

笔者以往web前端项目通常使用Chrome DevTools来进行调试(debug)，编码则用的是VSCode，一直以来这款ide以它自带的调试功能作为一大卖点，于是今天来对VSCode调试功能的用法一探究竟，用它调试手头上的一个webpack-dev-server项目。

---

0.准备就绪

按照在网上查阅的资料^[1]，了解到想要对Chrome打开的JavaScript页面进行调试，需要在VSCode安装这样一个扩展：

Debugger for Chrome 扩展，至发稿为止最新版为4.12.6

下载安装很顺利，接着就开始做debug的配置。打开Run and Debug面板，在RUN AND DEBUG下拉框选择Add Config，VSCode自动创建launch.json文件，在光标处键入launch，选择Chrome: Launch，一套用于Chrome启动调试模式的配置模板就出来了：

Chrome: Launch 默认提供的debug配置模板

由于笔者的项目是通过npm加载webpack-dev-server搭建的开发环境，故还需要在真正开始debug前运行npm start命令启动server，怎么办呢？

所幸VSCode周到如斯，为我们提供了一个preLaunchTask属性——我们可以指定在debug前要运行的命令：

{
    
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
    
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080&