Shulou(Shulou.com)06/01 Report--

This article is about how to use AlloyLever, a mobile web development and debugging tool. I think it is very practical, so I share it with you. I hope you can get something after reading this article.

Brief introduction

There are several very frequent rigid requirements for web debugging: watch log, watch error, and watch AJAX send and return packets. Others such as timeline and cookie and localstorage are less frequent, but AlloyLever supports them.

Features

Click the alloylever button to switch between showing or hiding the tool panel

Console will output all user-printed logs such as console. [log/error/info/debug/debug]

Console will output all error messages (script errors and network request errors)

The XHR panel outputs all (XMLHttpRequest) AJAX requests and data returned by the server

The Resouces panel will output all Cookie information and LocalStorage

The TimeLime panel outputs the time spent in the lifecycle related to the page.

Install

It can be installed through npm:

Npm install alloylever usage

All you need to do is quote a js on your page!

It is important to note, however, that the js must be referenced before other scripts. As to why, look at the following principle.

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

Overrides the console method and saves the real method under window for execution and injects its own events.

AJAX intercepts 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)

) {console.error (xhr.responseURL +'+ xhr.status+' ('+ xhr.statusText+')')} else {window.setTimeout (function () {checkSuccess (xhr);}, 0);}}

As shown above, the XMLHttpRequest object is overridden. The objects of the user new are all overridden, and what is returned is real. In this way, you can get instances of all user-created XMLHttpRequest objects to listen.

Error interception

Error consists of two parts. The first part is the error reported by js, which is intercepted in the following ways:

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

Console has been rewritten when it is executed here. So your own console panel can also see errors.

The second part is the error of the resource loading failure report, get all the js/css/img by traversing the HTML dom node, and then send the request again. Js and css send requests through XMLHttpRequest to monitor the status. Img listens to onerror through new Image ().

Timeline gets all the information through timing.js, and timing.js is based on the class library encapsulated by window.performance. Cookie and localStorage are obtained through js traversal.

The above is how to use the mobile web development and debugging tool AlloyLever. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.