解决VUE中console.log日志无法在浏览器控制台上显示问题

于 2024-02-23 16:47:19 发布
阅读量2.1k 收藏 11
点赞数 8
分类专栏： vue 文章标签： html5 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72929753/article/details/136259311
版权

问题1.浏览器控制台设置问题

查看你的浏览器控制台的过滤级别

解决：将默认级别设置为默认即可解决。

问题2：console.log 未被加载到

在浏览器查看你的源代码，是否有console.log，若不在，说明在build环节console.log被完全移除

如上图，博主这种是被加载到了，说明问题不在此

问题3：vue项目中重写了console.log方法

解决：在你的开发者工具里全局搜索 console.log =   查看是否有内容，如果有，则说明方法被重写，注释掉之后，则日志可以在浏览器上正常显示。

如上图，博主的项目中重写了console.log 所以在控制台上无法看到日志，注释掉重启项目就可以正常看到日志了。

温馨提示：在开发者工具中全局搜索 console.log =  的时候，请注意等号前后的空格，如果重写的时候等号前后没有空格就搜索不到，可以将空格去掉再搜索。

希望上面的内容对您有所帮助！

缓慢前行的菜鸟
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2 - 项目上线后生产环境中去除console.log的输出以及断点的解决方案
前端充电宝
06-27 325
当你准备将Vue.js应用程序部署到生产环境时，一个关键的优化步骤是移除代码中的所有语句以及断点。在开发阶段，是一个非常有用的调试工具，但在生产环境中保留它们可能会影响性能和安全性。在本文中，我将向你展示如何通过使用Vue CLI 2来自动化这一过程，确保你的应用在发布时不再包含任何。通过上述步骤，你可以轻松地在部署 Vue.js 应用程序到生产环境之前，自动化地移除所有语句。这不仅可以提高应用的性能，还可以减少潜在的安全风险。记得在开发过程中保留可以帮助你更轻松地调试代码，但在最终部署前要记得清理它们。
Vue模板语法（下）
遥是此间桃花庵
09-18 385
样式绑定 1.1 class绑定 使用方式：v-bind:class=“expression” expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型：字符串、数组、对象 事件处理器 事件监听可以使用v-on 指令 2.1 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符， ....
【问题记录】vscode调试vue，console.log在vscode终端窗口无输出问题，从尝试到放弃
danqiu的博客
10-29 6194
vscode调试vue，console.log在vscode终端窗口无输出问题，从尝试到放弃
screenlog.js:在屏幕上显示console.log
04-22
screenlog.js 在屏幕上显示console.log 您是否曾经遇到过这样的情况：“开发者控制台打开后，为什么不显示此错误！”？ 而且由于在打开控制台时该错误不会显示，因此无法使用console.log进行调试日志记录。 输入screenlog.js 。 screenlog.js将开发人员控制台显示在屏幕上，这样您就可以进行日志记录而无需始终打开开发人员控制台。 用法 请执行npm install screenlog或bower install screenlog或。 将dist/screenlog.min.js放到您的Web应用程序中，并使用以下命令对其进行初始化： screenLog . init ( ) ; 您完成了！ 默认情况下，应用程序中的每个下一个console.log （或信息，警告和错误）现在都开始在屏幕以及控制台上进行日志记录。 或者，您也可以使用sc
【vue_1】console.log没有反应
11-25 2214
上面这段代码的console.log一直打印不出来，发现可能是ElMessage的问题，ElMessage是已经封装好的函数。1、首先，将ElMessage删除，之后看控制台是否能够打印。很好，说明就是ElMessage的问题，在看一下报错的地方。插播一句：如何使用if-else 语句来处理逻辑？总结：多思考，多使用console.log。加上上面这句话就能正确运行了。要做一个权限不够的弹出消息框。哦，原来是忘记导入库了。
关于在vue打包时，console.log()控制台在生产环境不输出的问题
最新发布
m0_71963731的博客
02-21 1872
vue在打包时console控制台输出问题
# 解决：Vue 代码中 console.log() 无法输出问题
热门推荐
m0_49772478的博客
10-29 1万+
解决：Vue 代码中 console.log() 无法输出问题 在学习Vue的过程中，发现在使用console.log()的时候，在google浏览器检查时并不输出数据，还需要自己 手动在控制台输入自己的数据名称才可以显示！ let person = { name:'张飒', sex:'男' } Object.defineProperty(person,'age',{ value:18
学习Vue，Vue基础语法02
weixin_67696142的博客
07-14 325
学习Vue，Vue基础语法02
vue 模板中使用 console.log
李刚的学习专栏
04-20 1975
模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。如何注册能够被应用内所有组件实例访问到的全局属性？
console.log无法打印问题
weixin_45773788的博客
06-26 1万+
本人遇到情况：vue项目中watch监听器监听绑定事件，console.log在控制台无显示，尝试alert正常。可能原因一：浏览器过滤条件问题（网上最常见的原因但本人并不是） 解决方案：左侧top栏选择info，默认级别（Default levels）中信息选项（info选项）要勾选，筛选器中清空。可能原因二（本人遇到的原因查了很久）：浏览器扩展程序问题。解决方案：亲测删除多余扩展后（云文档等）功能恢复正常，在另一浏览器上也是如此，都是存在云文档这一扩展程序导致console.log打印失效。...
【Vue】console.log()打印对象显示点点点，js打印语句显示省略号 | 解决方案
qq_51055690的博客
12-18 1207
在console.log打印对象或者数组时，里面会显示小数点。
在vue中使用console.log无效的解决
11-20
在Vue.js开发过程中，我们经常使用`console.log()`来调试代码，查看数据的变化。然而，有时在Webpack开发环境下，可能会遇到`console.log()`输出无效的情况。这并不是因为Webpack本身的问题，而是由于某些配置或者...
console-log-plus:console在控制台日志中添加有意义的前缀和颜色
05-13
:speech_balloon: :rainbow: :smiling_face_with_heart-eyes: 在控制台日志中添加有意义的前缀和颜色 console.log是Web开发中非常有用的工具。 它使我们知道我们所拥有的，并为我们提供所需的提示。 但是，在所有...
vue或react项目生产环境去掉console.log的操作
11-19
在开发过程中，为了调试方便，我们经常会在代码中插入`console.log`、`console.info`、`console.debug`等语句来输出信息。然而，当项目进入生产环境时，这些日志信息不仅没有必要，还可能因为占用带宽和性能消耗而被...
vue-cli3自动消除console.log()的调试信息方式
01-18
补充知识：Vue cli3 实现去除console.log 去除控制台输出 下载移除控制台输出的包 npm install babel-plugin-transform-remove-console –save-dev 新建 babel.config.js let plugins = [ vant插件的按需加载 ...
vue cli 5.x 配置生产环境不输出console.log
好巧的博客
11-18 3921
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。vue-cli 5 版本已经将 webpack 版本升级为5版本，具体变更可以自行查看 vue-cli 迁移日志。terser-webpack-plugin 插件 vue-cli 自带，无需自己安装，直接配置就可以。如果本篇文章对你有帮助的话，很高兴能够帮助上你。相比于 4.x版本，5.x配置变化有如下几个。本文基于 vue-cli 5.0.6 版本。
vue中重写并自定义console.log
ice_bear221的博客
06-12 1130
在vue2项目中自定义console.log并输出文件名及行、列号
JS中使用console.log()方法，在浏览器控制台没有内容的几种解决办法！！！
nn8783的博客
01-24 3005
【代码】JS中使用console.log()方法，在浏览器控制台没有内容的几种解决办法！！！
【前端】vue(前端)项目的控制台console在浏览器界面里
洛尧的博客
03-18 4671
打开浏览器 屏幕是浏览器界面时按F12，有的电脑是同时按Fn和F12。 console.log("")或者console.error("") 或者其他 （图中红色就是输出醒目的error） 不管什么编程都离不开输出调试，结果我一直搜不到vue的console在哪，问了未来同行才知道 ，真是。也试了F12，但好像是因为没在浏览器里点，在IDEA里点的，所以没反应。 ...
vue中console.log使用
08-23
在Vue中，可以使用`console.log`来打印信息。它可以用于调试和输出变量的值。你可以在Vue的组件中的方法中使用`console.log`来输出信息。例如，在一个Vue组件的方法中，你可以这样使用`console.log`： ```javascript methods: { handleClick() { console.log("Button clicked"); // 打印信息 } } ``` 在浏览器的开发者工具中，你可以查看控制台输出来查看`console.log`打印的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue模板语法（下）](https://blog.csdn.net/qq_21907023/article/details/100995182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值