@lcap/nasl 0.3.9 → 0.3.10-beta

package/src/types/logic/Debugger.ts

@@ -0,0 +1,1140 @@
+const { io } = require('socket.io-client');
+import { Vertex, View, App, Logic, BreakPoint, EventEmitter, vertexsMap, LogicItem, LogicNode, Variable, ViewVariable, Param, ViewParam, Return, FrontEndsourceMap } from '..';
+import { createSocketClient, breakpointService, sourceMapService } from '../../service/debugger/debugger';
+
+const LOGIC_BRANCH = ['IfStatement', 'WhileStatement', 'SwitchStatement', 'ForEachStatement'];
+const parentAttrRoot = [undefined, 'consequent', 'alternate', 'cases'];
+function getScopeVariableNames(node: Logic): {
+    variables: Array<string>,
+    params: Array<string>,
+    returns: Array<string>,
+} {
+    let variables: Array<Variable|ViewVariable> = [];
+    let params: Array<Param|ViewParam> = [];
+    let returns: Array<Return> = [];
+    if (node?.view) {
+        variables = [...node.view.$def.variables];
+        params = [...node.view.$def.params];
+    }
+
+    if (node) {
+        variables = [...variables, ...node.variables];
+        params = [...params, ...node.params];
+        returns = [...returns, ...node.returns];
+    }
+
+    return {
+        variables: variables.map((v) => v.name),
+        params: params.map((p) => p.name),
+        returns: returns.map((r) => r.name),
+    };
+}
+interface ScopeValue {
+    name: string,
+    result: {
+        type: string,
+        value: unknown,
+    }
+}
+function matchVariableValue(names: Array<string>, originData: {
+    [key: string]: unknown
+}) {
+    return names.map((n) => {
+        const value = originData[n];
+        const type = typeof value;
+        return {
+            name: n,
+            result: {
+                type,
+                value,
+            },
+        };
+    });
+}
+interface middleBreakPoint {
+    componentId: string,
+    line: number,
+    isTemporary: boolean,
+    type: string,
+}
+
+function resolveFrontEndTarget(componentId: string, lineNumber: number) {
+    const view = Vertex.getVertexByRef(componentId) as View;
+    const sourceMap = view.sourceMap;
+
+    const targets = Object.values(sourceMap).filter((m) => {
+        if (m.node?.type === 'JSBlock')
+            return lineNumber >= m.from && lineNumber <= m.to;
+        else
+            return lineNumber === m.from;
+    });
+    // const arr = targets.map((item) => vertexsMap.get(item.vertexId));
+    //     let target;
+    //     for (let i = 0; i < arr.length; i++) {
+    //         if (!arr[i] || arr.includes(arr[i].parent)) {
+    //             continue;
+    //         }
+    //         target = targets[i];
+    //         break;
+    //     }
+    //     return {
+    //         ...target,
+    //         node: Vertex.getVertexByRef(target.vertexId),
+    //     };
+    let target;
+    const arr = targets.map((item) => vertexsMap.get(item.node.id) as LogicItem);
+    for (let i = 0; i < arr.length; i++) {
+        if (!arr[i] || arr.includes(arr[i].parent))
+            continue;
+
+        target = targets[i];
+    }
+    if (!target) {
+        return null;
+    }
+    return {
+        ...target,
+        node: Vertex.getVertexByRef(target.node.id) as LogicItem,
+    };
+}
+
+interface cf {
+    componentId: string,
+    callFrameId: number,
+    line: number,
+    invokeLocation: {
+        line: number,
+        componentId: string
+    }
+}
+interface backcf {
+    className: string,
+    lineNumber: number,
+}
+interface sourceMapFrontObj{
+    isLogic: boolean,
+    node: LogicItem,
+    from: number,
+    to: number,
+}
+interface CallFrame{
+    target: {
+        node: LogicItem | Logic | sourceMapFrontObj,
+    },
+    invokeItem: LogicItem,
+    callFrameId: number,
+    className: string,
+    lineNumber: number,
+}
+
+
+function resolveFrontEndCallFrame(callFrames: Array<cf>, currentBreakTarget: sourceMapFrontObj): Array<Partial<CallFrame> | Partial<cf>> {
+    const functionStack = callFrames.map((cf) => {
+        const view = Vertex.getVertexByRef(cf.componentId) as View;
+        const sourceMap = view.sourceMap;
+        const target = Object.values(sourceMap).find((m) => cf.line >= m.from && cf.line <= m.to && m.isLogic);
+
+        // const viewInvoke = Vertex.getVertexByRef(cf.componentId);
+        // const sourceMapInvoke = view.sourceMap;
+        const invokeItem = Object.values(sourceMap).find((m) => m.from === cf.invokeLocation.line && m.node.type === 'CallLogic');
+
+        return {
+            ...cf,
+            target,
+            invokeItem,
+        };
+    });
+
+    return [{
+        target: currentBreakTarget,
+    }, ...functionStack];
+}
+
+function resolveCallFrameSimple(callFrames: Array<Partial<cf>>) : Array<Partial<CallFrame> | Partial<cf> | Partial<backcf>> {
+    return callFrames.map((cf) => {
+        const view = Vertex.getVertexByRef(cf.componentId) as View;
+        const sourceMap = view.sourceMap;
+        // const target = Object.values(sourceMap).find((m) => cf.line >= m.from && cf.line <= m.to && m.isLogic);
+        const target = Object.values(sourceMap).find((m) => m.from === cf.line && m.node.type === 'CallLogic');
+        return {
+            ...cf,
+            target,
+        };
+    });
+}
+class SocketEvent extends EventEmitter {
+    public app: App;
+    public debuggerClient: any = null;
+
+    // emitSocket(eventName: string, payload: any) {
+    //     this.debuggerClient.emit('debug', {
+    //         event: eventName,
+    //         payload,
+    //     });
+    // }
+
+    emitSocket(payload: any) {
+        this.debuggerClient.emit('debug', payload);
+    }
+}
+interface FrontEndResponsePayload {
+    code: number,
+    data: {
+        result: {
+            value: unknown
+        },
+        sourceCodeId: string,
+        id: string,
+        breakpointId: string,
+        requestId: string,
+        callFramesResolved: Array<cf>,
+        location: {
+            componentId: string,
+            line: number,
+        }
+    },
+}
+interface FrontEndResponse {
+    event: string,
+    payload: FrontEndResponsePayload
+}
+const FrontEndProtocol = {
+    setbreakpoint(bp: BreakPoint) {
+        return {
+            target: 'Frontend',
+            event: 'setbreakpoint',
+            payload: {
+                componentId: bp.componentId,
+                line: bp.lineNumberStart,
+                id: bp._uuid,
+                isTemporary: bp.isTemporary,
+            },
+        };
+    },
+    removeBreakpoint(bp: BreakPoint) {
+        return {
+            target: 'Frontend',
+            event: 'removeBreakpoint',
+            payload: {
+                breakpointId: bp.remoteBreakpointId,
+                id: bp._uuid,
+            },
+        };
+    },
+    breakPointReceived() {
+        return {
+            target: 'Frontend',
+            event: 'breakPointReceived',
+        };
+    },
+    step(posibleBps: Array<middleBreakPoint>) {
+        return {
+            target: 'Frontend',
+            event: 'step',
+            payload: {
+                posibleBps,
+            },
+        };
+    },
+    resume() {
+        return {
+            target: 'Frontend',
+            event: 'resume',
+        };
+    },
+
+    normalizeResponse(data: FrontEndResponse) {
+        if (data.event) {
+            return {
+                event: data.event,
+                payload: data.payload,
+                source: 'Frontend',
+            };
+        }
+        return null;
+    },
+    evaluatescope(payload: {
+        callFrameId: number,
+        variables: Array<string>,
+        params: Array<string>,
+        returns: Array<string>,
+    }) {
+        return {
+            target: 'Frontend',
+            event: 'evaluatescope',
+            payload,
+        };
+    },
+
+    evaluate(payload: {
+        callFrameId: number,
+        expression: string,
+    }) {
+        return {
+            target: 'Frontend',
+            event: 'evaluate',
+            payload,
+        };
+    },
+};
+interface BackendResponseData {
+    status: string,
+    name: string,
+    threadId: string,
+    requestId: string,
+    className: string,
+    lineNumber: number,
+    stackFrames: { className: string, lineNumber: number }[],
+    variables: { [key: string]: unknown },
+}
+interface BackEndResponse {
+    type: string,
+    message: string,
+    data: BackendResponseData,
+}
+
+interface BackendSourceMapResponse {
+    vertexMap: {
+        [id: string]: {
+            classIdentify: string,
+            from: number,
+            lineFrom: number,
+            end: number,
+            vertexId: string,
+        }
+    },
+    logicIdClassMap: {
+        [id: string]: string
+    },
+    classLogicIdMap: {
+        [id: string]: string
+    }
+}
+const BackEndProtocol = {
+    setbreakpoint(bp: BreakPoint) {
+        return {
+            target: 'Backend',
+            operation: {
+                appId: bp.appId,
+                className: bp.classIdentify,
+                lineNumber: bp.lineNumberStart,
+                eventType: 'BREAKPOINT',
+                breakpointStatus: 'ENABLED',
+            },
+        };
+    },
+
+    removeBreakpoint(bp: BreakPoint) {
+        return {
+            target: 'Backend',
+            operation: {
+                appId: bp.appId,
+                className: bp.classIdentify,
+                lineNumber: bp.lineNumberStart,
+                eventType: 'BREAKPOINT',
+                breakpointStatus: 'DELETED',
+            },
+        };
+    },
+    resume(appid: string, threadId: string) {
+        return {
+            target: 'Backend',
+            operation: {
+                appId: appid,
+                eventType: 'RESUME',
+                threadId,
+            },
+        };
+    },
+    step(appid: string, threadId: string) {
+        return {
+            target: 'Backend',
+            operation: {
+                appId: appid,
+                eventType: 'STEP_OVER',
+                threadId,
+            },
+        };
+    },
+    normalizeResponse(data: BackEndResponse) {
+        switch (data.type) {
+            case 'DebugInfo':
+                return {
+                    event: 'paused',
+                    payload: data.data,
+                    source: 'Backend',
+                };
+            case 'ConnectionInfo':
+                return {
+                    event: 'connection',
+                    payload: data.data,
+                    source: 'Backend',
+                };
+            case 'ExceptionInfo':
+                return {
+                    event: 'exception',
+                    payload: data.message,
+                    source: 'Backend',
+                };
+
+            default:
+                return null;
+        }
+    },
+};
+
+interface Thread {
+    id: string,
+    requestId: string,
+    frontendStack: Array<Partial<cf>>;
+    callFrameId: number;
+    breakPoint: BreakPoint;
+    evaluateValue: {[id:string]: unknown};
+    callFrames: Array<Partial<CallFrame>>;
+    callFrameScope: Array<{
+        variables: Array<ScopeValue>,
+        params: Array<ScopeValue>,
+        returns: Array<ScopeValue>,
+    }>;
+    evaluateExpression: string,
+}
+export class Debugger extends EventEmitter {
+    public app: App;
+    public debuggerClient: any = null;
+    public currentThread: Partial<Thread> = null;
+    public threads: Array<Partial<Thread>> = [];
+    public currentFrontEndThread: Thread = null;
+
+    // 以下为前端单独使用的断点状态，断点状态唯一
+
+    public socketEventEmitter: SocketEvent;
+
+    public frontendConnection: boolean = false;
+    public backendConnection: boolean = false;
+    public ideConnection: boolean = false;
+
+    public breakPoints: Array<BreakPoint> = [];
+    public temporaryBreakPoint: BreakPoint = null;
+    private temporaryBreakPointTriggered = false;
+
+    public logicIdClassMap: {[id: string]: string} = {};
+    public classLogicIdMap: {[id: string]: string} = {};
+
+    public booting: boolean = false;
+
+    public temporaryLogicCallStack: {
+        callFramesResolved: Array<Partial<cf>>
+    }; // 把临时的调用栈缓存起来，后端调用逻辑断点时，做调用栈拼接
+
+    get isConnected() {
+        // return this.frontendConnection;
+        // return this.backendConnection;
+        return this.frontendConnection && this.backendConnection;
+    }
+
+    get isBreak() {
+        return (this.currentThread && this.currentThread.breakPoint);
+    }
+
+    get isInFrontendThread() {
+        return this.currentFrontEndThread === this.currentThread;
+    }
+
+    constructor() {
+        super();
+        this.on('backendConnected', this.onConnectionEnd.bind(this));
+        this.on('frontendConnected', this.onConnectionEnd.bind(this));
+    }
+
+    public async closeConnect() {
+        if (this.debuggerClient) {
+            await new Promise((resolve) => {
+                this.debuggerClient.on('disconnect', (reason: string) => {
+                    if (reason === 'io client disconnect') {
+                        this.debuggerClient = null;
+                        this.frontendConnection = false;
+                        this.backendConnection = false;
+                        this.ideConnection = false;
+                        resolve('closed');
+                    }
+                });
+                this.debuggerClient.disconnect();
+            });
+        }
+    }
+
+    public async boot() {
+        try {
+            if (this.debuggerClient) {
+                return;
+            }
+            this.ideConnection = false;
+            this.debuggerClient = await createSocketClient(this.app.appId);
+            this.ideConnection = true;
+            this.socketEventEmitter = new SocketEvent();
+            this.socketEventEmitter.debuggerClient = this.debuggerClient;
+            // this.debuggerClient.emit('debug', { source: 'ide' });
+
+            this.debuggerClient.on('debug', (data: FrontEndResponse | BackEndResponse) => {
+                if (typeof data === 'object') {
+                    const {
+                        event,
+                        payload,
+                        source,
+                    } = FrontEndProtocol.normalizeResponse(data as FrontEndResponse) || BackEndProtocol.normalizeResponse(data as BackEndResponse);
+                    this.socketEventEmitter.emit(event, payload, source);
+                }
+            });
+            this.socketEventEmitter.on('getBreakPoint', this.onFetchBreakPoint.bind(this));
+            this.socketEventEmitter.on('connection', this.onConnection.bind(this));
+
+            this.socketEventEmitter.on('breakpointsettle', this.onBreakPointSettle.bind(this));
+
+            this.socketEventEmitter.on('removeBreakpointsettle', this.onRemoveBreakpointsettle.bind(this));
+
+            this.socketEventEmitter.on('paused', this.onPaused.bind(this));
+
+            this.socketEventEmitter.on('evaluateresult', this.onEvaluateResult.bind(this));
+
+            this.socketEventEmitter.on('evaluatescoperesult', ({ code, data }) => {
+                if (code !== 200) {
+                    return;
+                }
+                // const result = data.result.value;
+                this.currentFrontEndThread.callFrameScope = data;
+            });
+            this.socketEventEmitter.on('logictrace', this.onLogicTrace.bind(this));
+            this.socketEventEmitter.on('logictraceend', this.onLogicTraceEnd.bind(this));
+            this.socketEventEmitter.on('exception', this.onBackEndException.bind(this));
+        } catch (err) {
+            console.error(err);
+            throw '连接失败';
+        }
+    }
+    /*combineCallFrameScope(data) {
+        const {
+            variables,
+            params,
+            returns,
+        } = data;
+
+        const {
+            variables: currVariable,
+            params: currParams,
+            returns: currReturns,
+        } = this.currentCallFrameScope;
+        function comparePart(part, oldpart) {
+            const list
+            = part.forEach(({ name, result }) => {
+                if (result.subtype === 'error') {
+                    return oldpart.find((v) => v.name === name);
+                }
+            });
+        }
+    }*/
+
+    resetState() {
+        this.currentThread = null;
+        this.threads = [];
+        this.currentFrontEndThread = null;
+        this.temporaryBreakPoint = null;
+        this.temporaryBreakPointTriggered = false;
+    }
+
+    async onFetchBreakPoint(data: Partial<FrontEndResponsePayload>) {
+        const componentId = data.data.sourceCodeId;
+        const promises: Array<Promise<BreakPoint>> = [];
+        this.breakPoints.forEach((bp) => {
+            if (bp.status === 'Enabled' && bp.componentId === componentId) {
+                const attachResult = bp.attachSourceMap();
+                if (attachResult) {
+                    promises.push(this.setRemoteBreakPointRoundTrip(bp));
+                }
+            }
+        });
+        await Promise.all(promises);
+        this.socketEventEmitter.emitSocket(FrontEndProtocol.breakPointReceived());
+    }
+
+    onBreakPointSettle(data: Partial<FrontEndResponsePayload>) {
+        // if(!data.data || !data.data.id) {
+        //     bp.emit('bpsettled', false);
+        //     return;
+        // }
+        const bpid = data.data.id;
+        const bp = this.breakPoints.find((bp) => bp._uuid === bpid) || this.temporaryBreakPoint;
+        if (data.code !== 200) {
+            bp.emit('bpsettled', false);
+            return;
+        }
+        if (bp) {
+            bp.remoteBreakpointId = data.data.breakpointId;
+            bp.emit('bpsettled', true);
+        }
+    }
+    onRemoveBreakpointsettle(data: FrontEndResponsePayload) {
+        const bpid = data.data.id;
+        const bp = this.breakPoints.find((bp) => bp._uuid === bpid);
+        bp.emit('bpremoved');
+    }
+
+    async onConnection(data: Partial<FrontEndResponsePayload> | Partial<BackendResponseData>, source: string) {
+        if (source === 'Frontend') {
+            this.onFrontEndConnection(data as Partial<FrontEndResponsePayload>);
+        }
+        if (source === 'Backend') {
+            await this.onBackEndConnection(data as Partial<BackendResponseData>);
+        }
+    }
+
+    onFrontEndConnection(data: Partial<FrontEndResponsePayload>) {
+        if (data.code === 200) {
+            this.frontendConnection = true;
+
+            const currentRequestId = data.data.requestId;
+            const idx = this.threads.findIndex((t) => t === this.currentFrontEndThread);
+            ~idx && this.threads.splice(idx, 1);
+            this.currentFrontEndThread = {
+                id: null,
+                requestId: currentRequestId,
+                frontendStack: null,
+                callFrameId: null,
+                breakPoint: null,
+                evaluateExpression: null,
+                evaluateValue: null,
+                callFrames: null,
+                callFrameScope: null,
+            };
+            this.threads.unshift(this.currentFrontEndThread);
+            this.emit('frontendConnected');
+        } else {
+            this.frontendConnection = false;
+            this.emit('frontendConnectionFailed');
+        }
+    }
+
+    async onBackEndConnection(data: Partial<BackendResponseData>) {
+        if (data.status === 'Connected') {
+            await this.loadBackEndSourceMap();
+            this.backendConnection = true;
+            this.emit('backendConnected');
+        } else {
+            if (data.name === 'Frontend') {
+                this.frontendConnection = false;
+                this.emit('frontendConnectionFailed');
+            } else {
+                this.backendConnection = false;
+                this.emit('backendConnectionFailed');
+            }
+        }
+    }
+
+    async loadBackEndSourceMap() {
+        const response = await sourceMapService.getSourceMap({
+            query: {
+                appId: this.app.firstMicroService.id,
+            },
+        }) as BackendSourceMapResponse;
+        const {
+            vertexMap,
+            logicIdClassMap,
+            classLogicIdMap,
+        } = response;
+        this.logicIdClassMap = logicIdClassMap || {};
+        this.classLogicIdMap = classLogicIdMap || {};
+        const map = Object.values(vertexMap || {});
+        Object.keys(this.logicIdClassMap).forEach((logicId) => {
+            const classname = this.logicIdClassMap[logicId];
+            const logic = Vertex.getVertexByRef(logicId) as Logic;
+            const sourcemap: {
+                [id: string]: {
+                    classIdentify: string,
+                    from: number,
+                    lineFrom: number,
+                    end: number
+                }
+            } = {};
+            map.forEach((m) => {
+                if (m.classIdentify === classname) {
+                    sourcemap[m.vertexId] = m;
+                }
+            });
+            logic.sourceMap = sourcemap;
+        });
+    }
+
+    onConnectionEnd() {
+        // if (this.isConnected) {
+        //     this.breakPoints.forEach((bp) => {
+        //         if (bp.status === 'Enabled') {
+        //             const attachResult = bp.attachSourceMap();
+        //             if (attachResult) {
+        //                 this.setRemoteBreakPointRoundTrip(bp);
+        //             }
+        //         }
+        //     });
+        // }
+    }
+
+    onLogicTrace(data: Partial<FrontEndResponsePayload>) {
+        this.temporaryLogicCallStack = data.data;
+    }
+
+    onLogicTraceEnd() {
+        // 跳出后端逻辑
+        this.currentFrontEndThread.frontendStack = null;
+        this.currentFrontEndThread.id = null;
+    }
+
+    onPaused(data: Partial<FrontEndResponsePayload> | Partial<BackendResponseData>, source: string) {
+        if (source === 'Frontend') {
+            this.onFrontEndPaused(data as Partial<FrontEndResponsePayload>);
+        }
+        if (source === 'Backend') {
+            this.onBackEndPaused(data as Partial<BackendResponseData>);
+        }
+    }
+
+    onFrontEndPaused({ code, data }: Partial<FrontEndResponsePayload>) {
+        if (code !== 200) {
+            return;
+        }
+        // const requestId = data.requestId;
+        const location = data.location;
+        // const isTemporaryBreakPoint = data.isTemporaryBreakPoint;
+        // const callFrames = data.payload.callFrames;
+
+        const target = resolveFrontEndTarget(location.componentId, location.line);
+        // const view = Vertex.getVertexByRef(location.componentId);
+        // const sourceMap = view.sourceMap;
+        // const targets = Object.values(sourceMap).filter((m) => {
+        //     if (m.node?.type === 'JSBlock')
+        //         return location.line >= m.from && location.line <= m.to;
+        //     else
+        //         return location.line === m.from && m.node?.level === 'logicNode';
+        // });
+        // function getTarget(targets) {
+        //     const arr = targets.map((item) => vertexsMap.get(item.node.id));
+        //     for (let i = 0; i < arr.length; i++) {
+        //         if (!arr[i] || arr.includes(arr[i].parent))
+        //             continue;
+
+        //         return targets[i];
+        //     }
+        // }
+        // const target = getTarget(targets);
+        if (target) {
+            const currentFrontEndThread = this.currentFrontEndThread;
+            const logicItem = target.node;
+
+            let breakPoint = logicItem.getBreakPointByLineNumber(location.line);
+            if (!breakPoint) {
+                breakPoint = logicItem.addTemperaryBreakPoint();
+                this.temporaryBreakPoint = breakPoint;
+                this.temporaryBreakPointTriggered = true;
+            }
+            currentFrontEndThread.breakPoint = breakPoint;// isTemporaryBreakPoint ? this.temporaryBreakPoint : ;
+
+            const callframes = resolveFrontEndCallFrame(data.callFramesResolved, target);
+            currentFrontEndThread.callFrames = callframes;
+            const currentCallFrame = callframes[1];
+            const logic = logicItem.logic;
+            const frameVariables = getScopeVariableNames(logic);
+            this.socketEventEmitter.emitSocket(FrontEndProtocol.evaluatescope(Object.assign({}, frameVariables, {
+                callFrameId: currentCallFrame.callFrameId,
+            })));
+            currentFrontEndThread.callFrameId = currentCallFrame.callFrameId;
+
+            logicItem.folded = false;
+            this.app.emit('openLogicItem', logicItem);
+            this.app.emit('openDebugger');
+            this.currentThread = currentFrontEndThread;
+        }
+    }
+
+    async resolveBackEndTarget(className: string, lineNumber: number) {
+        const logicId = this.classLogicIdMap[className];
+        const logic = Vertex.getVertexByRef(logicId) as Logic;
+
+        const sourceMap = logic.sourceMap;
+        const targets = Object.values(sourceMap).filter((m) => lineNumber === m.lineFrom);
+        const arr = await Promise.all(targets.map(async (item) => {
+            const p = vertexsMap.get(item.vertexId) as LogicItem;
+            if (!p) {
+                const logic = Vertex.getVertexByRef(item.logicId) as Logic;
+                await logic.load();
+                return vertexsMap.get(item.vertexId) as LogicItem;
+            }
+            return p;
+        }));
+        let target;
+        for (let i = 0; i < arr.length; i++) {
+            if (!arr[i] || arr.includes(arr[i].parent)) {
+                continue;
+            }
+            target = targets[i];
+            break;
+        }
+        return {
+            ...target,
+            node: Vertex.getVertexByRef(target.vertexId) as LogicItem,
+        };
+    }
+
+    async onBackEndPaused(data: Partial<BackendResponseData>) {
+        const {
+            threadId,
+            requestId: backReqId,
+            className,
+            lineNumber,
+            stackFrames,
+            variables,
+        } = data;
+
+        const target = await this.resolveBackEndTarget(className, lineNumber);
+        if (target) {
+            const logicItem = Vertex.getVertexByRef(target.vertexId) as LogicItem;
+            let breakPoint = logicItem.getBreakPointByLineNumber(lineNumber);
+            if (!breakPoint) {
+                breakPoint = logicItem.addTemperaryBreakPoint();
+                this.temporaryBreakPoint = breakPoint;
+                this.temporaryBreakPointTriggered = true;
+            }
+
+            let threadCurrent;
+            if (this.currentFrontEndThread.requestId === backReqId) {
+                threadCurrent = this.currentFrontEndThread;
+                if (threadCurrent.id !== threadId) {
+                    Object.assign(this.currentFrontEndThread, {
+                        id: threadId,
+                        frontendStack: this.temporaryLogicCallStack?.callFramesResolved,
+                    });
+                }
+            } else {
+                threadCurrent = this.threads.find((t) => t.id === threadId);
+                if (!threadCurrent) {
+                    threadCurrent = {
+                        id: threadId,
+                        frontendStack: null,
+                        breakPoint: null,
+                        evaluateValue: null,
+                        callFrames: null,
+                        callFrameScope: null,
+                    };
+                    this.threads.push(threadCurrent);
+                }
+            }
+
+            // TODO resolve frames and scope
+            let callFrames: Array<Partial<CallFrame>> = await Promise.all(stackFrames.map(async (cf) => {
+                const {
+                    className,
+                    lineNumber,
+                } = cf;
+                const target = await this.resolveBackEndTarget(className, lineNumber);
+                return {
+                    ...cf,
+                    target,
+                };
+            }));
+            const frontendStack = threadCurrent.frontendStack;
+            if (frontendStack) {
+                callFrames = callFrames.concat(resolveCallFrameSimple(frontendStack));
+            }
+            const logic = logicItem.logic;
+            const frameVariables = getScopeVariableNames(logic);
+
+            const callFrameScope = {
+                variables: matchVariableValue(frameVariables.variables, variables),
+                params: matchVariableValue(frameVariables.params, variables),
+                returns: matchVariableValue(frameVariables.returns, variables),
+            };
+
+            Object.assign(threadCurrent, {
+                breakPoint,
+                evaluateValue: null,
+                callFrames,
+                callFrameScope,
+            });
+            this.currentThread = threadCurrent;
+
+            this.app.emit('openLogicItem', logicItem);
+            this.app.emit('openDebugger');
+        }
+    }
+
+    onBackEndException(data: BackendResponseData) {
+
+    }
+
+    onEvaluateResult({ code, data }: FrontEndResponsePayload) {
+        if (code !== 200) {
+            return;
+        }
+        const result = data.result.value;
+        const currentFrontEndThread = this.currentFrontEndThread;
+        currentFrontEndThread.evaluateValue = {
+            [currentFrontEndThread.evaluateExpression]: result,
+        };
+    }
+
+    evaluateExpression(expression: string) {
+        const currentFrontEndThread = this.currentFrontEndThread;
+        currentFrontEndThread.evaluateExpression = expression;
+        this.socketEventEmitter.emitSocket(FrontEndProtocol.evaluate({
+            callFrameId: currentFrontEndThread.callFrameId,
+            expression,
+        }));
+    }
+
+    async setRemoteBreakPoint(bp: BreakPoint) {
+        if (bp.isTemporary) {
+            this.temporaryBreakPoint = bp;
+        }
+        await this.setRemoteBreakPointRoundTrip(bp);
+    }
+
+    async removeAllBreakPoint() {
+        await breakpointService.removeAllBreakPoints({
+            query: {
+                appId: this.app.id,
+            },
+        });
+
+        await Promise.all(this.breakPoints.map(async (bp) => {
+            if (this.isConnected) {
+                await this.removeRemoteBreakPointRoundTrip(bp);
+            }
+            bp.removeOnLogicItem();
+        }));
+
+        this.breakPoints = [];
+    }
+
+    async enableAllBreakPoint() {
+        await breakpointService.updateAllBreakPointState({
+            query: {
+                appId: this.app.id,
+                status: 'Enabled',
+            },
+        });
+
+        await Promise.all(this.breakPoints.map(async (bp) => {
+            if (this.isConnected && bp.status === 'Disabled') {
+                await this.setRemoteBreakPointRoundTrip(bp);
+            }
+            bp.status = 'Enabled';
+        }));
+    }
+
+    async disableAllBreakPoint() {
+        await breakpointService.updateAllBreakPointState({
+            query: {
+                appId: this.app.id,
+                status: 'Disabled',
+            },
+        });
+
+        await Promise.all(this.breakPoints.map(async (bp) => {
+            if (this.isConnected && bp.status === 'Enabled') {
+                await this.removeRemoteBreakPointRoundTrip(bp);
+            }
+            bp.status = 'Disabled';
+        }));
+    }
+
+    async removeRemoteBreakPoint(bp: BreakPoint) {
+        const index = this.breakPoints.findIndex((b) => b === bp);
+        if (index !== -1) {
+            if (this.isConnected) {
+                await this.removeRemoteBreakPointRoundTrip(bp);
+            }
+            this.breakPoints.splice(index, 1);
+        }
+    }
+
+    async removeRemoteBreakPointRoundTrip(bp: BreakPoint) {
+        await new Promise((resolve) => {
+            let payload;
+            if (bp.target === 'Frontend') {
+                payload = FrontEndProtocol.removeBreakpoint(bp);
+                bp.once('bpremoved', () => {
+                    resolve(bp);
+                });
+            }
+            if (bp.target === 'Backend') {
+                payload = BackEndProtocol.removeBreakpoint(bp);
+                resolve(bp);
+            }
+
+            this.socketEventEmitter.emitSocket(payload);
+        });
+    }
+
+    async setRemoteBreakPointRoundTrip(bp: BreakPoint) {
+        const result = await new Promise<BreakPoint>((resolve) => {
+            let payload;
+            if (bp.target === 'Frontend') {
+                payload = FrontEndProtocol.setbreakpoint(bp);
+                bp.once('bpsettled', () => {
+                    resolve(bp);
+                });
+            }
+            if (bp.target === 'Backend') {
+                payload = BackEndProtocol.setbreakpoint(bp);
+                resolve(bp);
+            }
+            this.socketEventEmitter.emitSocket(payload);
+        });
+        return result;
+    }
+
+    async step() {
+        if (!this.isBreak) {
+            return;
+        }
+        this.resetTemporaryBreakPoint();
+        if (this.currentThread) {
+            // 后端
+            if (this.currentThread === this.currentFrontEndThread && !this.currentThread.id) {
+                const thread = this.currentThread;
+                const logicitem = thread.breakPoint.logicItem;
+                const logic = logicitem.logic;
+                const componentId = logic.view.id;
+                const sourceMap = logic.view.sourceMap;
+                const breakpointTemporary: Array<middleBreakPoint> = [];
+                function addBp(logicItem: LogicItem) {
+                    breakpointTemporary.push({
+                        componentId,
+                        line: sourceMap[logicItem.id].from,
+                        isTemporary: true,
+                        type: logicitem.type,
+                    });
+                }
+                function searchLogicItemPosibleBreakPoint(logicItem: LogicNode) {
+                    const type = logicItem.type;
+                    if (logicItem.level !== 'logicNode') {
+                        return;
+                    }
+                    if (LOGIC_BRANCH.includes(type)) {
+                        if (type === 'IfStatement') {
+                            addBp(logicItem);
+                            (logicItem.consequent || []).forEach(searchLogicItemPosibleBreakPoint);
+                            (logicItem.alternate || []).forEach(searchLogicItemPosibleBreakPoint);
+                        }
+                        if (type === 'WhileStatement') {
+                            addBp(logicItem);
+                            (logicItem.body || []).forEach(searchLogicItemPosibleBreakPoint);
+                        }
+                        if (type === 'SwitchStatement') {
+                            addBp(logicItem);
+                            const l = (logicItem.cases || []).length - 1;
+                            (logicItem.cases || []).forEach((c: LogicNode, idx: number) => {
+                                if (idx !== l) {
+                                    searchLogicItemPosibleBreakPoint(c);
+                                }
+                                (c.consequent || []).forEach(searchLogicItemPosibleBreakPoint);
+                                (c.alternate || []).forEach(searchLogicItemPosibleBreakPoint);
+                            });
+                        }
+                        if (type === 'ForEachStatement') {
+                            addBp(logicItem);
+                            (logicItem.body || []).forEach(searchLogicItemPosibleBreakPoint);
+                        }
+                    } else {
+                        if (logicItem.hasBreakPoint && logicItem.breakPoint && logicItem.breakPoint.status === 'Enabled') {
+                            return;
+                        }
+                        addBp(logicItem);
+                    }
+                }
+                logic.body.forEach(searchLogicItemPosibleBreakPoint);
+                this.socketEventEmitter.emitSocket(FrontEndProtocol.step(breakpointTemporary));
+                // const index = logicitem.logic.body.findIndex((l) => l === logicitem);
+                // const nextLogicItem = logicitem.logic.body[index + 1];
+                // if (nextLogicItem && nextLogicItem.type !== 'End') {
+                //     const breakPoint = nextLogicItem.addTemperaryBreakPoint();
+                //     await this.setRemoteBreakPoint(breakPoint);
+                //     this.resume();
+                // }
+            } else {
+                this.socketEventEmitter.emitSocket(BackEndProtocol.step(this.app.id, this.currentThread.id));
+            }
+        }
+    }
+
+    async stepInto() {
+        // TODO
+        // if (!this.currentBreakPoint) {
+        //     return;
+        // }
+        // this.resetTemporaryBreakPoint();
+        // const logicitem = this.currentBreakPoint.logicItem;
+        // if (logicitem.type === 'CallLogic' && logicitem.callee) {
+        //     const logicId = logicitem.callee.split('/').pop();
+        //     const logic = Vertex.getVertexByRef(logicId);
+        //     const logicItem = logic.body[1];
+        //     const breakPoint = logicItem.addTemperaryBreakPoint();
+        //     await this.setRemoteBreakPoint(breakPoint);
+        //     this.resume();
+        // }
+    }
+
+    async stepOut() {
+        // TODO
+        // if (!this.currentBreakPoint) {
+        //     return;
+        // }
+        // if (this.currentCallFrames.length < 2) {
+        //     return;
+        // }
+        // this.resetTemporaryBreakPoint();
+        // const callFrame = this.currentCallFrames[1];
+        // const invokeLogicNode = callFrame.invokeItem.node;
+        // const logicItem = Vertex.getVertexByRef(invokeLogicNode.id);
+        // const invokeLogic = logicItem.logic;
+        // const idx = invokeLogic.body.findIndex((i) => i === logicItem);
+        // const nextItem = invokeLogic.body[idx + 1];
+        // if (nextItem && nextItem.type !== 'End') {
+        //     const breakPoint = nextItem.addTemperaryBreakPoint();
+        //     await this.setRemoteBreakPoint(breakPoint);
+        //     this.resume();
+        // }
+    }
+
+    resetTemporaryBreakPoint() {
+        if (this.temporaryBreakPointTriggered) {
+            this.temporaryBreakPoint.logicItem.temporaryBreakPoint = null;
+            this.temporaryBreakPoint = null;
+            this.temporaryBreakPointTriggered = false;
+        }
+    }
+
+    resumeUserAction() {
+        this.resetTemporaryBreakPoint();
+        this.resume();
+    }
+
+    resume() {
+        if (this.currentThread) {
+            if (this.currentThread === this.currentFrontEndThread) {
+                if (this.currentFrontEndThread.id) {
+                    this.socketEventEmitter.emitSocket(BackEndProtocol.resume(this.app.id, this.currentFrontEndThread.id));
+                } else {
+                    this.socketEventEmitter.emitSocket(FrontEndProtocol.resume());
+                }
+            } else {
+                this.socketEventEmitter.emitSocket(BackEndProtocol.resume(this.app.id, this.currentThread.id));
+            }
+
+            Object.assign(this.currentThread, {
+                callFrameId: null,
+                breakPoint: null,
+                evaluateExpression: null,
+                evaluateValue: null,
+                callFrames: null,
+                callFrameScope: null,
+            });
+        }
+    }
+}