Chrome DevTools 调试技巧入门

2013 年前端开发已经越来越离不开浏览器开发者工具了。页面一出问题，如果不会用 DevTools，很多排查只能靠猜。

最有价值的几个入口

当时最常用的其实就这些：

• Elements 看 DOM 和样式
• Console 看错误和日志
• Network 看请求

这些能力组合起来，已经足够解决大部分页面问题。

一个很实用的排查顺序

如果页面出了问题，我更建议按下面这个顺序看：

1. 先开 Console，看有没有明显报错
2. 再看 Elements，确认 DOM 和 class 是否符合预期
3. 最后看 Network，排查接口和静态资源有没有失败

这个顺序的好处是，不容易一开始就陷入细枝末节。很多问题其实在第一屏错误信息里就已经给出了方向。

调试工具真正改变了什么

在没有 DevTools 意识之前，很多前端问题只能靠反复改代码试。开发者工具让排查开始变得更可视化，也让“猜问题”逐渐变成“定位问题”。

小结

Chrome DevTools 在 2013 年对前端开发者最大的帮助，就是把“猜问题”变成“能看见问题”。这类工具意识从那时开始变得越来越重要。