开发调试的几个小技巧
- 过滤请求
控制面板 => Network => filter图标 => is:running => 刷新监控的页面
is:running ===> 还在请求中的接口 pending
- 滚动元素到视图
控制面板 => Elements => 右击选中的DOM节点 => Scroll into view
- 预设设备 -------- 可以自定义任何自己需要的设备(在开发移动端时非常好用)
控制面板 => setting图标 => Devices => Add custom device...
调试设备时,即可选择预设设备进行预览~
- 预设网络状况 --------- 可以模拟不同网络下面的产品表现情况,以检查对产品的优化是否符合预期
控制面板 => setting图标 => Throttling => Add custom profile...
- 捕获全屏快照
控制面板 => command + shift + p => capture full size screenshot
- 捕获局部快照
控制面板 => 审查元素 => command + shift + p => capture node screenshot
- 快速清空站点缓存
控制面板 => ctrl+shift+p => clear site data
有时候开发调试,我们需要清空缓存信息。与其手动一个个信息清空,还不如一步到位,直接清空这个站点的信息