做演示的时候，页面出点小问题再正常不过了。比如按钮点了没反应，或者文字没按预期显示。这时候很多人第一反应是翻代码、重启编辑器，其实有个更快的办法——打开浏览器控制台，一眼就能看到错在哪儿。
浏览器控制台在哪？三步打开
以最常用的 Chrome 浏览器为例，右键点击网页任意位置，选择“检查”或者“检查元素”，底部或右侧就会弹出开发者工具面板，顶部有“Console”这个标签，点一下就是控制台了。
如果你不想用鼠标，也可以直接按快捷键：Ctrl + Shift + J（Windows）或者 Cmd + Option + J（Mac），页面直接就呼出控制台了。
控制台能干啥？简单举个例
假设你在做一个互动演示，加了一段 JavaScript 让标题变色：
<script>
document.getElementById('title').style.color = 'red';
</script>结果刷新页面，颜色没变，还是一片黑字。这时打开控制台，很可能看到一行红字："Uncaught TypeError: Cannot read property 'style' of null"。这说明它找不到 id 为 title 的元素，可能是你写错了 ID，或者脚本执行时 DOM 还没加载完。
其他浏览器也一样方便
Firefox 打开方式差不多，右键“检查元素”，然后切到 Console 标签。Edge 完全和 Chrome 一致，毕竟都是 Chromium 内核。Safari 稍微麻烦点，得先在偏好设置里开启“开发菜单”，之后就能通过“开发 → 显示 JavaScript 控制台”打开了。
平时做网页类演示，免不了临时改点代码、测试效果。控制台就像你的实时调试助手，不用来回保存刷新，直接在里面敲几行 JS 就能看到变化。比如想试试把背景换成蓝色，直接输入：
document.body.style.backgroundColor = "blue";回车一敲，立马见效。这种即时反馈，对调整演示细节特别有用。
别被“开发者工具”这几个字吓住，控制台不是程序员专属。只要你会上网，会点右键，就能用它查问题、试效果，效率提升不止一点半点。