One, foreword

In the conclusion of the last section, after studying Network. Js in Eruda, we found chobitsu, a Chrome DevTools protocol tool, which realized Eruda request interception by calling it and obtained the response information of request through passing in four objects. However, to understand the implementation of request capture in detail, you need to continue reading chobitsu’s source code with the following questions:

  • How do YOU get the request list, before you actually send the request?
  • When was the request sent, and what was done before the request was sent?
  • Does Chobitsu record the response after sending the request or directly record the response obtained by the browser after sending the request?
  • How did Chobitsu block the request? Did it override the browser’s send method and do something else before sending the request?

Second, about the request interceptor preparation knowledge

First, there are two types of data requests in browsers, XMLHttpRequest and FETCH. AJAX stands for Asynchronous JavaScript and XML, a web development technique for creating interactive web applications. The essence is to request data using XMLHttpRequest. Both approaches are implemented in our request interceptor. The two acquisition methods are as follows:

  • XMLHttpRequest Requests data
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();
Copy the code
  • Fetch request data
fetch(url)
    .then(response= > response.json())
    .then(data= > console.log(data))
    .catch(e= > console.log("Oops, error", e))
Copy the code

The fetch request is part of the Promise structure, the direct.then() method handles callback data, and when something goes wrong, the catch method is executed, and promise avoids the problem of callback pyramids.

Chobitsu source directory parsing

  1. The file structure in the SRC directory is as follows:

  1. The main code of the project is in SRC. The SRC directory is as follows, including domains, lib and index.ts.

  • Index. ts is the entry file for the entire project, which includes the chobitsu class definition;
  • Domains include ts files of Storage, Runtime, Network, DOM, DOMDebugger, DOMStorage, Overlay, Page, Debugger, CSS, and other functional modules, as well as methods.ts, Which will implement methods in each of the above function modules, with “function module name. Method name: method variables “, one by one into the methods constant. The methods constant is referenced in index.ts to fetch the function variable.
  • Lib is the utility class that the function module in 2. Will call publicly, including connector.ts, request.ts and so on.
  • In addition, it can be seen that most of the functional modules and the implementation of public modules are called another project by the same author as Chobitsu and Eruda: Licia, which provides a rich library of JavaScript tools, such as case format conversion, URL conversion, counting, etc., you can view the official address.

Public modules in lib

Ts, mutationObserver.ts and Request. ts respectively define four classes connector, Observer, XhrRequest and FetchRequest in lib. These three classes are inherited from the Emitter class in LICia.

Viewing the Licia usage documentation, we can see the Event Emitter class used by Emitter to provide observer patterns. The following is taken from the LICia usage documentation.

Emitter

The Event Emitter class provides the observer mode.

The type definition 
class Emitter {
    on(event: string.listener: types.AnyFn): Emitter;
    off(event: string.listener: types.AnyFn): Emitter;
    once(event: string.listener: types.AnyFn): Emitter;
    emit(event: string. args:any[]): Emitter; removeAllListeners(event? :string): Emitter;
    static mixin(obj: any) :any;
}
Copy the code

On: binds events.

Off: indicates the unbinding event.

Once: Binding an event that fires only once.

Parameter names instructions
event The name of the event
listener Event listener

Emit: Triggers the event.

Parameter names instructions
event The name of the event
. args Arguments passed to the listener

The listeners are removeAllListeners of all events.

Parameter names instructions
event The name of the event

Mixin: [static] Binds methods of the Emitter class to a given object.

Parameter names instructions
obj The target object 
const event = new Emitter();
event.on('test'.function(name) {
    console.log(name);
});
event.emit('test'.'licia'); // Logs out 'licia'.
Emitter.mixin({});
Copy the code

In summary four subclasses respectively with Emitter with an on/off/once/emit/removeAllListeners mixins binding method of management issues.

In the last article, we learned that eruda’s Network plugin is used to obtain the domainMethod named Network from chobitsu.domain(‘Network’), const Network = chobitsu.domain. On (‘requestWillBeSent’, this._reqWillbesent) to bind

  • MutationObserver monitors changes made to the DOM tree;

The three files all define the corresponding classes XhrRequest, FetchRequest, and Connector, which all inherit from the Emitter class in LICia.

Vi. Summary of this section

The main conclusion of this section is that after studying the source code of network.js, chobitsu, a Chrome DevTools protocol tool, is found. Eruda request interception is realized by calling it. This section studies how to call it in Eruda project, mainly passing in four objects. The request response information is obtained.

However, to understand the implementation of request capture in detail, you need to continue reading chobitsu’s source code with the following questions:

  • How do YOU get the request list, before you actually send the request?
  • When was the request sent, and what was done before the request was sent?
  • Does Chobitsu record the response after sending the request or directly record the response obtained by the browser after sending the request?
  • How did Chobitsu block the request? Did it override the browser’s send method and do something else before sending the request?

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