Tips for using Erdua, a mobile web debugging tool

One of the biggest pain points in mobile web development is that you cannot view console.log logs and other information such as network requests and local storage when running on a real machine. If the webpage is running in a mobile browser, it is not bad. You can open the URL on a computer to view the console information. However, if you are developing an embedded H5 page for an APP, you can only rely on the browser simulation environment to avoid bugs during the development phase. However, once the H5 is launched, it will be more troublesome to report an error. Moreover, it is even more difficult to find problems for webpages that rely on the APP environment to run. Wouldn't it be nice if mobile terminals also had tools similar to Chrome DevTools?

[[206554]]

vConsole is such a great mobile DevTools tool, produced by the big company Penguin. But this article positions it as the second male lead, and today's protagonist is: Erdua! The same kind of vConsole. If you don't know how to debug web pages on mobile terminals, then this article will be very helpful to you. If you are a vConsole user, then you can also try Erdua. If you are a hardcore mobile web development player, then you can choose to ignore this article in a low-key manner.

Who is Erdua?

Hello everyone, let me introduce to you, this is my... Eruda is a debugging panel designed for mobile web front-ends, similar to a 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, etc.

The GitHub address is: https://github.com/liriliri/eruda, Erdua has great looks and skills:

Tips

This is the focus of this article.

The basic usage of Erdua is recommended to use CDN and configurable parameters. Introduce the following code on the page:

 ;( function (){
    var src = '//cdn.bootcss.com/eruda/1.2.4/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>' );
 })();

eruda.init(); You can pass in which panels to initialize, and all are loaded by default.

There is nothing wrong with this usage, but if Erdua is to be released online, then we should delete this code? Because in this way, Erdua will be loaded immediately regardless of whether you need to debug it or not, and the Erdua icon will appear on the page. My goal is that Erdua can be kept on the page, no matter what the environment is, it will appear only when we want it to appear, and when it is not needed, it is just a normal code that will not take effect.

The solution I thought of is: first put the src of the above imported code into the if, and change localStorage to sessionStorage. The active-eruda parameter can also be changed to a shorter name. The modified code is as follows:

 ;( function (){  
 if (!/eruda= true /.test(window.location) || sessionStorage.getItem( 'eruda' ) != '0' ) return ;  
 var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js' ;  
 document.write('  
 document.write('  
 })();

This code means that Erdua will be loaded only if the URL has the parameter eruda=true or the value of eruda in sessionStorage is greater than 0. The advantage of this is that when we need to debug, we can just add a parameter after the webpage URL, and it will not be loaded if debugging is not required.

However, this is fine in the development stage, but adding URL parameters may be troublesome in the online environment. So I thought of clicking an element on the page 10 times to load Erdua, click 10 times or more, then write eruda=yes in sessionStorage, and then refresh the current page. Conversely, click 10 more times to close Erdua. This more hidden way to turn Erdua on or off, so that the online environment can also turn Erdua on or off freely.

Example: If there is a page like this, there is a title text

 <h2>——Rules Details——</h2>
 <div>
 .....
 </div>

Then we can bind a click event to the h2 tag and add a method called showErdua

 <h2onclick= "showErdua" >——Rules details——</h2>
 <div>
 .....
 </div> 
 
 <script>
 var count = 0;
 function showErdua(){
 if ( count >= 10) {
        var erdua = sessionStorage.getItem( 'erdua' );
        if (!erdua || erdua === 'no' ){
            sessionStorage.setItem( 'eruda' , 'yes' )
 } else {
            sessionStorage.setItem( 'eruda' , 'no' )
 }
 location.reload()
 }
 count ++
 }
 </script>

In this way, you can call up Erdua by clicking the rule details 10 times, and close Erdua by clicking it 10 more times. Anyway, I think this is pretty good.

I don't know how everyone uses it?