Chrome远程调试协议配置与分析教程

1. 概述

本教程详细讲解如何通过Chrome远程调试协议实现JavaScript自动调试分析，特别是如何获取调用栈内的变量信息。教程基于对Chrome DevTools通信流量的抓包分析，揭示了官方文档中未明确说明的配置细节。

2. 准备工作

2.1 启动Chrome远程调试

chrome.exe --remote-debugging-port=9222

2.2 安装必要工具

• Python环境
• pychrome库
• Wireshark（用于抓包分析）

3. 基础调试配置

3.1 基本Python调试代码框架

import pychrome

# 连接远程调试
remote_chrome = "http://127.0.0.1:9222"
browser = pychrome.Browser(url=remote_chrome)

# 新建标签页
tab = browser.new_tab()
tab.start()
tab.Page.enable()
tab.Debugger.enable()

def DebugPaused(**kw):
    with open("result.json","w", encoding="utf-8") as f:
        import json
        f.write(json.dumps(kw, indent=4))
    tab.Debugger.resume()

# 绑定调试函数
tab.Debugger.paused = DebugPaused

# 设置断点
tab.DOMDebugger.setXHRBreakpoint(url="")

# 打开网页
tab.Page.navigate(url="https://www.baidu.com/")

while True:
    input()

4. 问题分析

4.1 初始问题

• 官方文档未详细说明如何获取调用栈信息
• Debugger.paused事件返回结果中缺少StackTraceId
• 无法直接获取调用栈中的变量信息

4.2 解决方案

通过Wireshark抓包分析DevTools通信流量，复现DevTools中的操作。

5. 抓包分析流程

5.1 抓包步骤

1. 启动Wireshark，监听回环网卡
2. 过滤条件设置为websocket
3. 通过chrome://inspect进入远程调试界面
4. 添加XHR/fetch断点
5. 刷新网页并查看调用栈信息
6. 停止抓包并分析数据

5.2 关键数据包分析

• 通信内容包含三个字段：

  • id: 请求ID
  • method: 调用方法
  • params: 传入参数

• 响应包包含：

  • id: 对应请求ID
  • result: 方法执行结果

5.3 关键发现

1. 要使用某种类型的事件，必须先启用该类型的事件报告（如Network.enable）
2. Debugger.paused事件返回结果中的callFrames结构包含调用栈信息
3. 通过Runtime.getProperties方法可以获取变量信息

6. 调用栈变量获取实现

6.1 关键数据结构

• callFrames: 调用栈帧数组，按栈顶到栈底排序
  • callFrameId: 调用帧ID
  • scopeChain: 作用域链
    • type: 作用域类型（"local"为局部变量）
    • object: 包含objectId

6.2 改进后的代码实现

import pychrome

# 连接远程调试
remote_chrome = "http://127.0.0.1:9222"
browser = pychrome.Browser(url=remote_chrome)

# 新建标签页
tab = browser.new_tab()
tab.start()
tab.Page.enable()
tab.Debugger.enable()
tab.Runtime.enable()

# 关键配置添加
tab.Debugger.enable(maxScriptsCacheSize=10000000)
tab.Debugger.setAsyncCallStackDepth(maxDepth=50)

def GetObject(objectId):
    result = tab.Runtime.getProperties(
        objectId=objectId,
        ownProperties=False,
        accessorPropertiesOnly=False,
        generatePreview=True,
        nonIndexedPropertiesOnly=False,
    )
    return result["result"]

def DebugPaused(**kw):
    callFrames = kw.get("callFrames")
    result = dict()
    for callFrame in callFrames:
        result[callFrame["callFrameId"]] = dict()
        # 遍历每一个调用栈
        # 先获得范围内的变量集合
        scopeChain = callFrame["scopeChain"]
        for _vars in scopeChain:
            # 这里只获取局部变量
            if _vars["type"] == "local":
                _objectId = _vars["object"]["objectId"]
                _object = GetObject(_objectId)
                result[callFrame["callFrameId"]][_objectId] = _object
    
    with open("result.json", "w", encoding="utf-8") as f:
        import json
        f.write(json.dumps(kw, indent=4))
    with open("stack.json", "w", encoding="utf-8") as f:
        import json
        f.write(json.dumps(kw, indent=4))
    tab.Debugger.resume()

# 绑定调试函数
tab.Debugger.paused = DebugPaused

# 设置断点
tab.DOMDebugger.setXHRBreakpoint(url="")

# 打开网页
tab.Page.navigate(url="https://www.baidu.com/")

while True:
    input()

7. 关键配置说明

7.1 必须启用的服务

tab.Page.enable()      # 启用页面控制
tab.Debugger.enable()  # 启用调试器
tab.Runtime.enable()   # 启用运行时

7.2 获取异步调用栈

tab.Debugger.enable(maxScriptsCacheSize=10000000)
tab.Debugger.setAsyncCallStackDepth(maxDepth=50)

• maxScriptsCacheSize: 设置脚本缓存大小
• maxDepth: 设置异步调用栈的最大深度

8. 总结

1. 通过抓包分析可以复现DevTools中的操作
2. 调用栈变量信息可通过callFrames和Runtime.getProperties获取
3. 必须正确配置相关服务才能获取完整调试信息
4. 异步调用栈需要额外配置才能显示

9. 参考文档

• Chrome DevTools Protocol文档
• pychrome库文档
• Wireshark抓包分析技巧

通过本教程，您可以在没有详细文档的情况下，通过抓包分析实现Chrome远程调试的各种高级功能，特别是获取调用栈变量信息这一复杂操作。