不用console，VsCode在调试控制台console和debug打断点

男娘i 2023-02-27 12:17 225阅读 0赞

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

## 安装插件 ##

安装Debugger for Chrome插件:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]

## 选择调试 ##

选择chrome调试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]

## 配置 ##

选择了chrome调试之后，就会跳出`launch.json`：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]  
这个新加上的`console`属性有三种可选值：  
internalConsole：内部控制台  
integratedTerminal:内部终端  
externalTerminal:外终端

## 启动 ##

`npm run dev`启动项目，`然后F5`，这时候开发工具右上角会出现调试面板，打断点用的：  
![在这里插入图片描述][2020071716200067.png]  
将终端选到‘调试控制台’，随便在当前页面打印一个，就可以看到你的打印代码和报错信息：  
![在这里插入图片描述][20200717161732723.png]

## 打断点 ##

将左侧工具选到‘调试’，在你需要打断点的代码前面点一个小红点，左侧菜单栏有相关信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]  
然后点击右上角的调试面板的重启(当前你发现中间三个按钮是置灰的)：  
![在这里插入图片描述][20200717162748409.png]  
然后就进入了断点调试过程，在左侧查看信息，调试面板每个功能可选：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]

## 结束断点 ##

点击调试面板的继续按钮：  
![在这里插入图片描述][20200717163338196.png]  
项目就继续调试了，然后你可以在左侧菜单上对断点进行删除或禁用等。

--------------------

就酱！~ 欢迎提问指正~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230209/d5742cc2b8134553846720fb9c77fd63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200717160607644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200717160818343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200717161204803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[2020071716200067.png]: https://img-blog.csdnimg.cn/2020071716200067.png
[20200717161732723.png]: https://img-blog.csdnimg.cn/20200717161732723.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200717162703435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20200717162748409.png]: https://img-blog.csdnimg.cn/20200717162748409.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200717163035266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20200717163338196.png]: https://img-blog.csdnimg.cn/20200717163338196.png