Angular组件调用console.log后控制台无输出问题

首先先明确两个最基础的认知，别找错地方：

• 运行ng serve的命令行窗口只显示Angular编译、构建、热更新相关的服务端日志，你写在组件TS里的console.log是跑在浏览器端的JS代码，天生就不会输出到这个终端窗口，在这里找不到是完全正常的。
• 前端代码里的console.log默认只会输出在浏览器开发者工具的控制台面板，你在Firefox里看不到，且已经确认代码行确实执行了，100%是控制台的过滤/设置问题，不需要改业务代码。

Firefox控制台排查步骤 #

按下面顺序检查，基本都能找到日志：

• 按F12唤起Firefox开发者工具，确认你打开的是顶部标签栏的「控制台」面板，不要错开到调试器、网络、性能这类其他面板。
• 检查面板顶部的过滤规则：
  • 确认「日志」分类的开关是勾选状态：Firefox控制台会把输出分成错误、警告、日志、信息、调试几个类别，普通console.log属于「日志」类，这个分类关了就会被隐藏
  • 清空顶部的搜索过滤框：如果之前搜过其他关键词留了内容，不匹配的日志会被全部过滤掉
  • 关掉「仅显示错误/仅显示警告」的筛选开关，这类开关会屏蔽普通级别的日志
• 检查控制台的执行上下文选择：面板顶部有个上下文下拉选框，默认应该选中你当前站点的顶层页面，如果不小心切到了其他iframe、浏览器插件的上下文，就看不到当前Angular应用的输出，切回自己站点的上下文即可。
• 如果上面都没问题还看不到，开Firefox的隐私窗口打开项目页测试：部分广告拦截、脚本增强类插件会篡改页面JS环境、屏蔽console输出，隐私窗口默认不加载第三方插件，能直接排除插件影响。

代码层面的无关优化提示 #

这些问题不会导致console.log不显示，但不符合Angular的开发规范，后续可能出其他bug：

• 你给展示用的<span>标签加了ngModel绑定是无效的，ngModel只对input、select、textarea这类可交互的表单控件生效，普通展示元素直接用插值或者你现在写的[innerHTML]绑定就行，多余的ngModel属性可以删掉。
• 监听模板驱动表单的变更，更推荐直接用ngForm的valueChanges订阅，比给form标签绑原生change事件更稳定，不会漏触发表单控件的部分变更场景。

内容的提问来源于stack exchange，提问作者Adder