控制台输出怎么用？浏览器调试小技巧分享

平时在浏览网页时，偶尔会遇到页面加载慢、按钮点不动或者图片出不来的问题。这时候，很多人会选择刷新页面或者换个浏览器试试，其实还有一个更直接的办法——打开浏览器的控制台看看发生了什么。

控制台在哪里？怎么打开？

大多数现代浏览器都自带开发者工具，控制台就是其中的一部分。在 Chrome 或 Edge 里，按下 F12 或者右键点击页面选择“检查”，就能看到底部或侧边弹出一个面板，切换到“Console”标签页，这就是控制台了。

常见的控制台输出语句

网页开发者经常用 console.log() 把信息打印出来，方便查看变量值或程序运行到哪一步。比如：

console.log("页面加载完成");
var count = 5;
console.log(count);

你在控制台输入这些代码并回车，就会看到对应的输出结果。不只是 log，还有几种常用的输出方式：

• console.warn() 输出警告信息，前面带个黄色三角
• console.error() 输出错误，会标红，适合提示严重问题
• console.info() 输出提示信息，有些浏览器会加个图标

举个例子：

console.warn("网络请求较慢，请稍等");
console.error("用户未登录，无法提交数据");

实际应用场景

比如你在网上购物，点了“加入购物车”却没反应。打开控制台，发现出现一条红色错误：Uncaught ReferenceError: addToCart is not defined，这就说明页面脚本出了问题，函数没定义，这时候可以截图反馈给客服或技术人员。

再比如自己写了个简单的网页，在浏览器里运行后不确定某个变量有没有正确赋值，直接在控制台输入 console.log(用户名) 就能马上看到结果，不用反复 alert 弹窗打扰体验。

清除输出和过滤信息

时间一长，控制台可能堆满内容，看不清重点。可以点击左上角的清屏按钮，或者输入 clear() 来一键清空。另外，控制台支持按 log、warn、error 分类筛选，勾选对应选项就能只看某类信息，排查问题更高效。

有时候网站为了防止别人轻易查看逻辑，会屏蔽控制台输出，但普通用户一般不会碰到这种情况。正常使用下，控制台始终是你了解网页“内心活动”的窗口。