前端工程师是个背锅的存在
- 怎么没数据了？---> 找前端
- 页面怎么又点不动了?——>找前端
- 不同的机型（IOS/ANDRIA）页面展示效果不一样，还是找前端
前端是最接近用户的工种，尤其是Hybrid App涉及到三方协作，任何一方出了问题，第一个找的就是前端。这些问题中有些并不是前端错误引起的BUG，如何定位问题出在哪一方呢？
调试工具——chrome开发者工具
我们先来看看前端工程师必备法宝——chrome开发者工具，按F12打开：
面板介绍
Elements（元素面板）
- 查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈，主要用于DOM和CSS调试。
- 在使用react或vue等生成DOM结构时，可在该面板查看DOM结构是否生成成功。
- 移动端遇到兼容性问题时，也可以通过该面板查看DOM结果是否有渲染。
Console（控制台面板）
- 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources(源代码面板)
- 断点调试Javascript
NetWork(网络面板)
- 从发起网页页面请求Request后，分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
- 是与后端联调时重点要查看的面板。
Performance
- 资源录制，常用于性能调试
Memory:
Application(资源面板)
- 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security(安全面板)
- 判断当前网页是否安全。
Audits:
- 对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
在联调时Network，Console，Application面板用得最多。
与后端或APP联调时如何定位问题