本篇文章給大家分享的是有關(guān)移動(dòng)web開(kāi)發(fā)調(diào)試工具AlloyLever怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、鄂倫春網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鄂倫春等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

簡(jiǎn)介

web調(diào)試有幾個(gè)非常頻繁的剛需：看log、看error、看AJAX發(fā)包與回包。其他的如timeline和cookie以及l(fā)ocalstorage就不是那么頻繁，但是AlloyLever都支持。

特征

• 點(diǎn)擊alloylever按鈕之間切換顯示或隱藏工具面板

• Console會(huì)輸出所有用戶打印的日志如console.[log/error/info/debug/debug]

• Console會(huì)輸出所有的錯(cuò)誤信息(腳本錯(cuò)誤和網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤)

• XHR面板會(huì)輸出所有（XMLHttpRequest）AJAX請(qǐng)求和

  但是需要注意的是，該js必須引用在其他腳本之前。至于為什么，看下面的原理。

  Console截獲

  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);
      }});

  重寫(xiě)了console方法，并且保存下window下真正的方法進(jìn)行執(zhí)行，并且注入自己的事件。

  AJAX截獲

  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);
      }}

  如上面所示，重寫(xiě)了XMLHttpRequest對(duì)象。用戶new的對(duì)象全部為重寫(xiě)后的，返回的是真正的。這樣就可以拿到所有用戶創(chuàng)建的XMLHttpRequest對(duì)象的實(shí)例進(jìn)行監(jiān)聽(tīng)。

  Error截獲

  其中error包含兩部分，第一部分是js報(bào)的錯(cuò)誤，通過(guò)下面的方式截獲：

  window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
      console.error('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber        + ' Column: ' + column + ' StackTrace: ' + errorObj);}

  這里執(zhí)行的時(shí)候console已經(jīng)被重寫(xiě)了。所以自己的console面板也能看到錯(cuò)誤。

  第二部分是資源加載失敗報(bào)的錯(cuò)，通過(guò)遍歷HTML dom節(jié)點(diǎn)拿到所有的 js/css/img，然后再次發(fā)送請(qǐng)求。js和css通過(guò)XMLHttpRequest發(fā)請(qǐng)求，監(jiān)聽(tīng)狀態(tài)。，img通過(guò)new Image(),監(jiān)聽(tīng)onerror。

  Timeline通過(guò)timing.js獲得所有信息，timing.js基于window.performance封裝的類庫(kù)。Cookie和localStorage通過(guò)js遍歷得到。

  以上就是移動(dòng)web開(kāi)發(fā)調(diào)試工具AlloyLever怎么用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

  
  本文題目：移動(dòng)web開(kāi)發(fā)調(diào)試工具AlloyLever怎么用
  文章位置：http://weahome.cn/article/jogshj.html