diff --git a/packages/network-debugger/src/fork/devtool.ts b/packages/network-debugger/src/fork/devtool/index.ts similarity index 77% rename from packages/network-debugger/src/fork/devtool.ts rename to packages/network-debugger/src/fork/devtool/index.ts index 44117ca..3a8b441 100644 --- a/packages/network-debugger/src/fork/devtool.ts +++ b/packages/network-debugger/src/fork/devtool/index.ts @@ -1,10 +1,10 @@ import { Server, WebSocket } from 'ws' import open, { apps } from 'open' import { type ChildProcess } from 'child_process' -import { IS_DEV_MODE, RequestDetail } from '../common' -import { REMOTE_DEBUGGER_PORT } from '../common' -import { RequestHeaderPipe } from './pipe' -import { log } from '../utils' +import { IS_DEV_MODE } from '../../common' +import { REMOTE_DEBUGGER_PORT } from '../../common' +import { log } from '../../utils' +import { BaseDevtoolServer, DevtoolMessage } from './type' export interface DevtoolServerInitOptions { port: number @@ -13,36 +13,21 @@ export interface DevtoolServerInitOptions { onClose?: () => void } -const frameId = '517.528' -const loaderId = '517.529' - -export const toMimeType = (contentType: string) => { - return contentType.split(';')[0] || 'text/plain' -} - -export interface DevtoolMessageRequest { - method: string - params: Record +export interface IDevtoolServer { + send(message: DevtoolMessage): Promise + close(): void + open(): Promise } +export * from './type' -export interface DevtoolMessageResponse { - id: string - result: any - method?: string -} - -export type DevtoolMessage = DevtoolMessageRequest | DevtoolMessageResponse - -export class DevtoolServer { +export class DevtoolServer extends BaseDevtoolServer implements IDevtoolServer { private server: Server private port: number private browser: ChildProcess | null = null private socket: Promise<[WebSocket]> - public timestamp = 0 - private startTime = Date.now() - private listeners: ((error: unknown | null, message?: any) => void)[] = [] constructor(props: DevtoolServerInitOptions) { + super() const { port, autoOpenDevtool = true, onConnect, onClose } = props this.port = port this.server = new Server({ port }) @@ -76,15 +61,6 @@ export class DevtoolServer { }) } - public getTimestamp() { - this.updateTimestamp() - return this.timestamp - } - - public updateTimestamp() { - this.timestamp = (Date.now() - this.startTime) / 1000 - } - public async open() { const url = `devtools://devtools/bundled/inspector.html?ws=localhost:${this.port}` try { @@ -144,7 +120,7 @@ export class DevtoolServer { log('opened in chrome or click here to open chrome devtool: ', url) this.browser = pro - return pro + return } catch (error) { console.warn( "Open devtools failed, but don't worry, you can open it in browser(Chrome or Edge) manually: " + @@ -162,8 +138,4 @@ export class DevtoolServer { const [socket] = await this.socket return socket.send(JSON.stringify(message)) } - - public on(listener: (error: unknown | null, message?: any) => void) { - this.listeners.push(listener) - } } diff --git a/packages/network-debugger/src/fork/devtool/type.ts b/packages/network-debugger/src/fork/devtool/type.ts new file mode 100644 index 0000000..346d236 --- /dev/null +++ b/packages/network-debugger/src/fork/devtool/type.ts @@ -0,0 +1,28 @@ +export interface DevtoolMessageRequest { + method: string + params: Record +} + +export interface DevtoolMessageResponse { + id: string + result: any + method?: string +} + +export type DevtoolMessage = DevtoolMessageRequest | DevtoolMessageResponse + +export class BaseDevtoolServer { + public timestamp = 0 + private startTime = Date.now() + public getTimestamp() { + this.updateTimestamp() + return this.timestamp + } + public listeners: ((error: unknown | null, message?: any) => void)[] = [] + public updateTimestamp() { + this.timestamp = (Date.now() - this.startTime) / 1000 + } + public on(listener: (error: unknown | null, message?: any) => void) { + this.listeners.push(listener) + } +} diff --git a/packages/network-debugger/src/fork/module/debugger/index.ts b/packages/network-debugger/src/fork/module/debugger/index.ts index b0c1b46..3196460 100644 --- a/packages/network-debugger/src/fork/module/debugger/index.ts +++ b/packages/network-debugger/src/fork/module/debugger/index.ts @@ -1,4 +1,5 @@ import { createPlugin, useConnect, useHandler } from '../common' +import { NetworkPluginCore } from '../network' export interface ISciprtParsed { url: string scriptLanguage: string @@ -12,12 +13,14 @@ export interface ScriptSourceData { } export const debuggerPlugin = createPlugin('debugger', ({ devtool, core }) => { + const networkPlugin = core.usePlugin('network') + useHandler('Debugger.getScriptSource', ({ id, data }) => { if (!id) { return } const { scriptId } = data - const scriptSource = core.resourceService.getScriptSource(scriptId) + const scriptSource = networkPlugin.resourceService.getScriptSource(scriptId) devtool.send({ id: id, method: 'Debugger.getScriptSourceResponse', @@ -27,7 +30,7 @@ export const debuggerPlugin = createPlugin('debugger', ({ devtool, core }) => { }) }) - const scriptList = core.resourceService.getLocalScriptList() + const scriptList = networkPlugin.resourceService.getLocalScriptList() useConnect(() => { scriptList.forEach((script) => { devtool.send({ diff --git a/packages/network-debugger/src/fork/module/network/index.ts b/packages/network-debugger/src/fork/module/network/index.ts index a552b0e..0ddb17c 100644 --- a/packages/network-debugger/src/fork/module/network/index.ts +++ b/packages/network-debugger/src/fork/module/network/index.ts @@ -3,14 +3,20 @@ import { RequestDetail } from '../../../common' import { BodyTransformer, RequestHeaderPipe } from '../../pipe' import { createPlugin, useHandler } from '../common' import zlib from 'node:zlib' -import { toMimeType } from '../../devtool' +import { ResourceService } from '../../resource-service' const frameId = '517.528' const loaderId = '517.529' +export const toMimeType = (contentType: string) => { + return contentType.split(';')[0] || 'text/plain' +} + export const networkPlugin = createPlugin('network', ({ devtool, core }) => { const requests: Record = {} + const resourceService = new ResourceService() + const getRequest = (id: string) => requests[id] const updateRequest = (request: RequestDetail) => { requests[request.id] = request @@ -129,8 +135,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => { request.initiator.stack.callFrames.forEach((frame) => { const fileUrl = pathToFileURL(frame.url) const scriptId = - core.resourceService.getScriptIdByUrl(fileUrl.href) ?? - core.resourceService.getScriptIdByUrl(frame.url) + resourceService.getScriptIdByUrl(fileUrl.href) ?? + resourceService.getScriptIdByUrl(frame.url) if (scriptId) { frame.scriptId = scriptId } @@ -148,8 +154,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => { request.initiator.stack.callFrames.forEach((frame) => { const fileUrl = pathToFileURL(frame.url) const scriptId = - core.resourceService.getScriptIdByUrl(fileUrl.href) ?? - core.resourceService.getScriptIdByUrl(frame.url) + resourceService.getScriptIdByUrl(fileUrl.href) ?? + resourceService.getScriptIdByUrl(frame.url) if (scriptId) { frame.scriptId = scriptId } @@ -216,7 +222,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => { }) return { - getRequest + getRequest, + resourceService } }) diff --git a/packages/network-debugger/src/fork/request-center.ts b/packages/network-debugger/src/fork/request-center.ts index 9c7ab5d..a13ab57 100644 --- a/packages/network-debugger/src/fork/request-center.ts +++ b/packages/network-debugger/src/fork/request-center.ts @@ -2,7 +2,6 @@ import { DevtoolServer } from './devtool' import { PORT, READY_MESSAGE, RequestDetail } from '../common' import { Server } from 'ws' import { log } from '../utils' -import { ResourceService } from './resource-service' import { PluginInstance } from './module/common' export interface RequestCenterInitOptions { @@ -22,7 +21,6 @@ export interface DevtoolMessageListener { } export class RequestCenter { - public resourceService: ResourceService private devtool: DevtoolServer private server: Server private listeners: Record | undefined> = {} @@ -43,7 +41,6 @@ export class RequestCenter { ) } }) - this.resourceService = new ResourceService() this.devtool.on((error, message) => { if (error) { log(error) diff --git a/packages/network-debugger/src/fork/tests/devtool.test.ts b/packages/network-debugger/src/fork/tests/devtool.test.ts new file mode 100644 index 0000000..1266e98 --- /dev/null +++ b/packages/network-debugger/src/fork/tests/devtool.test.ts @@ -0,0 +1,21 @@ +import { DevtoolMessage } from '../devtool' +import { BaseDevtoolServer, IDevtoolServer, DevtoolServerInitOptions } from '../devtool/index' + +/** + * 模拟 Devtool server，作为 core 上下文用于测试 + */ +export class DevToolTester extends BaseDevtoolServer implements IDevtoolServer { + private port: number + constructor(props: DevtoolServerInitOptions) { + super() + const { port, autoOpenDevtool = true } = props + + this.port = port + autoOpenDevtool && this.open() + } + async send(message: DevtoolMessage) { + return message + } + async open() {} + close() {} +} diff --git a/packages/network-debugger/src/fork/tests/pluginTester.ts b/packages/network-debugger/src/fork/tests/pluginTester.ts index e69de29..3a9feb7 100644 --- a/packages/network-debugger/src/fork/tests/pluginTester.ts +++ b/packages/network-debugger/src/fork/tests/pluginTester.ts @@ -0,0 +1,6 @@ +export class PluginTester { + public plugins: any[] = [] + public loadPlugins(plugins: any[]) { + this.plugins = plugins + } +}