使用vscode调试前端工程化项目
Debugger 是分析代码的好帮手，赶快配置起来吧！
通常前端 debug 直接在代码里加 debugger 去 devtools 调就好了，但这次我要直接在 vscode 中调试前端代码，大概实现这种效果：
下载 debugger 插件
去 vscode 插件市场搜索：Debugger for Chrome
吐槽：Microsoft 家的 vscode 竟然没有 Debugger for Edge, 而是写了for Chrome。
打不过就加入是吧！
配置 launch.json
创建 launch.json
添加配置
根据你的浏览器，选择配置
关于 Attach和Launch
Launch：另开一个全新浏览器进行调试，无需配置
Attach：连接到已经启动的浏览器，需要配置 debug 监听端口
Launch
没什么好说的，添加上这个配置，开启调试就能用了
Attach
如果你使用了request为attach，那么，你启动Chrome时必须remote debugging enabled。我们来看下如何做吧。
-
Windows
右击Chrome快捷方式，选择属性在“目标”属性内加入：–remote-debugging-port=9222或者在命令窗口执行：/chrome.exe --remote-debugging-port=9222
-
macOS
In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
-
Linux
In a terminal, launch google-chrome --remote-debugging-port=9222
In a terminal, launch google-chrome --remote-debugging-port=9222
在这种方式下，如果你已经打开了Chrome，请将它重新启动。
我的 Microsoft Edge 启动方式（本机Mac）
右击 Microsoft Edge，显示包内容
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222
注意 Microsoft Edge 中间的空格是 \
使用体验
JavaScript 调试起来真是太方便了，比那个 PHP 不知道强到哪里去了，建议刚开始学编程的同学直接学 JavaScript，各种变量，对象，函数看的清清楚楚，哈哈哈！