inspector: add protocol methods retrieving sent/received data

Add protocol method `Network.dataSent` to buffer request data. And
expose protocol methods `Network.getRequestPostData` and
`Network.getResponseBody` allowing devtool to retrieve buffered data.
PR-URL: #58645
Reviewed-By: Ryuhei Shima <shimaryuhei@gmail.com>

Author: legendecas

doc/api/inspector.md

@@ -524,6 +524,20 @@ This feature is only available with the `--experimental-network-inspection` flag
 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])`
+
+<!-- YAML
+added: REPLACEME
+-->
+
+*`params` {Object}
+
+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])`
 
 <!-- YAML

lib/inspector.js

@@ -214,6 +214,7 @@ const Network = {
 responseReceived: (params)=>broadcastToFrontend('Network.responseReceived',params),
 loadingFinished: (params)=>broadcastToFrontend('Network.loadingFinished',params),
 loadingFailed: (params)=>broadcastToFrontend('Network.loadingFailed',params),
+dataSent: (params)=>broadcastToFrontend('Network.dataSent',params),
 dataReceived: (params)=>broadcastToFrontend('Network.dataReceived',params),
 };
 

lib/internal/inspector/network.js

@@ -6,6 +6,7 @@ const {
 }=primordials;
 
 const{ now }=require('internal/perf/utils');
+const{ MIMEType }=require('internal/mime');
 constkInspectorRequestId=Symbol('kInspectorRequestId');
 
 // https://chromedevtools.github.io/devtools-protocol/1-3/Network/#type-ResourceType
@@ -46,9 +47,29 @@ function getNextRequestId() {
 return`node-network-event-${++requestId}`;
 };
 
+functionsniffMimeType(contentType){
+letmimeType;
+letcharset;
+try{
+constmimeTypeObj=newMIMEType(contentType);
+mimeType=mimeTypeObj.essence||'';
+charset=mimeTypeObj.params.get('charset')||'';
+}catch{
+mimeType='';
+charset='';
+}
+
+return{
+__proto__: null,
+ mimeType,
+ charset,
+};
+}
+
 module.exports={
  kInspectorRequestId,
  kResourceType,
  getMonotonicTime,
  getNextRequestId,
+ sniffMimeType,
 };

lib/internal/inspector/network_http.js

@@ -13,35 +13,43 @@ const {
  kResourceType,
  getMonotonicTime,
  getNextRequestId,
+ sniffMimeType,
 }=require('internal/inspector/network');
 constdc=require('diagnostics_channel');
 const{ Network }=require('inspector');
-const{ MIMEType }=require('internal/mime');
 
 constkRequestUrl=Symbol('kRequestUrl');
 
 // Convert a Headers object (Map<string, number | string | string[]>) to a plain object (Map<string, string>)
 constconvertHeaderObject=(headers={})=>{
 // The 'host' header that contains the host and port of the URL.
 lethost;
+letcharset;
+letmimeType;
 constdict={};
 for(const{0: key,1: value}ofObjectEntries(headers)){
-if(key.toLowerCase()==='host'){
+constlowerCasedKey=key.toLowerCase();
+if(lowerCasedKey==='host'){
 host=value;
 }
+if(lowerCasedKey==='content-type'){
+constresult=sniffMimeType(value);
+charset=result.charset;
+mimeType=result.mimeType;
+}
 if(typeofvalue==='string'){
 dict[key]=value;
 }elseif(ArrayIsArray(value)){
-if(key.toLowerCase()==='cookie')dict[key]=value.join('; ');
+if(lowerCasedKey==='cookie')dict[key]=value.join('; ');
 // ChromeDevTools frontend treats 'set-cookie' as a special case
 // https://github.com/ChromeDevTools/devtools-frontend/blob/4275917f84266ef40613db3c1784a25f902ea74e/front_end/core/sdk/NetworkRequest.ts#L1368
-elseif(key.toLowerCase()==='set-cookie')dict[key]=value.join('\n');
+elseif(lowerCasedKey==='set-cookie')dict[key]=value.join('\n');
 elsedict[key]=value.join(', ');
 }else{
 dict[key]=String(value);
 }
 }
-return[host,dict];
+return[dict,host,charset,mimeType];
 };
 
 /**
@@ -52,14 +60,15 @@ const convertHeaderObject = (headers = {}) => {
 functiononClientRequestCreated({ request }){
 request[kInspectorRequestId]=getNextRequestId();
 
-const{0: host,1: headers}=convertHeaderObject(request.getHeaders());
+const{0: headers,1: host,2: charset}=convertHeaderObject(request.getHeaders());
 consturl=`${request.protocol}//${host}${request.path}`;
 request[kRequestUrl]=url;
 
 Network.requestWillBeSent({
 requestId: request[kInspectorRequestId],
 timestamp: getMonotonicTime(),
 wallTime: DateNow(),
+ charset,
 request: {
  url,
 method: request.method,
@@ -95,16 +104,7 @@ function onClientResponseFinish({ request, response }) {
 return;
 }
 
-letmimeType;
-letcharset;
-try{
-constmimeTypeObj=newMIMEType(response.headers['content-type']);
-mimeType=mimeTypeObj.essence||'';
-charset=mimeTypeObj.params.get('charset')||'';
-}catch{
-mimeType='';
-charset='';
-}
+const{0: headers,2: charset,3: mimeType}=convertHeaderObject(response.headers);
 
 Network.responseReceived({
 requestId: request[kInspectorRequestId],
@@ -114,7 +114,7 @@ function onClientResponseFinish({ request, response }) {
 url: request[kRequestUrl],
 status: response.statusCode,
 statusText: response.statusMessage??'',
-headers: convertHeaderObject(response.headers)[1],
+ headers,
  mimeType,
  charset,
 },

lib/internal/inspector/network_undici.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const{
- ArrayPrototypeFindIndex,
  DateNow,
 }=primordials;
 
@@ -10,10 +9,10 @@ const {
  kResourceType,
  getMonotonicTime,
  getNextRequestId,
+ sniffMimeType,
 }=require('internal/inspector/network');
 constdc=require('diagnostics_channel');
 const{ Network }=require('inspector');
-const{ MIMEType }=require('internal/mime');
 
 // Convert an undici request headers array to a plain object (Map<string, string>)
 functionrequestHeadersArrayToDictionary(headers){
@@ -29,21 +28,30 @@ function requestHeadersArrayToDictionary(headers) {
 // Convert an undici response headers array to a plain object (Map<string, string>)
 functionresponseHeadersArrayToDictionary(headers){
 constdict={};
+letcharset;
+letmimeType;
 for(letidx=0;idx<headers.length;idx+=2){
 constkey=`${headers[idx]}`;
+constlowerCasedKey=key.toLowerCase();
 constvalue=`${headers[idx+1]}`;
 constprevValue=dict[key];
 
+if(lowerCasedKey==='content-type'){
+constresult=sniffMimeType(value);
+charset=result.charset;
+mimeType=result.mimeType;
+}
+
 if(typeofprevValue==='string'){
 // ChromeDevTools frontend treats 'set-cookie' as a special case
 // https://github.com/ChromeDevTools/devtools-frontend/blob/4275917f84266ef40613db3c1784a25f902ea74e/front_end/core/sdk/NetworkRequest.ts#L1368
-if(key.toLowerCase()==='set-cookie')dict[key]=`${prevValue}\n${value}`;
+if(lowerCasedKey==='set-cookie')dict[key]=`${prevValue}\n${value}`;
 elsedict[key]=`${prevValue}, ${value}`;
 }else{
 dict[key]=value;
 }
 }
-returndict;
+return[dict,charset,mimeType];
 };
 
 /**
@@ -54,10 +62,15 @@ function responseHeadersArrayToDictionary(headers) {
 functiononClientRequestStart({ request }){
 consturl=`${request.origin}${request.path}`;
 request[kInspectorRequestId]=getNextRequestId();
+
+constheaders=requestHeadersArrayToDictionary(request.headers);
+const{ charset }=sniffMimeType(headers);
+
 Network.requestWillBeSent({
 requestId: request[kInspectorRequestId],
 timestamp: getMonotonicTime(),
 wallTime: DateNow(),
+ charset,
 request: {
  url,
 method: request.method,
@@ -94,19 +107,7 @@ function onClientResponseHeaders({ request, response }) {
 return;
 }
 
-letmimeType;
-letcharset;
-try{
-constcontentTypeKeyIndex=
-ArrayPrototypeFindIndex(response.headers,(header)=>header.toString().toLowerCase()==='content-type');
-constcontentType=contentTypeKeyIndex!==-1 ? response.headers[contentTypeKeyIndex+1].toString() : '';
-constmimeTypeObj=newMIMEType(contentType);
-mimeType=mimeTypeObj.essence||'';
-charset=mimeTypeObj.params.get('charset')||'';
-}catch{
-mimeType='';
-charset='';
-}
+const{0: headers,1: charset,2: mimeType}=responseHeadersArrayToDictionary(response.headers);
 
 consturl=`${request.origin}${request.path}`;
 Network.responseReceived({
@@ -118,7 +119,7 @@ function onClientResponseHeaders({ request, response }) {
  url,
 status: response.statusCode,
 statusText: response.statusText,
-headers: responseHeadersArrayToDictionary(response.headers),
+ headers,
  mimeType,
  charset,
 },