前端真机测试

移动端真机测试

由于 webview 不一定支持连接 chrome 控制台调试,只有真机测试才能复现真实场景。

browserstack dynatrace 都是真机测试平台,公司内部应该也会搭建这种平台。

移动端控制台

  • Chrome 远程调试 app 支持后,连接 usb 或者局域网,即可通过 Dev Tools 调试 webview 页面。
  • Weinre 通过页面加载脚本,与 pc 端调试器通信。
  • 通过内嵌控制台解决,比如 eruda VConsole
  • Rosin fiddler 的一个插件,协助移动页面调试。
  • jsconsole 在本地部署后,手机访问对应 ip,可以测试对应浏览器的控制台。

请求代理

charles Fiddler 可以抓包,更重要是可以代理请求。假数据、边界值测试、开发环境代码加载,每一项都非常有用。

定制 Chrome 拓展

对于特定业务场景也可以通过开发 chrome 插件来做,比如分析自己网站的结构、版本、代码开发责任人、一键切换开发环境。

在用户设备调试

把控制台输出信息打到服务器,本地通过与服务器建立 socket 链接实时查看控制台信息。要知道实时根据用户 id 开启调试信息,并看用户真是环境的控制台打印信息是非常有用的,能解决很多难以复现问题。

代码中可以使用封装过的 console.log,当服务端开启调试状态后,对应用户网页会源源不断打出 log。

DOM 断点、事件断点

  • DOM 断点,在 dom 元素右键,选择 (Break on subtree modifications),可以在此 dom 被修改时触发断点,在不确定 dom 被哪段 js 脚本修改时可能有用。
  • Event Listener Breakpoints,神器之一,对于任何事件都能进入断点,比如 click,touch,script 事件统统能监听。

使用错误追踪平台

对错误信息采集、分析、报警是很必要的,这里有一些对外服务:sentry trackjs

黑盒调试

SourceMap 可以精准定位到代码,但有时候报错是由某处代码统一抛出的,比如 invariant 让人又爱又恨的库,所有定位全部跑到这个库里了(要你有何用),这时候,可以在 DevTools 源码中右键,选中 BlackBox Script,它就变成黑盒了,下次 log 的定位将会是准确的。

FireFoxChrome

删除无用的 css

Css 不像 Js 一样方便分析规则是否存在冗余,Chrome 帮我们做了这件事:CSS Tracker

在 Chrome 快速查找元素

Chrome 会记录最后插入的 5 个元素,分别以 $0 ~ $4 的方式在控制台直接输出。

Console.table

以表格形式打印,对于对象数组尤为合适。

监听特定函数调用

monitor 有点像 proxy,用 monitor 包裹住的 function,在其调用后,会在控制台输出其调用信息。

> function func(num){}
> monitor(func)
> func(3)
// < function func called with arguments: 3

模拟发送请求利器 PostMan

PostMan, FireFox 控制台 Network 也支持此功能。

找到控制台最后一个对象

有了 $_,我们就不需要定义新的对象来打印值了,比如:

> [1, 2, 3, 4]
< [1, 2, 3, 4]
> $_.length
// < 4

更多控制台相关技巧可以查看

前端

有用 (0)

评论加载中...