2 changed files with 82 additions and 55 deletions
@ -0,0 +1,7 @@ |
|||||
|
.container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 10px; |
||||
|
background: #272823; |
||||
|
overflow: scroll; |
||||
|
} |
@ -1,78 +1,98 @@ |
|||||
import React, { useState, useEffect } from 'react' |
import React, { |
||||
interface ConsoleType { |
useState, |
||||
logType: string |
useEffect |
||||
infos: any[] |
} from 'react'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
interface ILog { |
||||
|
type: string; |
||||
|
data: any[]; |
||||
|
} |
||||
|
|
||||
|
const isPlainObject = (value: any): boolean => { |
||||
|
return typeof value === 'object' && value !== null; |
||||
|
} |
||||
|
|
||||
|
const hijackMap: {[key: string]: any} = { |
||||
|
log: { |
||||
|
color: '#ffffff', |
||||
|
originMethod: console.log |
||||
|
}, |
||||
|
info: { |
||||
|
color: '#76cd75', |
||||
|
originMethod: console.info |
||||
|
}, |
||||
|
warn: { |
||||
|
color: '#faad14', |
||||
|
originMethod: console.warn |
||||
|
}, |
||||
|
debug: { |
||||
|
color: '#1890ff', |
||||
|
originMethod: console.debug |
||||
|
}, |
||||
|
error: { |
||||
|
color: '#ff4d4f', |
||||
|
originMethod: console.error |
||||
|
} |
||||
} |
} |
||||
|
|
||||
const MyConsole: React.FC = () => { |
const MyConsole: React.FC = () => { |
||||
const [logList, setLogList] = useState<ConsoleType[]>([]) |
const [logList, setLogList] = useState<ILog[]>([]); |
||||
|
|
||||
useEffect(() => { |
useEffect(() => { |
||||
executeConsole() |
hijackConsole(); |
||||
}, []) |
return () => { |
||||
|
resetConsole(); |
||||
|
}; |
||||
|
}, [logList]); |
||||
|
|
||||
const addLog = (log: ConsoleType) => { |
const addLog = (log: ILog) => { |
||||
setLogList([...logList, log]) |
setLogList([...logList, log]); |
||||
} |
} |
||||
|
|
||||
const clearLog = () => { |
const clearLog = () => { |
||||
setLogList([]) |
setLogList([]); |
||||
} |
} |
||||
|
|
||||
const executeConsole = () => { |
const hijackConsole = () => { |
||||
if (!window.console) { |
Object.keys(hijackMap).forEach(method => { |
||||
return |
|
||||
} |
|
||||
|
|
||||
const methodList = ['log', 'info', 'warn', 'debug', 'error'] |
|
||||
|
|
||||
// 拦截浏览器中的console方法并重写
|
|
||||
methodList.forEach(method => { |
|
||||
// @ts-ignore
|
// @ts-ignore
|
||||
window.console[method] = (...args: any[]) => { |
window.console[method] = (...args: any[]) => { |
||||
addLog({ |
addLog({ type: method, data: args }); |
||||
logType: method, |
hijackMap[method].originMethod(...args); |
||||
infos: args |
}; |
||||
}) |
}); |
||||
} |
|
||||
}) |
|
||||
|
|
||||
window.console.clear = () => { |
|
||||
clearLog() |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
|
const resetConsole = () => { |
||||
|
Object.keys(hijackMap).forEach(method => { |
||||
|
// @ts-ignore
|
||||
|
window.console[method] = hijackMap[method].originMethod; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
// 根据不同console类型展示不同的样式
|
// 根据不同console类型展示不同的样式
|
||||
const renderLogList = (logList: ConsoleType[]) => { |
const renderLogList = (logList: ILog[]) => { |
||||
return logList.map((log: ConsoleType, index: number) => { |
return logList.map((log: ILog, index: number) => { |
||||
const renderItem = (color: string) => <p key={index} style={{ color: color }}>{log.infos}</p> |
const {color} = hijackMap[log.type]; |
||||
let wrap = null |
const showText = log.data.map(o => { |
||||
switch (log.logType) { |
return isPlainObject(o) ? JSON.stringify(log.data, null, 2) : o; |
||||
case 'warn': |
}).join(' '); |
||||
wrap = renderItem('#faad14') |
// TODO: use react-json-view to render object
|
||||
break |
return ( |
||||
case 'log': |
<p key={index} style={{color}}> |
||||
wrap = renderItem('#ffffff') |
{showText} |
||||
break |
</p> |
||||
case 'error': |
); |
||||
wrap = renderItem('#ff4d4f') |
}); |
||||
break |
|
||||
case 'info': |
|
||||
wrap = renderItem('#76cd75') |
|
||||
break |
|
||||
case 'debug': |
|
||||
wrap = renderItem('#1890ff') |
|
||||
break |
|
||||
} |
|
||||
return wrap |
|
||||
}) |
|
||||
} |
} |
||||
|
|
||||
return ( |
return ( |
||||
<div style={{ height: '100%', background: 'rgb(39,40,35)', padding: 10 }}> |
<div className={styles.container}> |
||||
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(logList)}</div> |
{renderLogList(logList)} |
||||
</div> |
</div> |
||||
) |
); |
||||
} |
} |
||||
|
|
||||
export default MyConsole |
export default MyConsole |
||||
|
Loading…
Reference in new issue