大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关移动web开发调试工具AlloyLever怎么用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联专注于企业成都全网营销推广、网站重做改版、鄂伦春网站定制设计、自适应品牌网站建设、H5网站设计、商城开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为鄂伦春等各大城市提供网站开发制作服务。
web调试有几个非常频繁的刚需:看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁,但是AlloyLever都支持。
点击alloylever按钮之间切换显示或隐藏工具面板
Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]
Console会输出所有的错误信息(脚本错误和网络请求错误)
XHR面板会输出所有(XMLHttpRequest)AJAX请求和服务器端返回的数据
Resouces面板会输出所有的Cookie信息和LocalStorage
TimeLime面板会输出页面相关的生命周期里的时间段耗时情况
可以通过npm安装:
npm install alloylever
你的页面只需要引用一个js即可!
但是需要注意的是,该js必须引用在其他脚本之前。至于为什么,看下面的原理。
window.console = { wc: window.console};var self = this;['log', 'error', 'warn', 'debug', 'info'].forEach(function (item) { console[item] = function (msg) { this.wc[item](msg); self.log(msg, item); }});
重写了console方法,并且保存下window下真正的方法进行执行,并且注入自己的事件。
var XHR = window.XMLHttpRequest;window.XMLHttpRequest=function(){ var xhr = new XHR(); checkSuccess(xhr); return xhr;};window.XMLHttpRequest.realXHR = XHR;var self=this;function checkSuccess(xhr) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { self.option.xhrs.push({url:xhr.responseURL, json:JSON.stringify(JSON.parse( xhr.responseText), null, "\t")}) }else if(xhr.status>=400) { console.error(xhr.responseURL +' '+xhr.status+' ('+xhr.statusText+')') } else{ window.setTimeout(function () { checkSuccess(xhr); }, 0); }}
如上面所示,重写了XMLHttpRequest对象。用户new的对象全部为重写后的,返回的是真正的。这样就可以拿到所有用户创建的XMLHttpRequest对象的实例进行监听。
其中error包含两部分,第一部分是js报的错误,通过下面的方式截获:
window.onerror = function (errorMsg, url, lineNumber, column, errorObj) { console.error('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber + ' Column: ' + column + ' StackTrace: ' + errorObj);}
这里执行的时候console已经被重写了。所以自己的console面板也能看到错误。
第二部分是资源加载失败报的错,通过遍历HTML dom节点拿到所有的 js/css/img,然后再次发送请求。js和css通过XMLHttpRequest发请求,监听状态。,img通过new Image(),监听onerror。
Timeline通过timing.js获得所有信息,timing.js基于window.performance封装的类库。Cookie和localStorage通过js遍历得到。
以上就是移动web开发调试工具AlloyLever怎么用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。