如何创建HTML文件，通过链接自动在Chrome Trace Viewer中打开指定JSON性能分析文件？

我之前也遇到过手动加载trace文件的麻烦，后来找到了两个实用的方法，能帮你一键打开Chrome Trace Viewer并加载指定的JSON性能文件，下面详细说下：

方法一：用Base64编码直接嵌入URL（适合小体积JSON文件） #

这个方法不需要额外搭建服务器，直接通过HTML链接就能完成：

• 第一步：将你的JSON trace文件转换成Base64编码。你可以用Node.js快速生成，打开命令行进入JSON文件所在目录，运行以下命令（记得替换your-trace-file.json为实际文件名）：

  node -e "const fs = require('fs'); console.log(Buffer.from(fs.readFileSync('./your-trace-file.json')).toString('base64'))"
  

  运行后会输出一串Base64字符串，复制保存好。
• 第二步：创建一个HTML文件，把刚才复制的Base64字符串替换到loadData=后的位置：

  <!DOCTYPE html>
  <html>
  <body>
    <h3>快速打开性能Trace</h3>
    <a href="chrome://tracing/?loadData=这里替换成你的Base64编码内容" target="_blank">点击打开Chrome Trace Viewer</a>
  </body>
  </html>
  

• 第三步：用Chrome浏览器打开这个HTML文件，点击链接就会直接在新标签页打开Trace Viewer并自动加载你的性能数据。

方法二：用JavaScript动态加载（适合大体积JSON文件） #

如果你的JSON文件体积较大，Base64编码后会导致URL过长，这时候推荐用这个方法，不过需要在本地服务器环境下运行（Chrome的安全限制不允许file://协议读取本地其他文件）：

• 第一步：创建一个HTML文件，记得把./your-trace-file.json替换为实际的JSON文件路径：

  <!DOCTYPE html>
  <html>
  <body>
    <h3>加载大体积性能Trace</h3>
    <button onclick="loadTrace()">点击打开Trace Viewer</button>
  
    <script>
      async function loadTrace() {
        // 读取本地JSON文件
        const response = await fetch('./your-trace-file.json');
        const traceData = await response.text();
        // 创建Blob对象存储数据
        const blob = new Blob([traceData], { type: 'application/json' });
        const blobUrl = URL.createObjectURL(blob);
        // 打开Trace Viewer页面
        const traceWindow = window.open('chrome://tracing/');
        // 等待页面加载完成后发送加载命令
        setTimeout(() => {
          traceWindow.postMessage({
            action: 'load',
            url: blobUrl
          }, 'chrome://tracing');
        }, 1000);
      }
    </script>
  </body>
  </html>
  

• 第二步：启动本地服务器，比如用Python内置的简易服务器，在命令行进入文件所在目录，运行：

  python -m http.server 8000
  

• 第三步：打开Chrome浏览器，访问http://localhost:8000/你的HTML文件名，点击按钮就能自动加载Trace数据了。

注意事项 #

• 方法一存在URL长度限制，若JSON文件超过几MB，建议改用方法二。
• 以上方法仅适用于Chrome浏览器，因为chrome://tracing是Chrome专属的内部功能页面，其他浏览器不支持。

内容来源于stack exchange