概述

页面Websocket收到的数据是使用自定义协议处理过的，无法直接看到明文的内容。
现在需要使用playwright结合chrome，进行调试，将其它的数据抠出来。

具体内容如下：

1. pr拦截websocket数据，并保存到本地
2. pr启动页面，并将保存的数据载入页面
3. 找到页面ws数据处理入口处，替换为保存的数据
4. 开始单步调试

先保存数据再调试的好处是，调试更有针对性。 再使用java代码对原始数据进行解析的时候，起到对照作用。

实现

拦截websocket数据，并保存到本地

    public void capture(String captureUrl) {
        log.debug("start to test playwright demo");
        try (Playwright playwright = Playwright.create()) {
            BrowserType chromium = playwright.chromium();
            Path userDataDir = Paths.get("d:/my/");
            BrowserContext context = chromium.launchPersistentContext(userDataDir,
                    new BrowserType.LaunchPersistentContextOptions().setHeadless(false).setDevtools(true).setSlowMo(50));
            Page page = context.newPage();
            //等待页面加载完成
            File errorDir = new File("D:\\data\\pdderror\\" + RandomUtil.randomString(6));
            errorDir.mkdir();
            AtomicInteger  i = new AtomicInteger(0);
            page.onWebSocket(webSocket -> {
                webSocket.onFrameReceived(frame -> {
                    byte[] binary = new byte[0];
                    FileUtils.writeByteArrayToFile(new File(errorDir, "MyData" + i.getAndIncrement()), binary);
                    }
                });
            });
            page.navigate(captureUrl);
            page.waitForLoadState();
            page.waitForTimeout(9000 * 1000);
            log.debug("over");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

将websocket数据送入页面

参考之前的文章：Playwright：将java字节数组传给js的ArrayBuffer

页面加断点，并在入口处替换数据

1. 打开页面，按F12进入调试模式
2. 按ctrl + shift + f全局搜索WebSocket
3. 找到代码的入口，进行格式化

格式化之后如下：

单步调试

找到接收ws应答消息的入口，下断点。

其它

直接在网页上下载websocket的数据

在js调试过程中，如果需要直接将数据下载到本地，可以使用下面的方法。

/**
* 用于保存二进制文件到本地
**/
let saveByteArray = (function () {
  let a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  return function (data, name) {
    let url;
    if (data && data.toString() === "[object Blob]") {
      url = window.URL.createObjectURL(data);
    } else {
      let blob = new Blob([data], { type: "arraybuffer" });
      url = window.URL.createObjectURL(blob);
    }
    a.href = url;
    a.download = name;
    a.click();
    window.URL.revokeObjectURL(url);
  };
})();