与后端或APP联调时如何定位问题1--chrome开发者工具简介

前端工程师是个背锅的存在

  • 怎么没数据了?---> 找前端
  • 页面怎么又点不动了?——>找前端
  • 不同的机型(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联调时如何定位问题

与后端或APP联调时如何定位问题1--chrome开发者工具简介

与后端或APP联调时如何定位问题2——与后端联调接口

与后端或APP联调时如何定位问题3——移动端对接

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值