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

This article mainly introduces "how to use web mobile debugging artifact Eruda". In daily operation, I believe many people have doubts about how to use web mobile debugging artifact Eruda. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use web mobile debugging artifact Eruda". Next, please follow the editor to study!

In the Web development process, the html page development and debugging will use the browser debugging tools, editor I most commonly used is the Chrome browser comes with the developer tools, can be very convenient for JS code breakpoint debugging, log is also very convenient. But it's not so convenient to develop on mobile browsers, whether it's iOS's Safari or Android's many browsers. Here the editor recommends a mobile debugging artifact Eruda.

Eruda is a debug panel designed for the front end of mobile web pages, similar to the mini version of DevTools. Its main functions include: capturing console logs, checking element status, displaying performance indicators, capturing XHR requests, displaying local storage and Cookie information, browser feature detection, and so on.

Github address of Eruda: https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

Nonsense, let's go straight to the code to introduce the use of Eruda. There are two ways to use Eruda.

1) use CDN to:

Introduce the JS file of Eruda directly into the html page

Eruda.init ()

2) install via npm:

Npm install eruda-save

Load the script on the page:

Eruda.init ()

I usually use the first way (lazy, hehe). After initializing Eruda, a translucent gear button appears on the html interface. One click will pop up the Eruda panel, and then click to put it away, as shown in the following image.

Using the initialization method init () without any parameters directly loads all the panels provided by Eruda, and if only some panels are needed, you need to take the configuration parameters in init (). Here's a look at which panels are provided by Eruda.

Console panel: capture Console logs, support log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; support placeholders, including% c custom style output; support filtering by log type and regular expression; support shortcut commands to load underscore, jQuery libraries; support JavaScript script execution.

Elements panel: view tag content and attributes; view styles applied to Dom; support page element highlighting; support screen click selection; view all kinds of events bound on Dom.

Network panel: chart shows page loading speed; view page resource request time (Android); capture XHR request, view sent data, return, return content and other information.

Resources panel: view and clear localStorage, sessionStorage and cookie; view page load scripts and style files; view page load pictures.

Sources panel: view the page source code; format html,css,js code and json data.

Info panel: output URL and User Agent; support custom output content.

Snippets panel: add borders to page elements; refresh pages with timestamps; support custom code snippets.

Features panel: browser common features detection; provides quick access to Can I use,Html5Test.

The code for the configuration panel is as follows:

Eruda.init ({tool: ['console',' elements']})

Just add the corresponding panel name to the tool array.

At this point, the study on "how to debug the artifact Eruda on web mobile end" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.