Integration with DevTools

The node:inspector module provides an API for integrating with devtools that support Chrome DevTools Protocol. DevTools frontends connected to a running Node.js instance can capture protocol events emitted from the instance and display them accordingly to facilitate debugging. The following methods broadcast a protocol event to all connected frontends. The params passed to the methods can be optional, depending on the protocol.

// The `Network.requestWillBeSent` event will be fired.
inspector.Network.requestWillBeSent({
  requestId: 'request-id-1',
  timestamp: Date.now() / 1000,
  wallTime: Date.now(),
  request: {
    url: 'https://nodejs.org/en',
    method: 'GET',
  },
});

inspector.Network.dataReceived(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.dataReceived event to connected frontends, or buffers the data if Network.streamResourceContent command was not invoked for the given request yet.

Also enables Network.getResponseBody command to retrieve the response data.

inspector.Network.dataSent(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Enables Network.getRequestPostData command to retrieve the request data.

inspector.Network.requestWillBeSent(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.requestWillBeSent event to connected frontends. This event indicates that the application is about to send an HTTP request.

inspector.Network.responseReceived(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.responseReceived event to connected frontends. This event indicates that HTTP response is available.

inspector.Network.loadingFinished(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.loadingFinished event to connected frontends. This event indicates that HTTP request has finished loading.

inspector.Network.loadingFailed(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.loadingFailed event to connected frontends. This event indicates that HTTP request has failed to load.

inspector.Network.webSocketCreated(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.webSocketCreated event to connected frontends. This event indicates that a WebSocket connection has been initiated.

inspector.Network.webSocketHandshakeResponseReceived(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.webSocketHandshakeResponseReceived event to connected frontends. This event indicates that the WebSocket handshake response has been received.

inspector.Network.webSocketClosed(params?): void

This feature is only available with the --experimental-network-inspection flag enabled.

Broadcasts the Network.webSocketClosed event to connected frontends. This event indicates that a WebSocket connection has been closed.

This feature is only available with the --experimental-inspector-network-resource flag enabled.

The inspector.NetworkResources.put method is used to provide a response for a loadNetworkResource request issued via the Chrome DevTools Protocol (CDP). This is typically triggered when a source map is specified by URL, and a DevTools frontend—such as Chrome—requests the resource to retrieve the source map.

This method allows developers to predefine the resource content to be served in response to such CDP requests.

const inspector = require('node:inspector');
// By preemptively calling put to register the resource, a source map can be resolved when
// a loadNetworkResource request is made from the frontend.
async function setNetworkResources() {
  const mapUrl = 'http://localhost:3000/dist/app.js.map';
  const tsUrl = 'http://localhost:3000/src/app.ts';
  const distAppJsMap = await fetch(mapUrl).then((res) => res.text());
  const srcAppTs = await fetch(tsUrl).then((res) => res.text());
  inspector.NetworkResources.put(mapUrl, distAppJsMap);
  inspector.NetworkResources.put(tsUrl, srcAppTs);
};
setNetworkResources().then(() => {
  require('./dist/app');
});

For more details, see the official CDP documentation: Network.loadNetworkResource

This feature is only available with the --experimental-storage-inspection flag enabled.

Broadcasts the DOMStorage.domStorageItemAdded event to connected frontends. This event indicates that a new item has been added to the storage.

This feature is only available with the --experimental-storage-inspection flag enabled.

Broadcasts the DOMStorage.domStorageItemRemoved event to connected frontends. This event indicates that an item has been removed from the storage.

This feature is only available with the --experimental-storage-inspection flag enabled.

Broadcasts the DOMStorage.domStorageItemUpdated event to connected frontends. This event indicates that a storage item has been updated.

This feature is only available with the --experimental-storage-inspection flag enabled.

Broadcasts the DOMStorage.domStorageItemsCleared event to connected frontends. This event indicates that all items have been cleared from the storage.

This feature is only available with the --experimental-storage-inspection flag enabled.