chrome浏览器调试H5页面

可能是我少见多怪,看到前端同学用chromel来查看给APP端适配的H5效果,感觉竟然可以这样。之前只是通过开发者模式来看一下请求入参和返回,突然感觉get一个新技能。

一首先如何在浏览器APP上H5的效果
这个其实打开开发者模式,注意最左边有一个两个矩形大小不同叠加的符号,他的大名叫做toggle device toolbar
chrome浏览器调试H5页面
点击之后的效果,注意最上面是可以调整适配机型(跟小程序的工具一样)
chrome浏览器调试H5页面
二 点击查看样式div
这个应该都知道,后端基本也应该知道,毕竟很多管理系统页面不是前后端分离,或者没有专业的前端基本要后端自己来。

也是下面那一栏里面的,element和小箭头。element这个栏里面基本都是关于样式页面组成这些,小箭头就是点一下以后,指哪看哪,查看你想要看的地方的央视和构成。
chrome浏览器调试H5页面
三查看加载的资源数据以及缓存(包括storage,cookie,session等)
之前用过小程序的开发工具,没用过chrome来看过这些数据,其实我感觉和小程序的差不太多。也是application面板
入下
chrome浏览器调试H5页面
这里由于我最近做的需求涉及到登陆状态,这里真的是为我打开了一个新的世界。