打开ref="/tag/156/" style="color:#479099;font-weight:bold;">开发者工具的几种方式
在日常浏览网页时，突然发现某个页面加载异常，按钮点不动，图片出不来。这时候最直接的办法就是打开 Chrome 的开发者工具看看情况。按 F12 或者 Ctrl+Shift+I（Mac 用户是 Cmd+Option+I）就能呼出面板，也可以右键页面任意位置，选择“检查”。
常用面板功能介绍
打开开发者工具后，默认进入的是“Elements”标签页，这里可以看到当前页面的 HTML 结构。点击任意元素，右侧会显示对应的 CSS 样式，修改后能实时预览效果，特别适合调样式的时候用。
如果页面报错，直接切到“Console”面板。JavaScript 执行错误、网络请求失败的日志都会集中在这里。比如你写了个函数但变量名拼错了，console 里就会红字提示 “ReferenceError: xxx is not defined”。
“Network” 面板用来监控所有网络请求。刷新页面后，能看到每个资源的加载时间、状态码、大小。如果某张图一直转圈，查这里一眼就知道是不是 404 或者服务器响应太慢。
开启设备模拟模式
做移动端适配时，经常需要看手机上的显示效果。点左上角那个手机图标，或者按 Ctrl+Shift+M，页面就变成手机视图了。可以选 iPhone、Pixel 等常见机型，也能自定义分辨率。
设置断点调试 JavaScript
在“Sources”面板里能找到页面加载的所有脚本文件。打开一个 .js 文件，点击行号可以设断点。当代码执行到这里会暂停，方便查看当前作用域的变量值，一步步跟踪逻辑。
比如你有个表单提交函数，总是在某一步跳过验证，就可以在关键判断处加断点，看条件到底有没有满足。
修改本地文件映射（Overrides）
有时候想临时改几行 JS 或 CSS 来测试修复方案，但改完刷新就没了。这时可以用 Overrides 功能把远程文件保存到本地，以后每次加载都会用你改过的版本。
先在 Sources 左侧找到 “Overrides” 标签，点击 “+” 添加一个本地文件夹授权。然后随便打开一个资源文件，右键选择 “Save for overrides”，之后的修改就能持久保留。
清除缓存与硬性刷新
开发过程中常遇到明明改了代码却看不到效果，大概率是浏览器缓存作怪。按住 Ctrl+F5 或者在 Network 面板勾选 “Disable cache” 能强制刷新，确保加载最新资源。
也可以在地址栏右键清空缓存和 Cookie，避免旧数据干扰调试。
实用小技巧
在 Console 里输入 $0 可以快速获取当前在 Elements 面板选中的 DOM 元素。比如你在 Elements 里点中了一个 div，切换到 Console 输入 $0.style.color = 'red'，文字立马变红。
想测接口请求？直接在 Network 面板右键某个请求，选择 “Copy as cURL”，然后粘贴到命令行或 Postman 里复现，排查后端问题很方便。
配置个性化开发环境
进 Settings（F1 设置图标），可以调整主题为暗色，减少夜间调试的眼睛疲劳。还能启用“自动展开控制台日志”、“显示行号”等功能，按个人习惯定制。
快捷键也能自定义，比如把“切换开发者工具”改成自己顺手的组合键。
这些设置好了，下次打开还是原来的样子，不用重复操作。