利用netlog-viewer排查Chrome网络问题

发表于 | 分类于
本文字数： 1.5k | 阅读时长 ≈ 1 分钟

此前遇到一个问题，在MacOS上用Friefox、Safari、Chrome、Edge几种不同浏览器访问同一个本地站点，仅有Chromium内核的浏览器会出现网络异常的情况。根据定位，请求并未到达后端上，所以还是要学习怎么排查Chromium内核上网络问题。

net-export

目前Chrome支持通过chrome://net-export/来导出网络日志文件。其中支持三种模式:

  • Strip private information
  • Include cookies and credentials
  • Include raw bytes (will include cookies and credentials)

分别对应不同的日志信息的详细程度，选择后点击Start logging to disk即可开始采集日志。开始采集后，当前浏览器各会话产生的信息都会被记录下来，直到停止为止。记录下来的数据以json格式存储。

netlog_viewer

保存的网络日志文件chrome-net-export-log.json有了，接下来需要工具读取数据进行分析。在官方文档中有写明可以使用https://netlog-viewer.appspot.com/#import，将网络日志导入后，即可查看网络事件的相关信息，进行具体问题的分析。具体事件类型，可以查看官方文档(见参考链接)。

但如果有以下考虑，就需要离线部署netlog-viewer:

  • 有个人隐私的考虑
  • 数据安全或隔离网场景，数据禁止出网

离线部署

netlog-viewer功能属于Chromium开发的Catapult项目，Catapult是多种性能工具的合集，这些工具涵盖收集、显示和分析性能数据。

离线部署netlog-viewer需要满足两个条件:

  • Linux系统
  • Python3环境

部署步骤:

1
2
3
4
5
6
#此步也可使用下载tgz包代替
git clone https://chromium.googlesource.com/catapult

cd catapult/netlog_viewer

./bin/serve_static

我已经将上面的步骤制作成了docker镜像，便于离线场景下更方便的操作。

1
docker pull applenice/catapult:RELEASE.2024-03-20T20-38-58Z

通过如下docker-compose配置文件即可部署:

1
2
3
4
5
6
7
8
version: "3.9"

services:
  netlog_viewer:
    image: applenice/catapult:RELEASE.2024-03-20T20-38-58Z
    command: ["bash", "-c", "cd /opt/catapult/netlog_viewer && ./bin/serve_static"]
    ports:
      - "8080:8080"

参考

1、https://support.google.com/chrome/a/answer/6271171?hl=zh-Hans&sjid=10113571654924511450-AP#zippy=%2C%E8%8E%B7%E5%8F%96%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97%2C%E6%9F%A5%E7%9C%8B%E7%BD%91%E7%BB%9C%E6%95%B0%E6%8D%AE

0%