首页 前端知识 【问题记录】vscode调试vue,console.log在vscode终端窗口无输出问题,从尝试到放弃

【问题记录】vscode调试vue,console.log在vscode终端窗口无输出问题,从尝试到放弃

2024-04-19 21:04:57 前端知识 前端哥 717 450 我要收藏

调试若依系统,在前端代码里加了console.log,却在vscode的终端怎么都找不到输出的内容。这怎么行,必须搞它,查!

需要说明,我打开浏览器(edge)F12开发者页面的控制台中是可以正确显示console.log的内容的。如果浏览器控制台中也没有显示,则可能是:

  1. 控制台的信息显示级别(比如信息可能有info、warning、error不同级别,级别选择不对就看不到)选择不对
  2. 或开发工具设置问题
  3. 或者有说是FCC里的console覆盖了浏览器里原生的console,可以尝试反复多按几次F12
  4. 有可能console输出了,但立刻又被接下来执行的操作清除了,可以在浏览器选择保存log信息的设置(若有)
  5. 或改用window.console.log命令试试

等等吧,以上情况不属于本问题。

网上搜了很多种解决帖子,一一尝试如下:

1. 代码错误导致没有执行到console.log,或并没有调用到console.log

既然我浏览器中显示正常,自然不是这种低级错误。

2. vscode修改代码后必须要保存才生效。用ctrl+s,或者Settings里设置Auto Save

我都是保存的,没有效果。

3. 由于最终生产版本中保留console.log会影响性能,因此可能会有一些设置,根据项目环境判断是否关闭console的输出,仅在开发环境时允许使用console输出

可以在vscode全项目代码搜索关键词:

(1)no-cosole

一般是在.eslintrc.js中(若依系统\ruoyi-ui\.eslintrc.js),需要存在:

  rules: {

‘no-console’: ‘off’

}

若果没有,需要增加这一项。

我的原本就有这项,不是这个问题。

看有个人说不行再尝试在同路径下的package.json中最后增加:

  "rules": {

    "no-console": "off",

    "no-debugger": "off"

  }

这个确实没有,我添加了,并没有效果。

而且package.json似乎并没有这个rules配置,输入的时候智能联想并没有rules这一项。

然后又说不行再加:

handleClick(tab, event) {

    window.console.log(tab, event)

这人说时好时坏,感觉也不靠谱,这个我就没试了。

后来查到package.json中rules的添加应该是eslint检查的配置:

  "eslintConfig": {

    "rules": {

      "no-console": "off"

    }

  } 

添加后依旧无效。

(2)remove-console

说是在babel.config.js中可能存在此配置。

我项目中没有搜索到。

(3)drop_console(或者搜搜production)

可能存在于vue.config.js的configureWebpack: config中,比如:

if (process.env.NODE_ENV === ‘production’) {

config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true

}

生产环境会取消console.log,改为false即可。

我项目中没有搜到,而且是开发环境也并非生产环境。

(4)UglifyJs(内部也是配置drop_console)

也是涉及部署环节移除console.log和debugger

我项目中没搜到。

4. vscode显示的终端位置问题

可以按ctrl+,打开settings,输入console,找到Settings: Console设置:

默认integratedTerminal是vscode的terminal窗口。

可以修改为internalConsole,则显示在debug console窗口中。

但这个仅仅是改变console输出窗口位置,没有解决console.log不显示问题。

(直接配置vscode的launch.json也是可以的,就不具体说了)

5. 使用window.console.log代替console.log

无效。

另外这个似乎是解决浏览器不显示信息的办法之一。

6. 有人建议嵌套一层使用

methods: {

 log(msg){

  console.log(msg);

 }

}

然后使用log函数代替console.log。

试了下,无效。

7. 有人说不要直接F5,使用code runner插件,用Run Code运行js文件

右键点击文件,选Run Code,或者文件标题栏最右边有个三角可以点:

试了下,对他举例这种最简单的js文件时可以的,输出则是在output终端界面。

但对于复杂项目js文件根本执行不起来。

对vue文件使用则显示代码语言不支持。

8. nodejs版本兼容性问题

已经半疯了,懒得试这个。

9. 还有说配置修改完重新启动服务、vscode等等。

我连电脑都重启了,无效。

10. 有人的问题与nuxt有关

比如可以尝试重启nuxt cli进程,有时候console.log仅在组件服务首次运行时有输出,原因不明;

或者nuxt.config.js中是否设置了quiet: true。

这项目应该是没用到nuxt。

11. 最后还查到两个情况,实在懒得再弄了,都没试

(1)visual studio code - Javascript console.log is not printed on vscode - Stack Overflow

这个帖子的意思是在launch.json中增加"console": "externalTerminal"

但我想这个externalTerminal指的应该是第三方终端,比如cmd或者浏览器的控制台之类的。加了还是不在vscode里输出。

(2)vscode中使用js的console配置 - mac-CSDN博客

是要创建一个tasks.json来处理js

头晕,盲区,没试。

12. 累了,毁灭吧!

整整折腾了一天,七八个小时,疯了。

爱输出不输出!

顺便看了vscode中调试vue的方式,因为原本以为都是在vscode内完成,也就是需要console.log在终端显示。最终发现调试需要启动浏览器。

具体方法有不少说明就不细说了,可参考:

使用Vscode进行Vue的debug调试功能,研究了一天终于可以了,同时解决Unbound breakpoint灰点问题-CSDN博客

其中提到以前chrome浏览器用的插件debugger for chrome已经弃用,现在用JavaScript Debugger。

我这显示涉及浏览器的是分为chrome和edge,各有attach和launch两种模式:

Launch模式是直接开一个浏览器窗口。

Attach是依附一个现有浏览器窗口。

我使用Attach失败,不知哪里问题,干脆删掉了。

Launch可以开新窗口,console.log显示正常。但调试断点始终无效,如图所示,运行起来断点都是灰色的,暂时搜了下,还没有详细研究。

我的vscode的launch.json配置:

第一个Launch Java Program是启动若依系统后端。

第三个Run Script: dev是启动若依系统前端。

在左上角那个绿色三角下拉框,可以分别启动,然后会分别在两个terminal终端内显示相关信息。

第二个Launch Edge,就是启动Edge浏览器。

其中有两个webpack:的设置,增加的第二条webpack:据上面那个帖子里说的,用来解决断点无效问题,我这里暂时没起作用,不知道是不是路径设置有问题。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5266.html
标签
vscodeide
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!