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

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

@@ -0,0 +1,8 @@
+.select-item {
+  display: flex;
+  align-items: center;
+
+  &.label-text {
+    margin-left: 5px;
+  }
+}

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

@@ -1,24 +1,95 @@
 import { useSocketMessageStore } from '@/store/socket-message';
 import { ClearOutlined } from '@ant-design/icons';
-import { Row, Col, Tooltip, Button } from 'antd';
-import { useCallback } from 'react';
+import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ProxyType } from '@huolala-tech/page-spy/dist/types/lib/console';
+import { ReactComponent as ErrorSvg } from '@/assets/image/error.svg';
+import { ReactComponent as InfoSvg } from '@/assets/image/info.svg';
+import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
+import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
+import './index.less';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
-  const clearRecord = useSocketMessageStore((state) => state.clearRecord);
+  const [clearRecord, changeConsoleMsgFilter] = useSocketMessageStore(
+    (state) => [state.clearRecord, state.setConsoleMsgTypeFilter],
+  );
+
+  const logLevelList: Array<{
+    label: string | React.ReactNode;
+    value: ProxyType;
+  }> = [
+    {
+      label: (
+        <div className="select-item">
+          <UserSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">User messages</span>
+        </div>
+      ),
+      value: 'log',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <ErrorSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Errors</span>
+        </div>
+      ),
+      value: 'error',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <WarnSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Warnings</span>
+        </div>
+      ),
+      value: 'warn',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <InfoSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Info</span>
+        </div>
+      ),
+      value: 'info',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <DebugSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Verbose</span>
+        </div>
+      ),
+      value: 'debug',
+    },
+  ];
 
   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"
+            allowClear={true}
+            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

@@ -26,7 +26,10 @@ export const MainContent = () => {
     });
   }, []);
 
-  const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
+  const [data, dataFilter] = useSocketMessageStore((state) => [
+    state.consoleMsg,
+    state.consoleMsgTypeFilter,
+  ]);
   const [newTips, setNewTips] = useState<boolean>(false);
   useEffect(() => {
     if (data.length === 0) {
@@ -70,9 +73,13 @@ export const MainContent = () => {
     };
   }, []);
 
+  const consoleDataList = dataFilter.length
+    ? data.filter((item) => dataFilter.includes(item.logType))
+    : data;
+
   return (
     <div className="console-list" ref={containerEl}>
-      {data.map((item) => (
+      {consoleDataList.map((item) => (
         <div className={`console-item ${item.logType}`} key={item.id}>
           <div className="console-item__title">
             <LogType type={item.logType} />

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':