你有没有遇到过这种情况：在浏览网页时，发现某个按钮点不动，图片加载不出来，或者页面排版乱了？其实，用浏览器自带的F12调试功能，这些问题自己就能查个七七八八。
怎么打开F12调试模式？
操作特别简单。在任何网页上，直接按键盘上的 F12 键，或者右键点击页面元素，选择“检查”或“检查元素”，就能打开开发者工具。主流浏览器比如 Chrome、Edge、Firefox 都支持这个操作。
认识开发者工具的几个常用面板
打开后你会看到一排标签，最常用的是这四个：
Elements（元素）：这里能看到网页的HTML结构。你可以把鼠标移到某个元素上，页面上对应的部分会高亮显示。想看看某段文字是怎么写的，或者哪个图片没加载出来，来这里翻一翻就知道了。
比如你发现一段文字颜色太淡看不清，可以在 Elements 面板里找到它，右边的 Styles 面板会显示当前样式。试着把 color 值改一改，页面上的文字颜色立刻跟着变，改着改着就明白是哪里的问题了。
Console（控制台）：这里是JavaScript的“消息中心”。网页运行出错，比如脚本报错，通常会在这里冒红字。如果你点了按钮没反应，可以来这里看看有没有报错信息。
你也可以手动输入代码测试。比如想试试能不能弹个提示框，就在 Console 里敲：
alert('Hello 测试');回车一按，提示框就出来了。是不是有点像在和网页对话？
Network（网络）：这个面板能告诉你网页加载了哪些资源。按一下 F5 刷新页面，Network 里就会列出所有请求：HTML、CSS、JS、图片、接口数据等等。
如果某个图片死活出不来，可以在这里找找看，是不是状态码是404？或者某个API请求花了好几秒，那可能就是它拖慢了整个页面。
点开任意一条请求，还能看到请求头、响应头、返回的数据内容，对排查问题特别有帮助。
Sources（源码）：这里存放网页的所有源文件。如果你想看某个JS文件具体写了什么，或者设个断点一步步调试，就来这儿。
比如你怀疑某个函数执行错了，可以在 Sources 里找到对应的JS文件，点行号设个断点。下次函数运行到这里就会暂停，你可以看看变量当前的值是什么，一步步往下走，就像侦探查案一样。
一个小实战：修改网页标题
来动手试试。打开一个网页，按 F12，切换到 Elements 面板，找到 <title> 标签，双击里面的文字，改成“我学会调试了！”。你会发现浏览器上方的标签页标题也跟着变了。
当然，这只是本地改，刷新就回来了。但这个过程让你明白：网页不是铁板一块，它是可以“动”的。
移动端调试也能用
现在很多网站是响应式设计。在开发者工具里点一下左上角的手机图标，页面就变成手机视图了，你可以模拟不同型号的手机查看效果。
配合 Network 面板的限速功能，还能测试在弱网环境下页面表现如何。这对做前端开发或者写博客的人来说，特别实用。
F12调试模式不是程序员专属。哪怕你只是普通用户，学会基本操作，也能更快定位问题，甚至能帮同事朋友查个网页故障，显得又专业又靠谱。