Playwirght - Find network usage overall by reproducing a user session

Question

I am currently trying to use playwright to measure network performance, especially network consumption for a typical user session.

E.G. navigating from page to page, filling some form, ...

I have implemented an interceptor in angular as below:

@Injectable()
export class MetricInterceptor implements HttpInterceptor {
  constructor(
        private readonly metricService: MetricService,
  ) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    this.metricService.addHttpRequest(); // adding approximated request header size that I observed

    if (req.body && req.body.contentLength) {
      this.metricService.addAscendingBytes(+req.body.contentLength);
    }

    return next.handle(req).pipe(
      tap(event => {
        this.metricService.addHttpResponse(); // adding approximated response header size that I observed

        if (event.headers && event.headers.get('content-length')) {
          const contentLength = +event.headers.get('content-length') ?? 0;
          this.metricService.addDescendingBytes(contentLength);
        }
        
      }),
    );
  }
}

Then I display values on pages, and get them in playwright to measure network use over a session

After trying to find some docs on how to do that, I didn't find a way to do it in a better way. Especially could I in playwright get access to chrome dev tools and extract below values