Skip to content

Commit

Permalink
fix: 修复 debug 日志打印不全的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@2betop
2betop committed Nov 29, 2024
1 parent 59de942 commit c080f40
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 107 deletions.
245 changes: 138 additions & 107 deletions packages/amis-core/src/utils/debug.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {uuidv4, importLazyComponent} from './helper';
import position from './position';
import {resolveVariableAndFilter} from './resolveVariableAndFilter';
import {callStrFunction} from './api';
import isPlainObject from 'lodash/isPlainObject';

export const JsonView = React.lazy(() =>
import('react-json-view').then(importLazyComponent)
Expand Down Expand Up @@ -102,21 +103,25 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
return (
<>
{logs.map((log, index) => {
let ext =
typeof log.ext === 'string' &&
(log.ext.startsWith('{') || log.ext.startsWith('['))
? parseJson(log.ext)
: typeof log.ext === 'object'
? normalizeDataForLog(log.ext)
: log.ext;

return (
<div className="AMISDebug-logLine" key={`log-${index}`}>
<div className="AMISDebug-logLineMsg">
[{log.cat}] {log.msg}
</div>
{(typeof log.ext === 'string' &&
(log.ext.startsWith('{') || log.ext.startsWith('['))) ||
typeof log.ext === 'object' ? (
{typeof ext === 'object' ? (
<React.Suspense fallback={<div>Loading...</div>}>
<JsonView
name={null}
theme="monokai"
src={
typeof log.ext === 'string' ? parseJson(log.ext) : log.ext
}
src={ext}
collapsed={true}
enableClipboard={false}
displayDataTypes={false}
Expand All @@ -125,7 +130,7 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
/>
</React.Suspense>
) : (
<pre className="AMISDebug-value">{JSON.stringify(log.ext)}</pre>
<pre className="AMISDebug-value">{JSON.stringify(ext)}</pre>
)}
</div>
);
Expand Down Expand Up @@ -260,119 +265,121 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
<i className="fas fa-bug"></i>
)}
</div>
<div className={cx('AMISDebug-content')}>
<div className="AMISDebug-close" title="Close" onClick={store.close}>
<i className="fas fa-times" />
</div>
<div
className="AMISDebug-resize"
onMouseDown={event => {
setStartX(event.clientX);
setPanelWidth(
parseInt(
getComputedStyle(panelRef.current!).getPropertyValue('width'),
10
)
);
setResizing(true);
}}
></div>
<div className="AMISDebug-tab">
<button
className={cx({active: store.tab === 'log'})}
onClick={() => {
store.tab = 'log';
}}
>
Log
</button>
<button
className={cx({active: store.tab === 'inspect'})}
onClick={() => {
store.tab = 'inspect';
{store.isExpanded ? (
<div className={cx('AMISDebug-content')}>
<div className="AMISDebug-close" title="Close" onClick={store.close}>
<i className="fas fa-times" />
</div>
<div
className="AMISDebug-resize"
onMouseDown={event => {
setStartX(event.clientX);
setPanelWidth(
parseInt(
getComputedStyle(panelRef.current!).getPropertyValue('width'),
10
)
);
setResizing(true);
}}
>
Inspect
</button>
</div>
<div className="AMISDebug-changePosition">
{store.position === 'right' ? (
<i
className="fas fa-chevron-left"
title="move to left"
onClick={() => {
store.position = 'left';
}}
/>
) : (
<i
className="fas fa-chevron-right"
title="move to right"
></div>
<div className="AMISDebug-tab">
<button
className={cx({active: store.tab === 'log'})}
onClick={() => {
store.position = 'right';
store.tab = 'log';
}}
/>
)}
</div>
{store.tab === 'log' ? (
<div className="AMISDebug-log">
>
Log
</button>
<button
className={cx({active: store.tab === 'inspect'})}
onClick={() => {
store.logs = [];
store.tab = 'inspect';
}}
>
Clear Log
Inspect
</button>
<LogView store={store} />
</div>
) : null}
{store.tab === 'inspect' ? (
<div className="AMISDebug-inspect">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 1024 1024"
className={`AMISDebug-inspectIcon ${
store.inspectMode ? 'is-active' : ''
}`}
onClick={store.toggleInspectMode}
>
<path d="M64 192L128 128h768l64 64v384H896v-384H128v512h320V768H128l-64-64v-512z m941.226667 621.226667L576 384v602.496l173.226667-173.226667h256zM640 832v-293.504l210.773333 210.773333h-128L640 832z" />
</svg>
{store.inspectMode ? (
<span>Select an element in the page to inspect it.</span>
<div className="AMISDebug-changePosition">
{store.position === 'right' ? (
<i
className="fas fa-chevron-left"
title="move to left"
onClick={() => {
store.position = 'left';
}}
/>
) : (
<span>Click to inspect an element.</span>
<i
className="fas fa-chevron-right"
title="move to right"
onClick={() => {
store.position = 'right';
}}
/>
)}
{activeId ? (
<>
<h3>
Component:{' '}
<span className="primary">
{activeComponentInspect?.name}
</span>
</h3>
{stackDataView}
</>
) : null}
</div>
) : null}
{activeId ? (
<div className="AMISDebug-footer">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 1024 1024"
>
<path
d="M724.48 521.728c-1.8432 7.7824-5.7344 14.848-11.3664 20.48l-341.9136 342.016c-16.6912 16.6912-43.7248 16.6912-60.3136 0s-16.6912-43.7248 0-60.3136L622.6944 512 310.8864 200.0896c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0l341.9136 341.9136c10.8544 10.8544 14.6432 26.112 11.3664 40.0384z"
{store.tab === 'log' ? (
<div className="AMISDebug-log">
<button
onClick={() => {
store.logs = [];
}}
>
Clear Log
</button>
<LogView store={store} />
</div>
) : null}
{store.tab === 'inspect' ? (
<div className="AMISDebug-inspect">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
></path>
</svg>
<input type="text" placeholder="" onKeyUp={handleInputKeyUp} />
</div>
) : null}
</div>
viewBox="0 0 1024 1024"
className={`AMISDebug-inspectIcon ${
store.inspectMode ? 'is-active' : ''
}`}
onClick={store.toggleInspectMode}
>
<path d="M64 192L128 128h768l64 64v384H896v-384H128v512h320V768H128l-64-64v-512z m941.226667 621.226667L576 384v602.496l173.226667-173.226667h256zM640 832v-293.504l210.773333 210.773333h-128L640 832z" />
</svg>
{store.inspectMode ? (
<span>Select an element in the page to inspect it.</span>
) : (
<span>Click to inspect an element.</span>
)}
{activeId ? (
<>
<h3>
Component:{' '}
<span className="primary">
{activeComponentInspect?.name}
</span>
</h3>
{stackDataView}
</>
) : null}
</div>
) : null}
{activeId ? (
<div className="AMISDebug-footer">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 1024 1024"
>
<path
d="M724.48 521.728c-1.8432 7.7824-5.7344 14.848-11.3664 20.48l-341.9136 342.016c-16.6912 16.6912-43.7248 16.6912-60.3136 0s-16.6912-43.7248 0-60.3136L622.6944 512 310.8864 200.0896c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0l341.9136 341.9136c10.8544 10.8544 14.6432 26.112 11.3664 40.0384z"
fill="currentColor"
></path>
</svg>
<input type="text" placeholder="" onKeyUp={handleInputKeyUp} />
</div>
) : null}
</div>
) : null}
</div>
);
});
Expand Down Expand Up @@ -557,6 +564,30 @@ function parseJson(str: string) {
}
}

function normalizeDataForLog(data: any) {
try {
return parseJson(JSON.stringify(data));
} catch {
let ret: any = {};

Object.keys(data).forEach(key => {
const value = data[key];

if (
typeof value === 'object' &&
value !== null &&
!isPlainObject(value)
) {
ret[key] = '[complicated data]';
} else {
ret[key] = value;
}
});

return ret;
}
}

/**
* 一般调试日志
* @param msg 简单消息
Expand Down
10 changes: 10 additions & 0 deletions packages/amis-core/src/utils/renderer-event.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import debounce from 'lodash/debounce';
import {resolveVariableAndFilterForAsync} from './resolveVariableAndFilterForAsync';
import {evalExpression, evalExpressionWithConditionBuilderAsync} from './tpl';
import type {PlainObject} from '../types';
import {debug} from './debug';

export interface debounceConfig {
maxWait?: number;
Expand Down Expand Up @@ -273,6 +274,15 @@ export async function dispatchEvent(
let unbindEvent: ((eventName?: string) => void) | null | undefined = null;
const eventName = typeof e === 'string' ? e : e.type;

const from = renderer?.props.id || renderer?.props.name || '';
debug(
'event',
`dispatch \`${eventName}\` from 「${renderer?.props.type || 'unknown'}${
from ? `#${from}` : ''
}」`,
data
);

renderer?.props?.env?.beforeDispatchEvent?.(
e,
renderer,
Expand Down

0 comments on commit c080f40

Please sign in to comment.