前端调试手段总结

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('');
    document.write('eruda.init();');
})();
  • 还可以使用 微信开发工具进行调试,这对于调试微信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调试,因为正式包的话是不允许调试的

你可能感兴趣的:(前端调试手段总结)