One, foreword

In the realization of DoKit Web request capture tool (a) product research, I investigated two commonly used Web mobile debugging tools Eruda and VConsole, before the implementation of their own Web request capture tool, I read the source code of Eruda part.

The purpose of reading source code: one is to understand the implementation framework of the Node.js project as a front-end beginner, and the other is to study the implementation ideas of the network request capture part.

This section mainly explains the overall structure of the Eruda project and the steps to run it locally.

Ii. Project structure Overview

Clone under Eruda source code (The source address), you can see that its project directory structure is as follows:

As noted in Eruda’s contributor guidelines document.github /CONTRIBUTING. Md:

Two points of information can be known from the above: first, the preparation required before the operation of Eruda project; second, the overall structure of Eruda project can be understood through the above description and reference.

Iii. Preparation before Eruda project operation

  1. After you clone the repository, you need to run the following command to install the test environment and dependencies needed to run the project.
Sudo NPM install -g codecov sudo NPM install -g @liriliri/lsla / NPM install NPM run setupCopy the code

2. Then use NPM run dev to load and run the Eruda project

The operating effect is shown as follows:

Iv. Overall project structure

  • In DOC are Eruda usage documents and tools documents;
  • Webpack configuration files and other script files are in build.
  • In test are the files associated with the unit testing tool Jasmine + Karma for testing.
  • .eslintrc.js,.eustia.js, prettier.config.js, and karma.conf.js, The Eruda project uses ESLint (a plug-in for JavaScript code detection), Eustia (a JavaScript library), Prettier (front-end code formatting), and Karma (JavaScript test execution process management). – Use Karma to automate Jasmine tests in the project;
  • .travis. Yml is a configuration file for the continuous integration service Travis CI, which is bound to projects on Github and automatically grabs new code whenever it comes in. Then provide a run environment, perform tests, complete builds, and deploy to the server;
  • . Gitignore /. Erlintignore /. Prettierignore respectively are the tools work when you want to ignore the specified file path;
  • The three Git-related files are configurations related to the project’s interaction with the Git repository;
  • Node_modules is generated after NPM installation to store the installation package.
  • While SRC is the source code of the project, Eruda source program is a Node.js project based on the new ES6 specification.
  • Package. json is located in the module’s directory and is used to define package properties.

Note: ES6 stands for ECMAScript 6.0, which is the next version of the JavaScript standard. It is also known as ES2015 due to its release in June 2015. ES6 is designed to address the inherent weaknesses of ES5, such as the lack of classes in JavaScript; JavaScript is currently available in ES5, and most older browsers support ES6, but only some of the features and functions of ES6 are implemented.

V. Conclusions of this section

As you can see from this section, we need to focus on the source content in package.json and SRC for the implementation of the request capture function.

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