增加Debug级别日志捕获，同时也支持了日志级别的筛选

src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx

@@ -1,24 +1,48 @@
 import { useSocketMessageStore } from '@/store/socket-message';
 import { ClearOutlined } from '@ant-design/icons';
-import { Row, Col, Tooltip, Button } from 'antd';
+import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
   const clearRecord = useSocketMessageStore((state) => state.clearRecord);
+  const changeConsoleMsgFilter = useSocketMessageStore(
+    (state) => state.setConsoleMsgTypeFilter,
+  );
+
+  const logLevelList = [
+    { label: 'Debug', value: 'debug' },
+    { label: 'Info', value: 'info' },
+    {
+      label: 'Warnings',
+      value: 'warn',
+    },
+    { label: 'Errors', value: 'error' },
+    { label: 'Log', value: 'log' },
+  ];
 
   const clear = useCallback(() => {
     clearRecord('console');
   }, [clearRecord]);
   return (
     <Row justify="end">
       <Col>
-        <Tooltip title={t('common.clear')}>
-          <Button onClick={clear}>
-            <ClearOutlined />
-          </Button>
-        </Tooltip>
+        <Space>
+          <Select
+            onChange={changeConsoleMsgFilter}
+            maxTagCount="responsive"
+            mode="multiple"
+            options={logLevelList}
+            placeholder="Log Level Filter"
+            style={{ width: 200 }}
+          />
+          <Tooltip title={t('common.clear')}>
+            <Button onClick={clear}>
+              <ClearOutlined />
+            </Button>
+          </Tooltip>
+        </Space>
       </Col>
     </Row>
   );

src/pages/Devtools/ConsolePanel/components/LogType/index.tsx

@@ -6,13 +6,15 @@ import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
 import { ReactComponent as DebugOriginSvg } from '@/assets/image/debug-origin.svg';
 import { ReactComponent as DebugEvalSvg } from '@/assets/image/debug-eval.svg';
 import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
 import './index.less';
 import type { SpyConsole } from '@huolala-tech/page-spy';
 
 interface ThemeItem {
   color: string;
   icon: React.ComponentType | null;
 }
+
 type Theme = Record<SpyConsole.DataType | 'default', ThemeItem>;
 
 const Type2Theme: Partial<Theme> = {
@@ -28,6 +30,10 @@ const Type2Theme: Partial<Theme> = {
     color: '#E9994B',
     icon: WarnSvg,
   },
+  debug: {
+    color: '#8236CB',
+    icon: DebugSvg,
+  },
   'debug-origin': {
     color: '#8236CB',
     icon: DebugOriginSvg,

src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx

@@ -27,6 +27,9 @@ export const MainContent = () => {
   }, []);
 
   const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
+  const [dataFilter] = useSocketMessageStore((state) => [
+    state.consoleMsgTypeFilter,
+  ]);
   const [newTips, setNewTips] = useState<boolean>(false);
   useEffect(() => {
     if (data.length === 0) {
@@ -72,34 +75,38 @@ export const MainContent = () => {
 
   return (
     <div className="console-list" ref={containerEl}>
-      {data.map((item) => (
-        <div className={`console-item ${item.logType}`} key={item.id}>
-          <div className="console-item__title">
-            <LogType type={item.logType} />
+      {data
+        .filter((item) =>
+          dataFilter.length ? dataFilter.includes(item.logType) : item,
+        )
+        .map((item) => (
+          <div className={`console-item ${item.logType}`} key={item.id}>
+            <div className="console-item__title">
+              <LogType type={item.logType} />
+            </div>
+            <div className="console-item__content">
+              <Row gutter={12} wrap={false}>
+                <Col style={{ flexShrink: 0 }}>
+                  <Timestamp time={item.time} />
+                </Col>
+                <Col flex={1}>
+                  {isPlaceholderNode(item) ? (
+                    <PlaceholderNode data={item.logs} />
+                  ) : isErrorTraceNode(item) ? (
+                    <ErrorTraceNode data={item} />
+                  ) : (
+                    item.logs?.map((log) => {
+                      return <ConsoleNode data={log} key={log.id} />;
+                    })
+                  )}
+                </Col>
+              </Row>
+            </div>
+            <div className="console-item__url" title={item.url}>
+              {item.url?.substring(new URL(item.url).origin.length)}
+            </div>
           </div>
-          <div className="console-item__content">
-            <Row gutter={12} wrap={false}>
-              <Col style={{ flexShrink: 0 }}>
-                <Timestamp time={item.time} />
-              </Col>
-              <Col flex={1}>
-                {isPlaceholderNode(item) ? (
-                  <PlaceholderNode data={item.logs} />
-                ) : isErrorTraceNode(item) ? (
-                  <ErrorTraceNode data={item} />
-                ) : (
-                  item.logs?.map((log) => {
-                    return <ConsoleNode data={log} key={log.id} />;
-                  })
-                )}
-              </Col>
-            </Row>
-          </div>
-          <div className="console-item__url" title={item.url}>
-            {item.url?.substring(new URL(item.url).origin.length)}
-          </div>
-        </div>
-      ))}
+        ))}
       {newTips && (
         <div className="console-list__new" onClick={scrollToBottom}>
           <Button shape="round" type="primary">

src/pages/Devtools/ConsolePanel/index.less

@@ -36,6 +36,9 @@
     &:last-child {
       border-bottom: 1px solid #f0f0f0;
     }
+    &.debug {
+      color: #1c419a;
+    }
     &.warn {
       color: #573c10;
       background-color: #fefae3;

src/store/socket-message/index.ts

@@ -22,6 +22,7 @@ const USER_ID = 'Debugger';
 interface SocketMessage {
   socket: SocketStore | null;
   consoleMsg: SpyConsole.DataItem[];
+  consoleMsgTypeFilter: string[];
   networkMsg: SpyNetwork.RequestInfo[];
   systemMsg: SpySystem.DataItem[];
   connectMsg: string[];
@@ -36,13 +37,15 @@ interface SocketMessage {
     data: SpyDatabase.GetTypeDataItem | null;
   };
   initSocket: (url: string) => void;
+  setConsoleMsgTypeFilter: (typeList: string[]) => void;
   clearRecord: (key: string) => void;
   refresh: (key: string) => void;
 }
 
 export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
   socket: null,
   consoleMsg: [],
+  consoleMsgTypeFilter: [],
   networkMsg: [],
   systemMsg: [],
   connectMsg: [],
@@ -243,6 +246,9 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
       }
     });
   },
+  setConsoleMsgTypeFilter: (typeList: string[]) => {
+    set({ consoleMsgTypeFilter: typeList });
+  },
   clearRecord: (key: string) => {
     switch (key) {
       case 'console':