前端调试手段总结

PC浏览器中调试

这个没什么说的,各大浏览器都内置了调试了工具,作为一个前端不会的话,自行面壁吧。

移动浏览器中调试

  • android
    可以直接使用usb+chrome://inspect/#devices调试,也可以使用和微信浏览器一样的操作
  • ios
    和微信浏览器中一样操作调试,
    也可以使用safari调试。

微信浏览器中调试

  • 微信中访问的肯定都是http URL,所以可以直接使用spy-debugger
    也可以使用vconsole或者eruda,可以根据URL的参数决定
    是否显示调试器
;(function () {
    var src = 'node_modules/eruda/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
  • 还可以使用 微信开发工具进行调试,这对于调试微信sdk很方便,可以看到对接sdk时发生的错误。

APP webview中调试

  • android
    可以使用usb线,然后使用chrome://inspect/#devices 进行调试

  • ios
    1,webview 若是访问http URL的话,则可以使用spy-debugger进行调试
    2,webview 中若是访问的离线包(file协议),则不能使用spy-debugger,因为spy-debugger的原理是拦截所有html页面请求,然后将请求再返回设备,在spy-debugger上面调试,spy-debugger会直接将操作给推送到设备,所以设备可以随着一起改变。但是file协议根本没有网络请求,spy-debugger所做的代理根本不能起作用。此时可以使用vconsole
    3,若APP包是debug包的话,也可以使用safari调试,因为正式包的话是不允许调试的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容