This article first appeared on my blog: dunizb.com link: dunizb.com/2017/10/16/…

One of the biggest pain points of mobile Web development is the inability to view console.log and other information, such as network requests and display local storage, while the real machine is running. If the web page is running in the mobile browser, it is ok to open the website to view the console information on the computer. But if it is to make the embedded H5 page of the APP, it can only rely on the development stage to try to avoid bugs in the browser simulation environment. However, once the H5 goes online, it will be more troublesome. But also rely on the APP environment to run web pages, more difficult to find problems. Wouldn’t it be nice to have something like Chrome DevTools on mobile?

One such great mobile DevTools is vConsole, made by Dachang Penguin. But this article positioned him as male number two, today’s leading male number one is: Eruda! A vConsole cousin. If you don’t know how to debug a web page on mobile, this article is very helpful. If you are a user of vConsole, you can also try Eruda. If you are an expert in mobile web development, you can quietly ignore this article.

Eruda who is it?

Hello everyone, let me introduce you, this is my….. . Eruda is a debug panel designed for the mobile web front end. It’s like a mini version of DevTools. It captures console logs, checks element status, displays performance metrics, captures XHR requests, displays local storage and Cookie information, checks browser features, and more.

The GitHub address is github.com/liriliri/er… Erdua with great appearance and skills:

here

Use skills

That is the focus of this article. The basic usage method of Eruda is recommended in the form of CDN and configurable parameters, and the following codes are introduced in 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();  + 'ipt>'); }) ();Copy the code

eruda.init(); Which panels can be passed in to initialize, and all are loaded by default.

There’s nothing wrong with using it this way, but if Eruda is going to go online with it, do we have to delete this code? Eruda will load immediately whether you need to debug it or not, and the Eruda icon will appear on the page. My goal is that Eruda stays on the page, no matter what the environment, as long as it’s there when we want it to be there, and it’s just plain code that doesn’t work when we don’t need it.

SRC = sessionStorage; active-eruda = sessionStorage; sessionStorage = sessionStorage;

; (function () {
    if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda')! = ='true') return;
    var src = '/ / cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();  + 'ipt>'); }) ();Copy the code

Load erUDA if the URL has eruda=true or the sessionStorage erUDA value is true. The advantage of this is that when we need to debug, we can add a parameter after the URL, it will not load without debugging.

However, this is fine in the development phase, but online environments can be cumbersome to add URL parameters. I came up with the idea of clicking on an element on the page 10 times to load Eruda, clicking 10 or more times, then writing Eruda = True in sessionStorage, and then refreshing the current page. Instead, click 10 more times to close Eruda. Turn Eruda on and off in such a hidden way that the online environment can turn Eruda on and off as well.

Example: Suppose you have a page with a header text

<h2>-- Details of rules --</h2>
<div>.</div>
Copy the code

So we can bind a click event to the H2 tag and add a method called showEruda

<h2 onclick="showEruda">-- Details of rules --</h2>
<div>.</div>

<script>
var count = 0;
function showEruda (a) {
    if (count >= 10) {    
        var erdua = sessionStorage.getItem('erdua');
        if(! erdua || erdua ==='false'){
            sessionStorage.setItem('eruda'.'true')}else {
            sessionStorage.setItem('eruda'.'false')
        }
        location.reload()
    }
    count++
}
</script>
Copy the code

So clicking on the rule details 10 times will trigger Eruda, and clicking on the rule details 10 times will turn Eruda off, which I think is fine anyway.

Do not know everybody is how to use?

This article is published on the public account “Front-end full stack Developer” ID: BY-Zhangbing-dev, the first time to read the latest article, will be published two days before the new article. After concern private letter reply: gift package, send some network high-quality video course network disk information, can save a lot of money for you!