结合chrome应用 + python调试api

codecodify

有时不想记录日志，只要调试一下线上的一些接口问题，就写了一个方便调试的扩展，原理是使用websocket接收消息并在浏览器中打印出来。websocket是使用python实现的，chrome是websocket客户端，并在python写了一个推送日志的接口，
效果如下：





python代码如下：

[Python] 纯文本查看 复制代码

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from pydantic import BaseModel
from typing import Dict, List

app: FastAPI = FastAPI()


class WebSocketClient:
    websocket: WebSocket

    def __init__(self, websocket: WebSocket):
        self.websocket = websocket


class BroadcastMessage(BaseModel):
    """
        客户端传过来的消息
     """
    type: str # 消息类型，对应前端的console对象
    content: str # 消息内容
    css: str = None # css样式,可以自定义颜色显示


# 全局字典，键名为客户端id，值为 WebSocketClient 对象列表
clients: Dict[str, List[WebSocketClient]] = {}


@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: str = ''):
    await websocket.accept()

    if client_id not in clients:
        clients[client_id] = []

    clients[client_id].append(WebSocketClient(websocket=websocket))

    try:
        while True:
            data = await websocket.receive()
            if data.get('type') == 'websocket.disconnect':
                print('断开连接')
                # 客户端发送了断开连接消息，删除该客户端
                clients[client_id] = [client for client in clients[client_id] if client.websocket != websocket]
                if not clients[client_id]:
                    del clients[client_id]
                return
    except WebSocketDisconnect:
        # 移除断开连接的 websocket 对象
        clients[client_id] = [client for client in clients[client_id] if client.websocket != websocket]
        if not clients[client_id]:
            del clients[client_id]


@app.post("/broadcast/{client_id}")
async def broadcast_message(message: BroadcastMessage, client_id: str = ''):
    if client_id in clients:
        for client in clients[client_id]:
            try:
                await client.websocket.send_json(message.model_dump_json())
            except WebSocketDisconnect:
                # 如果发送失败，移除断开连接的 websocket 对象
                clients[client_id] = [c for c in clients[client_id] if c.websocket != client.websocket]
                if not clients[client_id]:
                    del clients[client_id]

    return {"status": "message sent"}


if __name__ == "__main__":
    import uvicorn

    uvicorn.run(app, host="0.0.0.0", port=8000)

第一次写chrome扩展，感觉跟开发小程序差不多，只要会js，参考官方文档就可以了，就是manifest_version的版本区别有点大，目前代码有的是3版本，2的版本要废弃了。如果是自己使用的话，那么可以在浏览器把源码包导入进去，要分享给别人使用需要上架到应用市场。
chrome源码里有一个log.js，有兴趣大家可以扩展一下，可以把日志存储到缓存里，再写一个页面读取出来方便搜索。

[JavaScript] 纯文本查看 复制代码

chrome.runtime.onMessage.addListener(
    function(logs) {
        logs = typeof logs === 'string' ? JSON.parse(logs) : logs;
        // console.debug(logs);
        if ("object" != typeof logs) {
            return;
        }
        // 目前服务器只返回一个对象类型
        const log = logs;
        if (console[log.type]) {
            if (log.css) {
                console[log.type]("%c" + log.content, log.css);
            } else {
                console[log.type](log.content);
            }

            if ("alert" === log.type) {
                alert(log.content);
            }
            return;
        }

        console.error("SocketLog type error, ", logs);
        // alert("SocketLog type error, ");
    }
);

kings0b

感谢分享学习一下

不负韶华

有什么应用场景吗

BTFKM

浏览器调试太难了 还没有ide, 我可能会再用python写一个客户端, 不过嵌入浏览器里就是UI省事, 直接启动网页

fanliansuo1

学习，学习

anning666

楼主提供了很好的学习思路

fanliansuo1

谢谢分享，顶一下

codecodify

不负韶华 发表于 2024-8-5 14:17
有什么应用场景吗

调试用的，比如想排查小程序或公众号里的错误。调试有很多种方式，觉得自己方便就行了

fanliansuo1

顶顶顶，顶顶顶