打开调试工具的几种方式
平时写网页或者改样式，最怕页面出问题却不知道哪儿错了。其实浏览器自带的调试工具就能帮你快速定位问题。在 Chrome、Edge 或者 Firefox 里，按 F12 或者右键点击页面选择“检查”就能打开开发者工具。
你也可以用快捷键：Ctrl+Shift+I（Windows）或 Cmd+Option+I（Mac），直接唤出面板。习惯之后，比鼠标点快多了。
Elements 面板：实时查看和修改 HTML 和 CSS
打开工具后，默认进的是 Elements 标签页。左边是页面的 HTML 结构，右边是对应的 CSS 样式。你可以直接点中某个元素，比如一个按钮，马上看到它用了哪些类名、设置了什么边距、颜色。
更实用的是，可以直接双击标签内容或属性进行修改。比如你觉得某个文字太大，点中它，在右边把 font-size 从 18px 改成 14px，页面立刻刷新效果。改完觉得没问题，再回到代码里正式更新，省得反复保存刷新。
模拟手机浏览
点工具栏左上角那个手机图标，页面就变成手机视图了。可以选 iPhone、Pixel 等设备，看看响应式效果对不对。有时候电脑上看得好好的，一到手机上布局就乱，用这个功能当场调样式，效率高很多。
Console：不只是打印 log
很多人只知道 console.log()，其实 Console 还能执行 JS 代码。比如你想知道当前页面有没有引入 jQuery，直接输入 $ 或 jQuery 回车，如果有就会返回函数定义，没有就显示 undefined。
遇到报错时，Console 会红字提示哪一行出了问题。点那个文件链接，还能跳转到 Sources 面板断点调试。
Sources 面板：打断点查逻辑错误
如果你写的 JavaScript 没有按预期运行，比如某个 if 条件没进进去，可以在 Sources 里找到对应 JS 文件，点行号设断点。刷新页面，代码执行到那一行会暂停，这时候可以看变量值、一步步往下走。
举个例子，有段循环处理数据的代码：
for (let i = 0; i < list.length; i++) {
console.log(list[i]);
}你在 console.log 这行加断点，每跑一次循环都会停一下，方便观察 list[i] 到底有没有数据。
Network 面板：查接口请求情况
做前后端联调时，经常遇到“我明明点了提交，为啥没反应？”这时候切到 Network 标签页，点一下提交按钮，看是不是发出了请求。
如果没发出去，可能是 JS 阻住了；如果发了但状态是 404 或 500，那就是接口问题。还可以看请求头、参数、返回数据，不用靠后端截图猜结果。
过滤器也实用，点 XHR 只看接口请求，点 Img 能看图片加载慢不慢，对优化页面加载很有帮助。
修改完样式怎么保存？
调试工具里的修改不会自动存到源文件。Chrome 支持 Workspaces，可以把网站目录映射到本地，改完直接保存。不过更常见的做法是：调好之后，手动把改过的样式复制回自己的 CSS 文件。
建议一边调一边记，别全靠回忆。特别是项目大了以后，容易忘掉刚才改了啥。
小技巧：快速选中元素
不想在 Elements 树里翻来翻去找某个 div？用左上角的箭头图标，鼠标移到页面上，随便点哪个元素，它在 HTML 结构里就会自动高亮。特别适合找嵌套深的标签。
配合 Ctrl+F（Cmd+F）还能在 DOM 树里搜索 class 名或文本内容，一秒定位目标。