node icon indicating copy to clipboard operation
node copied to clipboard

inspector: add initial support for network inspection

Open cola119 opened this issue 8 months ago • 17 comments

The idea of supporting network inspection in Node.js was first proposed 7 years age in the https://github.com/nodejs/diagnostics/issues/75. Despite numerous discussions, we have yet to settle on an implementation approach. This PR aims to serve as a starting point to explore and refine how we can achieve this feature.

Overview

This PR introduces basic support for the Network domain of the Chrome DevTools Protocol (CDP) and its corresponding agent implementation in Node.js. Although this is an initial implementation with several pending tasks, it sets a foundation to verify if we are heading in the right direction.

Demo

Currenlty, the Node-specific DevTools Frontend lacks a network tab. Therefore, you'll need to use the Chrome DevTools Frontend, accessible via devtools://devtools/bundled/inspector.html. Below is a simple demonstration:

  1. Start Node.js with the inspector and wait for a connection:
$ ./node --inspect-wait -e "require('https').get('https://nodejs.org/en', (res) => { console.log(res.statusCode); }); fetch('https://nodejs.org/fr');"
Debugger listening on ws://127.0.0.1:9229/<inspector-websocket-id>
For help, see: https://nodejs.org/en/docs/inspector
  1. Open the Chrome DevTools Frontend and connect to the Node.js inspector
devtools://devtools/bundled/inspector.html?ws=127.0.0.1:9229/<inspector-websocket-id>
  1. Navigate to the network tab to observe network activity.

image

Implementation Strategy

Network activity tracking

We considered several ways to track network activities, as discussed in https://github.com/nodejs/diagnostics/issues/75. This PR captures request and response data with the diagnostic_channel module. This approach enables us to monitor activities in both core modules (http, https) and external libraries (undici) without changing the core implementation.

Custom CDP domain (NodeNetwork)

TBD

Future work

To fully support the Network domain of the CDP, several tasks remain:

  • [ ] Complete implementation for all network domain events as specified in the https://chromedevtools.github.io/devtools-protocol/tot/Network/
    • CDP is primarily designed for browsers, but we aim to support as many relevant features as possible in Node.js
    • [ ] Network.loadingFailed
    • [x] request url
    • [ ] request headers
    • [x] request timing
    • [x] response data
    • [ ] status code
    • [ ] response headers
    • [ ] ...
  • [ ] Add a network tab on the Node-specific DevTools frontend
    • Collaborate with the Chrome DevTools team to achieve this.

Limitations and Challenges

These APIs can be supported once each diagnostics_channel provides sufficient hook timing and resources.

  • [ ] Support WebSocket
  • [ ] Support fetch API
  • [ ] Support http2 module

The following features may be challenging to fully implement in the initial phase, and we need to evaluate the demand for them.

  • [ ] Non-inspection features (e.g., header/request/response modification, network condition emulation, etc.)

cc @nodejs/inspector @eugeneo

cola119 avatar Jun 26 '24 13:06 cola119