Project background

In recent years, with the vigorous development of open source in China, some colleges and universities have begun to explore open source into the campus, so that students can feel the charm of open source when they are students. This is also a new teaching mode that colleges and universities and domestic leading Internet enterprises try together. This project will document the learning results of the students during this period.

More topic background reference: [DoKit& Peking University topic] origin

series

[DoKit& Peking University] Origin

【DoKit& Peking University special Topic 】- Read the small program source code (a)

【DoKit& Peking University special Topic 】- Read the small program source code (two)

【DoKit& Peking University Special Topics 】- Read the small program source code (three)

Implementation of DoKit For Web request capture tool (I) Product research

The original

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.

Eruda VConsole
Function module More complete (basically contains all chrome DevTools modules) Relatively few
The Network part Capture XHR request to view Headers and Response information With the left
Dynamic loading Support, can add debugging backdoor or use JS asynchronously loading library Without instructions, you can implement it yourself (Refer to the article)
The entry icon Relative to the bottom right corner of the screen positioning, more friendly Relative to the lower right corner of the page, zoom to see
Extensible and customizable Support,The documentation Support,Supporting documents

The author information

Satoshi, a straight ball teenager

Original link: juejin.cn/post/695528…

Source: Nuggets