Realization of DoKit Web request capture tool (a) product research

I. Research background

Among the open source software development practice courses jointly offered by the college and enterprises, I chose didi DoKit Open Source practice project. The practical content of the course is to complete a small tool of DoKit Web terminal under the guidance of the teacher. I chose the part of request capture, whose implementation effect is similar to the Nework section of Chrome DevTools.

The demand of research and development background: for the front-end developer, in the mobile terminal in the process of Web development, are generally use browsers such as chrome the mobile terminal of the model to simulate all kinds of mobile phone models, development on chrome debugging good release test again, if you want to see the data on the mobile end only through caught, think breakpoint debugging can alert everywhere.

However, with millions of mobile devices available today, it would be nice to have a tool that can debug and view interface data on the mobile end like Chrome DevTools.

Second, product research

The most commonly used mobile debugging tools are Eruda and VConsole, Other products as well as the overall automated test solution UI Recorder, Tencent AlloyTeam open source Web development debugging tool AlloyLever, Chrome DevTools itself also provides mobile TERMINAL USB debugging mode, specific can refer to the article mobile terminal Web development debugging tools: Chrome DevTools.

We’ll focus on Eruda and VConsole, both of which are easy to use. Let’s plug them into the project demo and see what they can do.

1.Eruda

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, captures XHR requests, displays local storage and Cookie information, and more.

• Feature list

• Button drag, panel transparency size Settings.
• Console panel: Captures Console logs, including log, ERROR, INFO, WARN, DIR, time/timeEnd, clear, count, Assert, and table. Support for placeholders, including %c custom style output; Supports filtering by log type and regular expression. Supports JavaScript script execution.
• Elements panel: View label content and properties. View styles applied to the Dom; Support for page element highlighting; Support screen directly click to select; View the various events bound to the Dom.
• Network panel: Capture requests, view sent data, returned headers, returned content and other information.
• Resources panel: View and clear localStorage, sessionStorage and cookies; View page loading scripts and style files; View page loading images.
• Sources panel: view the source page; Format HTML, CSS, JS code and JSON data.
• Info panel: Output URL and User Agent; Supports custom output content.
• Snippets panel: Add borders to page elements; Refresh the page with a timestamp; Support for custom code snippets.

• Official documentation: github.com/liriliri/er…

• Preview demo: Access eruda.liriliri. IO/on the mobile phone

• Usage: There are four ways to meet the needs of development.

1. Use by CDN: Add the following code to index. HTML

< script SRC = "/ / cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js" > < / script > < script > eruda. The init (); </script>Copy the code

2. Install using NPM:

npm install eruda --save
Copy the code

3. Load the script on the page: Add the following code to index.html

<script src="node_modules/eruda/eruda.js"></script> <script>eruda.init(); </script>Copy the code

4. Control whether to load the debugger through URL parameters (it can achieve the effect of leaving a back door after the online, such as binding a button, click several times to open the debugging tool)

; (function () { var src = '//cdn.jsdelivr.net/npm/eruda'; 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>'); }) ();Copy the code

• Eruda also provides two configurable properties:

// Container: The Dom element used for plug-in initialization. If not set, div is created by default and placed directly under the HTML root. //tool: specifies which panels to initialize. All are loaded by default. let el = document.createElement('div'); document.body.appendChild(el); eruda.init({ container: el, tool: ['console', 'elements'], useShadowDom: true });Copy the code

• Access effects of Eruda request capture function:

• Eruda Network vs. Chrome DevTools Network

Eruda Network contains only the Headers and Response parts of Chrome DevTools Network, and the Preview/Initator/Timing part is missing, and the Headers fields are incomplete.

2.VConsole

• Official documentation: github.com/Tencent/vCo…

• Preview demo:www.w3cways.com/demo/vconso…

• Usage:

1. Install using NPM:

npm install vconsole
Copy the code

2. Load the script on the page: Add the following code to index.html

< script SRC = "https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0" > < / script > < script > var vConsole = new VConsole(); </script>Copy the code

VConsole also provides a number of configuration properties, as described in Public Properties and methods.

• The access effects of the VConsole request capture function:

• VConsole Network vs. Chrome DevTools Network:

As you can see, the VConsole Network also contains only Headers and Response, leaving out the Preview/Initator/Timing part.

Three, the two comparison

Focus here on the request capture portion of both tools.

4. Article index

Realization of DoKit Web request capture tool (a) product research

DoKit Web end request capture tool (two) read Eruda source code

DoKit Web end request capture tool (three) read Eruda source code