The introduction

No one can claim that their code is completely bug free. If there are problems, there are debugging tools. You may be familiar with fiddler, Charles, Chrome DevTools, Firebug, Safari remote debugging, etc. Some of them I probably haven’t even used;

Here spray 1, who don’t give me IE ah, IE that is not called debugging tool, that is called pit dad artifact, words are not recently cast the pot, the old revolutionary base of their own.

As the saying goes: “good things in advance must first sharpen its tools”, today I want to share with you is a small tool that may be ignored by people, why is it ignored by people? It’s only 4.6K Star, 457 Fork, and 173 times on Github, which means the number of people who know it is probably not more than 5W out of tens of millions of developers. Therefore, I decided to share a wave. This article focuses on guidance, hoping to bring a little convenience and efficiency to everyone’s development.

This is IT square head brother alliance, I am the chief pit filling officer – Su Nan, share with your heart to do the temperature of the siege lion.

What is Eruda?

What is Eruda? Eruda is a debug panel designed for the mobile front end. It’s like a mini version of Chrome DevTools (not as powerful as Chrome, that’s for sure). Capture console logs, check element state, display performance metrics, capture XHR requests, display local storage and Cookie information, browser feature detection, and more.

Although the daily mobile terminal development is generally in Chrome DevTools browser mobile terminal mode simulation of various mobile phone models for development and debugging, to ensure that the function/page display and other problems, will submit the test;

Front is talked about, but only simulation, simulation, the current mobile phone brand is innumerable, various classes in the cell phone browser, even APP has its own different characteristics Between the waist dish outstanding, some are particularly prominent, sick we have to give it a cure, or testing, products, demand, can’t let us leadership, such as below.

How to use it?

  • It supports NPM mode, isn’t that nice?
  • External chain, yes, is the form of external chain introduction, for it, I think the WAY of NPM does not have much significance, direct introduction of external chain is more convenient, can also reduce the size of the project resource package, it is easier to control whether to load this resource.
A way, the default introduction: < script SRC = "/ / cdn.jsdelivr.net/npm/eruda" > < / script > < script > eruda. The init (); < / script > way two, dynamic loading: __DEBUG__ && loadJS (' http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js' () = > {eruda. The init (); }); // Su Nan's column exchange: 912594095, public number: honeyBadger8 // We like to add a click event to an obscure element, and click it 10 or 8 times before opening debug mode; ; (function () {var SRC = 'http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js'; if (! /eruda=true/.test(window.location) && localStorage.getItem('active-eruda') ! = 'true') return; document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>'); document.write('<scr' + 'ipt>eruda.init(); </scr' + 'ipt>'); }) (); NPM install eruda --save... There are many ways to loadCopy the code

Small and beautiful

  • Here small, does not mean that its bag is small ah, the students who know it know, in fact, its bag is not small (About 100 KB gzip);
  • 100KB is not small, with the words to describe the girl is: plump, directly say it fat, you will die;
  • By small and beautiful, I mean small and powerful, with a beautiful interface;
  • With that said, let’s see what it looks like:

Feature list

console

  • The function of console is obvious;
  • Early in theconsoleBefore its birth, our debugging function is too much alert, including the current mobile terminal, on the mobile phone we want to see parameter values, data, nodes, etcalertPrint as many, but too rough, and accidentally can be carried on the line;
  • Eruda can help us solve this problem; All logs and errors can be captured for us
  • We can even look likechromeExecute JS code directly on the console;

Elements

  • Eruda is not as intuitive as it is on PC, but due to the limitations of the way it is displayed on mobile,
  • It can list all the children of each parent node. When you click on a child node, it lists all the attributes, styles, box models, and so on of the current node.
  • View label content and attributes. Look at the styles on the Dom; Support for page element highlighting; Support screen directly click to select; View the various events bound to the Dom.
  • It can even be usedPluginsPlug-in, do the same as PC, dom tree formation;

Network

  • Now most of the projects are shared in the form of the front and back end, front-end processing more and more business, a variety of requests for resources;
  • The more you dry, the more responsibility you take on, the more pot you have, the bigger and flatter it is
  • Therefore, the necessity of Network is self-evident. It can capture requests and view information such as sent data, returned headers and returned contents. It is of great help for locating problems in front and back end joint investigation, such as: The back end says that you are requesting less parameters, and the front end says that there is no problem with the code logic after you have looked at it, but it cannot be adjusted on the mobile phone. The Network can see what you are requesting directly and clearly.

Resources

  • It’s the same as Chrome DevtoolsApplication + Source, a combination of the two;
  • Resources Can view cookies, localStorage, sessionStorage, etc., and also perform cleanup operations (Application).
  • It also looks at the current page-loading scripts and style files; View images loaded on the page and other resources (Source);
  • Well, it feels like I can’t say more than this:

Sources/Info

  • Sources: view the page source; Format HTML, CSS, JS code and JSON data.
  • Info: displays URL information and User Agent. And some other mobile system information, but also support custom output content oh.

Advanced usage

  • The above just introduced some of its basic functions, but also my own work with more;
  • Recently found that the new version of the function is much more powerful, has been used before1.0.5, there seems to be no plug-in item;
  • I had a quick look at them. They’re pretty powerful, including the ones aboveDom treeThe plugins part is not actually used, so it’s notMake a fat faceIf you are interested, you can have a look.
  • If you feel that the existing plug-ins are not enough for your needs, it also allows you to write your own custom plug-ins.

The end:

The above is today to bring you to share, work with a long time, very convenient, for the positioning of mobile terminal problems, and even left a rear door positioning online problems are very helpful, such as the understanding of the article is not in place, welcome to leave a message pointed out.

For online problems, we generally like to add a click event to an obscure element and click it ten or eight times before opening the debug mode.

The above qr code is a real official Demo, don’t worry about the routine, there is also a link: eruda.liriliri.io/

Making address: github.com/liriliri/er…

Author: Su Nan – Chief Pit filling officer

Link: blog.csdn.net/weixin_4325…

Communication group: 912594095[Resource Acquisition/Communication Group], public id: honeyBadger8

This article is original, all copyright belongs to the author. Commercial reprint please contact IT flathead brother alliance to obtain authorization, non-commercial reprint please indicate the original link and source.