开发调试的几个小技巧

  • 过滤请求

控制面板 => 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

有时候开发调试,我们需要清空缓存信息。与其手动一个个信息清空,还不如一步到位,直接清空这个站点的信息

原文地址:https://www.cnblogs.com/zppsakura/p/13790068.html