\n \n\n \n \n Set BreakPoint \n \n\n \n \n Method \n { this.setState({ rule: { ...rule, method: e.target.value as Method } }) }}>\n \n \n \n \n \n \n \n \n\n \n URL \n { this.setState({ rule: { ...rule, url: e.target.value } }) }} />\n \n\n \n Action \n { this.setState({ rule: { ...rule, action: parseInt(e.target.value) as Action } }) }}>\n \n \n \n \n \n \n \n\n \n \n \n \n \n
\n )\n }\n}\n\nexport default BreakPoint\n","import { IRequest, IResponse } from './message'\n\nexport const isTextBody = (payload: IRequest | IResponse) => {\n if (!payload) return false\n if (!payload.header) return false\n if (!payload.header['Content-Type']) return false\n\n return /text|javascript|json|x-www-form-urlencoded|xml|form-data/.test(payload.header['Content-Type'].join(''))\n}\n\nexport const getSize = (len: number) => {\n if (!len) return '0'\n if (isNaN(len)) return '0'\n if (len <= 0) return '0'\n\n if (len < 1024) return `${len} B`\n if (len < 1024 * 1024) return `${(len / 1024).toFixed(2)} KB`\n return `${(len / (1024 * 1024)).toFixed(2)} MB`\n}\n\nexport const shallowEqual = (objA: any, objB: any) => {\n if (objA === objB) return true\n\n const keysA = Object.keys(objA)\n const keysB = Object.keys(objB)\n if (keysA.length !== keysB.length) return false\n\n for (let i = 0; i < keysA.length; i++) {\n const key = keysA[i]\n if (objB[key] === undefined || objA[key] !== objB[key]) return false\n }\n return true\n}\n\nexport const arrayBufferToBase64 = (buf: ArrayBuffer) => {\n let binary = ''\n const bytes = new Uint8Array(buf)\n const len = bytes.byteLength\n for (let i = 0; i < len; i++) {\n binary += String.fromCharCode(bytes[i])\n }\n return btoa(binary)\n}\n\nexport const bufHexView = (buf: ArrayBuffer) => {\n let str = ''\n const bytes = new Uint8Array(buf)\n const len = bytes.byteLength\n\n let viewStr = ''\n\n str += '00000000: '\n for (let i = 0; i < len; i++) {\n str += bytes[i].toString(16).padStart(2, '0') + ' '\n\n if (bytes[i] >= 32 && bytes[i] <= 126) {\n viewStr += String.fromCharCode(bytes[i])\n } else {\n viewStr += '.'\n }\n\n if ((i + 1) % 16 === 0) {\n str += ' ' + viewStr\n viewStr = ''\n str += `\\n${(i + 1).toString(16).padStart(8, '0')}: `\n } else if ((i + 1) % 8 === 0) {\n str += ' '\n }\n }\n\n // 补充最后一行的空白\n if (viewStr.length > 0) {\n for (let i = viewStr.length; i < 16; i++) {\n str += ' ' + ' '\n if ((i + 1) % 8 === 0) str += ' '\n }\n str += ' ' + viewStr\n }\n\n return str\n}\n","import React from 'react'\nimport { IFlowPreview } from '../message'\nimport { shallowEqual } from '../utils'\n\ninterface IProps {\n flow: IFlowPreview\n isSelected: boolean\n onShowDetail: () => void\n}\n\nclass FlowPreview extends React.Component\n\n \n\n \n\n \n\n\n \n \n Edit {when === 'request' ? 'Request' : 'Response'} \n \n\n \n \n { this.setState({ content: e.target.value }) }} />\n \n {\n !alertMsg ? null : {alertMsg} \n }\n \n\n \n \n \n \n \n\n
\n )\n }\n}\n\nexport default EditFlow\n","import React from 'react'\nimport Button from 'react-bootstrap/Button'\nimport FormCheck from 'react-bootstrap/FormCheck'\nimport fetchToCurl from 'fetch-to-curl'\nimport copy from 'copy-to-clipboard'\nimport JSONPretty from 'react-json-pretty'\nimport { Flow, IResponse } from '../message'\nimport { isTextBody } from '../utils'\n\nimport EditFlow from './EditFlow'\n\ninterface Iprops {\n flow: Flow | null\n onClose: () => void\n onReRenderFlows: () => void\n onMessage: (msg: ArrayBufferLike) => void\n}\n\ninterface IState {\n flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'\n copied: boolean\n requestBodyViewTab: 'Raw' | 'Preview'\n responseBodyLineBreak: boolean\n}\n\nclass ViewFlow extends React.ComponentNo response
\n }\n\n const pv = flow.previewResponseBody()\n if (!pv) return Not support preview
\n\n if (pv.type === 'image') {\n return Not support preview
\n }\n\n requestBodyPreview() {\n const { flow } = this.props\n if (!flow) return null\n\n const pv = flow.previewRequestBody()\n if (!pv) return Not support preview
\n\n if (pv.type === 'json') {\n return {pv.data}Not support preview
\n }\n\n hexview() {\n const { flow } = this.props\n if (!flow) return null\n const response = flow.response\n if (!response) return null\n\n if (!(response.body && response.body.byteLength)) {\n return No response
\n }\n\n return {flow.hexviewResponseBody()}\n }\n\n render() {\n if (!this.props.flow) return null\n\n const flow = this.props.flow\n const flowTab = this.state.flowTab\n\n const request = flow.request\n const response: IResponse = (flow.response || {}) as any\n\n // Query String Parameters\n const searchItems: Array<{ key: string; value: string }> = []\n if (flow.url && flow.url.search) {\n flow.url.searchParams.forEach((value, key) => {\n searchItems.push({ key, value })\n })\n }\n\n return (\n \n
\n )\n }\n}\n\nexport default ViewFlow\n","import { Flow } from './message'\n\nexport class FlowManager {\n private items: Flow[]\n private _map: Map\n { this.props.onClose() }}>x\n { this.setState({ flowTab: 'Headers' }) }}>Headers\n { this.setState({ flowTab: 'Preview' }) }}>Preview\n { this.setState({ flowTab: 'Response' }) }}>Response\n { this.setState({ flowTab: 'Hexview' }) }}>Hexview\n\n {\n flow.request.method = request.method\n flow.request.url = request.url\n flow.request.header = request.header\n if (isTextBody(flow.request)) flow.request.body = request.body\n this.props.onReRenderFlows()\n }}\n onChangeResponse={response => {\n if (!flow.response) flow.response = {} as IResponse\n\n flow.response.statusCode = response.statusCode\n flow.response.header = response.header\n if (isTextBody(flow.response)) flow.response.body = response.body\n this.props.onReRenderFlows()\n }}\n onMessage={msg => {\n this.props.onMessage(msg)\n flow.waitIntercept = false\n this.props.onReRenderFlows()\n }}\n />\n\n
\n\n \n {\n !(flowTab === 'Headers') ? null :\n
\n\n \n \n\n
\n }\n\n {\n !(flowTab === 'Response') ? null :\n !(response.body && response.body.byteLength) ? \n
\n\n {\n !(response.header) ? null :\n General
\n\n
\n Request URL: {request.url}
\nRequest Method: {request.method}
\nStatus Code: {`${response.statusCode || '(pending)'}`}
\n\n
\n }\n\n Response Headers
\n\n {\n Object.keys(response.header).map(key => {\n return (\n
\n {key}: {response.header[key].join(' ')}
\n )\n })\n }\n\n
\n\n {\n !(searchItems.length) ? null :\n Request Headers
\n\n {\n !(request.header) ? null :\n Object.keys(request.header).map(key => {\n return (\n
\n {key}: {request.header[key].join(' ')}
\n )\n })\n }\n\n
\n }\n\n {\n !(request.body && request.body.byteLength) ? null :\n Query String Parameters
\n\n {\n searchItems.map(({ key, value }) => {\n return (\n
\n {key}: {value}
\n )\n })\n }\n\n
\n }\n\n Request Body
\n\n
\n \n
\n \n { this.setState({ requestBodyViewTab: 'Raw' }) }}>Raw\n { this.setState({ requestBodyViewTab: 'Preview' }) }}>Preview\n
\n\n {\n !(this.state.requestBodyViewTab === 'Raw') ? null :\n \n {\n !(flow.isTextRequest()) ? Not text Request : flow.requestBody()\n }\n
\n }\n\n {\n !(this.state.requestBodyViewTab === 'Preview') ? null :\n {this.requestBodyPreview()}
\n }\n No response
:\n !(flow.isTextResponse()) ? Not text response
:\n \n
\n }\n\n {\n !(flowTab === 'Preview') ? null :\n \n {\n this.setState({ responseBodyLineBreak: e.target.checked })\n }}\n label=\"自动换行\">\n
\n \n {flow.responseBody()}\n
\n {this.preview()}
\n }\n\n {\n !(flowTab === 'Hexview') ? null :\n {this.hexview()}
\n }\n \n \n \n
\n\n { this.setState({ flow: null }) }}\n onReRenderFlows={() => { this.setState({ flows: this.state.flows }) }}\n onMessage={msg => { if (this.ws) this.ws.send(msg) }}\n />\n
\n )\n }\n}\n\nexport default App\n","import { ReportHandler } from 'web-vitals'\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nconst pageBottom = document.getElementById('hidden-bottom')\n\nReactDOM.render(\n \n \n {\n const msg = buildMessageMeta(SendMessageType.CHANGE_BREAK_POINT_RULES, rules)\n if (this.ws) this.ws.send(msg)\n }} />\n\n status: {this.state.wsStatus}\n
\n\n \n {\n const value = e.target.value\n this.flowMgr.changeFilterLazy(value, () => {\n this.setState({ flows: this.flowMgr.showList() })\n })\n }}\n >\n \n
\n\n | No | \nMethod | \nHost | \nPath | \nType | \nStatus | \nSize | \nTime | \n
|---|
\n \n\n \n \n Set BreakPoint \n \n\n \n \n Method \n { this.setState({ rule: { ...rule, method: e.target.value as Method } }) }}>\n \n \n \n \n \n \n \n \n\n \n URL \n { this.setState({ rule: { ...rule, url: e.target.value } }) }} />\n \n\n \n Action \n { this.setState({ rule: { ...rule, action: parseInt(e.target.value) as Action } }) }}>\n \n \n \n \n \n \n \n\n \n \n \n \n \n
\n )\n }\n}\n\nexport default BreakPoint\n","import { IRequest, IResponse } from './message'\n\nexport const isTextBody = (payload: IRequest | IResponse) => {\n if (!payload) return false\n if (!payload.header) return false\n if (!payload.header['Content-Type']) return false\n\n return /text|javascript|json|x-www-form-urlencoded|xml|form-data/.test(payload.header['Content-Type'].join(''))\n}\n\nexport const getSize = (len: number) => {\n if (!len) return '0'\n if (isNaN(len)) return '0'\n if (len <= 0) return '0'\n\n if (len < 1024) return `${len} B`\n if (len < 1024 * 1024) return `${(len / 1024).toFixed(2)} KB`\n return `${(len / (1024 * 1024)).toFixed(2)} MB`\n}\n\nexport const shallowEqual = (objA: any, objB: any) => {\n if (objA === objB) return true\n\n const keysA = Object.keys(objA)\n const keysB = Object.keys(objB)\n if (keysA.length !== keysB.length) return false\n\n for (let i = 0; i < keysA.length; i++) {\n const key = keysA[i]\n if (objB[key] === undefined || objA[key] !== objB[key]) return false\n }\n return true\n}\n\nexport const arrayBufferToBase64 = (buf: ArrayBuffer) => {\n let binary = ''\n const bytes = new Uint8Array(buf)\n const len = bytes.byteLength\n for (let i = 0; i < len; i++) {\n binary += String.fromCharCode(bytes[i])\n }\n return btoa(binary)\n}\n\nexport const bufHexView = (buf: ArrayBuffer) => {\n let str = ''\n const bytes = new Uint8Array(buf)\n const len = bytes.byteLength\n\n let viewStr = ''\n\n str += '00000000: '\n for (let i = 0; i < len; i++) {\n str += bytes[i].toString(16).padStart(2, '0') + ' '\n\n if (bytes[i] >= 32 && bytes[i] <= 126) {\n viewStr += String.fromCharCode(bytes[i])\n } else {\n viewStr += '.'\n }\n\n if ((i + 1) % 16 === 0) {\n str += ' ' + viewStr\n viewStr = ''\n str += `\\n${(i + 1).toString(16).padStart(8, '0')}: `\n } else if ((i + 1) % 8 === 0) {\n str += ' '\n }\n }\n\n // 补充最后一行的空白\n if (viewStr.length > 0) {\n for (let i = viewStr.length; i < 16; i++) {\n str += ' ' + ' '\n if ((i + 1) % 8 === 0) str += ' '\n }\n str += ' ' + viewStr\n }\n\n return str\n}\n","import React from 'react'\nimport { IFlowPreview } from '../message'\nimport { shallowEqual } from '../utils'\n\ninterface IProps {\n flow: IFlowPreview\n isSelected: boolean\n onShowDetail: () => void\n}\n\nclass FlowPreview extends React.Component\n\n \n\n \n\n \n\n\n \n \n Edit {when === 'request' ? 'Request' : 'Response'} \n \n\n \n \n { this.setState({ content: e.target.value }) }} />\n \n {\n !alertMsg ? null : {alertMsg} \n }\n \n\n \n \n \n \n \n\n
\n )\n }\n}\n\nexport default EditFlow\n","import React from 'react'\nimport Button from 'react-bootstrap/Button'\nimport FormCheck from 'react-bootstrap/FormCheck'\nimport fetchToCurl from 'fetch-to-curl'\nimport copy from 'copy-to-clipboard'\nimport JSONPretty from 'react-json-pretty'\nimport { Flow, IResponse } from '../message'\nimport { isTextBody } from '../utils'\n\nimport EditFlow from './EditFlow'\n\ninterface Iprops {\n flow: Flow | null\n onClose: () => void\n onReRenderFlows: () => void\n onMessage: (msg: ArrayBufferLike) => void\n}\n\ninterface IState {\n flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview'\n copied: boolean\n requestBodyViewTab: 'Raw' | 'Preview'\n responseBodyLineBreak: boolean\n}\n\nclass ViewFlow extends React.ComponentNo response
\n }\n\n const pv = flow.previewResponseBody()\n if (!pv) return Not support preview
\n\n if (pv.type === 'image') {\n return Not support preview
\n }\n\n requestBodyPreview() {\n const { flow } = this.props\n if (!flow) return null\n\n const pv = flow.previewRequestBody()\n if (!pv) return Not support preview
\n\n if (pv.type === 'json') {\n return {pv.data}Not support preview
\n }\n\n hexview() {\n const { flow } = this.props\n if (!flow) return null\n const response = flow.response\n if (!response) return null\n\n if (!(response.body && response.body.byteLength)) {\n return No response
\n }\n\n return {flow.hexviewResponseBody()}\n }\n\n render() {\n if (!this.props.flow) return null\n\n const flow = this.props.flow\n const flowTab = this.state.flowTab\n\n const request = flow.request\n const response: IResponse = (flow.response || {}) as any\n\n // Query String Parameters\n const searchItems: Array<{ key: string; value: string }> = []\n if (flow.url && flow.url.search) {\n flow.url.searchParams.forEach((value, key) => {\n searchItems.push({ key, value })\n })\n }\n\n return (\n \n
\n )\n }\n}\n\nexport default ViewFlow\n","import { Flow } from './message'\n\nexport class FlowManager {\n private items: Flow[]\n private _map: Map\n { this.props.onClose() }}>x\n { this.setState({ flowTab: 'Headers' }) }}>Headers\n { this.setState({ flowTab: 'Preview' }) }}>Preview\n { this.setState({ flowTab: 'Response' }) }}>Response\n { this.setState({ flowTab: 'Hexview' }) }}>Hexview\n\n {\n flow.request.method = request.method\n flow.request.url = request.url\n flow.request.header = request.header\n if (isTextBody(flow.request)) flow.request.body = request.body\n this.props.onReRenderFlows()\n }}\n onChangeResponse={response => {\n if (!flow.response) flow.response = {} as IResponse\n\n flow.response.statusCode = response.statusCode\n flow.response.header = response.header\n if (isTextBody(flow.response)) flow.response.body = response.body\n this.props.onReRenderFlows()\n }}\n onMessage={msg => {\n this.props.onMessage(msg)\n flow.waitIntercept = false\n this.props.onReRenderFlows()\n }}\n />\n\n
\n\n \n {\n !(flowTab === 'Headers') ? null :\n
\n\n \n \n\n
\n }\n\n {\n !(flowTab === 'Response') ? null :\n !(response.body && response.body.byteLength) ? \n
\n\n {\n !(response.header) ? null :\n General
\n\n
\n Request URL: {request.url}
\nRequest Method: {request.method}
\nStatus Code: {`${response.statusCode || '(pending)'}`}
\n\n
\n }\n\n Response Headers
\n\n {\n Object.keys(response.header).map(key => {\n return (\n
\n {key}: {response.header[key].join(' ')}
\n )\n })\n }\n\n
\n\n {\n !(searchItems.length) ? null :\n Request Headers
\n\n {\n !(request.header) ? null :\n Object.keys(request.header).map(key => {\n return (\n
\n {key}: {request.header[key].join(' ')}
\n )\n })\n }\n\n
\n }\n\n {\n !(request.body && request.body.byteLength) ? null :\n Query String Parameters
\n\n {\n searchItems.map(({ key, value }) => {\n return (\n
\n {key}: {value}
\n )\n })\n }\n\n
\n }\n\n Request Body
\n\n
\n \n
\n \n { this.setState({ requestBodyViewTab: 'Raw' }) }}>Raw\n { this.setState({ requestBodyViewTab: 'Preview' }) }}>Preview\n
\n\n {\n !(this.state.requestBodyViewTab === 'Raw') ? null :\n \n {\n !(flow.isTextRequest()) ? Not text Request : flow.requestBody()\n }\n
\n }\n\n {\n !(this.state.requestBodyViewTab === 'Preview') ? null :\n {this.requestBodyPreview()}
\n }\n No response
:\n !(flow.isTextResponse()) ? Not text response
:\n \n
\n }\n\n {\n !(flowTab === 'Preview') ? null :\n \n {\n this.setState({ responseBodyLineBreak: e.target.checked })\n }}\n label=\"自动换行\">\n
\n \n {flow.responseBody()}\n
\n {this.preview()}
\n }\n\n {\n !(flowTab === 'Hexview') ? null :\n {this.hexview()}
\n }\n \n \n \n
\n\n { this.setState({ flow: null }) }}\n onReRenderFlows={() => { this.setState({ flows: this.state.flows }) }}\n onMessage={msg => { if (this.ws) this.ws.send(msg) }}\n />\n\n
\n )\n }\n}\n\nexport default App\n","import { ReportHandler } from 'web-vitals'\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n \n {\n const msg = buildMessageMeta(SendMessageType.CHANGE_BREAK_POINT_RULES, rules)\n if (this.ws) this.ws.send(msg)\n }} />\n\n status: {this.state.wsStatus}\n
\n\n \n {\n const value = e.target.value\n this.flowMgr.changeFilterLazy(value, () => {\n this.setState({ flows: this.flowMgr.showList() })\n })\n }}\n >\n \n
\n\n | No | \nMethod | \nHost | \nPath | \nType | \nStatus | \nSize | \nTime | \n
|---|
{\n if (this.pageBottom) return\n this.pageBottom = el\n this.initScrollMonitor()\n }} style={{ height: '0px', visibility: 'hidden' }}>bottom
\n