Webstorm的debugger代码断点调试

简介：

1.webstorm也能像java编辑器(idea)那样对代码进行断点调试。
2.代码不用过多的console.log输出来查看结果。

版本环境

    webstorm: 2021.1.2

设置 Debug：

以优秀的开源项目 vue-admin-template 为例：

1. 查看 Settings中的 Build,Execution,Deployment中的 Debugger配置：

2. 添加或编辑设置(add Configuration或Edit Configuration)

3. 添加 JavaScript Debug
   

4. 运行debug前，先启动项目然后再运行debug： 启动项目(npm run dev)，然后选择刚刚配置好的debug;浏览器会自定打开配置的URL页面。
   先启动项目，再运行debugger:
   
   

Debugger面板介绍

调试方式	快捷键	作用(描述)
Step Over	F8	调试一行代码，不进入子函数，不存在子函数效果和Step Into一样。
Step Into	F7	单步执行，遇到子函数就进入且继续单步执行(执行遇到子函数会进入)
Step Out	Shift+F8	当单步执行到子函数时，用 Step Out 就可以执行完成子函数余下部分，并返回到上一层函数，可以理解为执行完当前模块并跳出。
Fore Step Info	Alt+Shift+F7	进入任何方法

总结

配置 add new run configuration ==>> JavaScript Debug ==>> 配置 Name, URL, Browsers ==>> apply和OK

---

要像风一样，一年四季脚步不停，去寻找那个发光的自己。