refactor: debugLog for frontend (#5587)

src/components/proxy/proxy-chain.tsx

@@ -41,6 +41,7 @@ import {
 
 import { useProxiesData } from "@/hooks/app-data";
 import { calcuProxies, updateProxyChainConfigInRuntime } from "@/services/cmds";
+import { debugLog } from "@/utils/debug";
 
 interface ProxyChainItem {
   id: string;
@@ -319,13 +320,13 @@ export const ProxyChain = ({
     try {
       // 第一步：保存链式代理配置
       const chainProxies = proxyChain.map((node) => node.name);
-      console.log("Saving chain config:", chainProxies);
+      debugLog("Saving chain config:", chainProxies);
       await updateProxyChainConfigInRuntime(chainProxies);
-      console.log("Chain configuration saved successfully");
+      debugLog("Chain configuration saved successfully");
 
       // 第二步：连接到代理链的最后一个节点
       const lastNode = proxyChain[proxyChain.length - 1];
-      console.log(`Connecting to proxy chain, last node: ${lastNode.name}`);
+      debugLog(`Connecting to proxy chain, last node: ${lastNode.name}`);
 
       // 根据模式确定使用的代理组名称
       if (mode !== "global" && !selectedGroup) {
@@ -340,7 +341,7 @@ export const ProxyChain = ({
 
       // 刷新代理信息以更新连接状态
       mutateProxies();
-      console.log("Successfully connected to proxy chain");
+      debugLog("Successfully connected to proxy chain");
     } catch (error) {
       console.error("Failed to connect to proxy chain:", error);
       alert(t("proxies.page.chain.connectFailed") || "连接链式代理失败");

src/components/proxy/proxy-groups.tsx

@@ -20,6 +20,7 @@ import { useProxySelection } from "@/hooks/use-proxy-selection";
 import { useVerge } from "@/hooks/use-verge";
 import { updateProxyChainConfigInRuntime } from "@/services/cmds";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
@@ -274,7 +275,7 @@ export const ProxyGroups = (props: Props) => {
 
   // 测全部延迟
   const handleCheckAll = useLockFn(async (groupName: string) => {
-    console.log(`[ProxyGroups] 开始测试所有延迟，组: ${groupName}`);
+    debugLog(`[ProxyGroups] 开始测试所有延迟，组: ${groupName}`);
 
     const proxies = renderList
       .filter(
@@ -283,37 +284,37 @@ export const ProxyGroups = (props: Props) => {
       .flatMap((e) => e.proxyCol || e.proxy!)
       .filter(Boolean);
 
-    console.log(`[ProxyGroups] 找到代理数量: ${proxies.length}`);
+    debugLog(`[ProxyGroups] 找到代理数量: ${proxies.length}`);
 
     const providers = new Set(proxies.map((p) => p!.provider!).filter(Boolean));
 
     if (providers.size) {
-      console.log(`[ProxyGroups] 发现提供者，数量: ${providers.size}`);
+      debugLog(`[ProxyGroups] 发现提供者，数量: ${providers.size}`);
       Promise.allSettled(
         [...providers].map((p) => healthcheckProxyProvider(p)),
       ).then(() => {
-        console.log(`[ProxyGroups] 提供者健康检查完成`);
+        debugLog(`[ProxyGroups] 提供者健康检查完成`);
         onProxies();
       });
     }
 
     const names = proxies.filter((p) => !p!.provider).map((p) => p!.name);
-    console.log(`[ProxyGroups] 过滤后需要测试的代理数量: ${names.length}`);
+    debugLog(`[ProxyGroups] 过滤后需要测试的代理数量: ${names.length}`);
 
     const url = delayManager.getUrl(groupName);
-    console.log(`[ProxyGroups] 测试URL: ${url}, 超时: ${timeout}ms`);
+    debugLog(`[ProxyGroups] 测试URL: ${url}, 超时: ${timeout}ms`);
 
     try {
       await Promise.race([
         delayManager.checkListDelay(names, groupName, timeout),
         delayGroup(groupName, url, timeout).then((result) => {
-          console.log(
+          debugLog(
             `[ProxyGroups] getGroupProxyDelays返回结果数量:`,
             Object.keys(result || {}).length,
           );
         }), // 查询group delays 将清除fixed(不关注调用结果)
       ]);
-      console.log(`[ProxyGroups] 延迟测试完成，组: ${groupName}`);
+      debugLog(`[ProxyGroups] 延迟测试完成，组: ${groupName}`);
     } catch (error) {
       console.error(`[ProxyGroups] 延迟测试出错，组: ${groupName}`, error);
     } finally {

src/components/proxy/proxy-head.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 
 import { useVerge } from "@/hooks/use-verge";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import type { ProxySortType } from "./use-filter-sort";
 import type { HeadState } from "./use-head-state";
@@ -78,10 +79,10 @@ export const ProxyHead = ({
         color="inherit"
         title={t("proxies.page.tooltips.delayCheck")}
         onClick={() => {
-          console.log(`[ProxyHead] 点击延迟测试按钮，组: ${groupName}`);
+          debugLog(`[ProxyHead] 点击延迟测试按钮，组: ${groupName}`);
           // Remind the user that it is custom test url
           if (testUrl?.trim() && textState !== "filter") {
-            console.log(`[ProxyHead] 使用自定义测试URL: ${testUrl}`);
+            debugLog(`[ProxyHead] 使用自定义测试URL: ${testUrl}`);
             onHeadState({ textState: "url" });
           }
           onCheckDelay();

src/components/proxy/use-render-list.ts

@@ -5,6 +5,7 @@ import { useProxiesData } from "@/hooks/app-data";
 import { useVerge } from "@/hooks/use-verge";
 import { getRuntimeConfig } from "@/services/cmds";
 import delayManager from "@/services/delay";
+import { debugLog } from "@/utils/debug";
 
 import { filterSort } from "./use-filter-sort";
 import {
@@ -130,7 +131,7 @@ export const useRenderList = (
 
     // 设置组监听器，当有延迟更新时自动刷新
     const groupListener = () => {
-      console.log("[ChainMode] 延迟更新，刷新UI");
+      debugLog("[ChainMode] 延迟更新，刷新UI");
       refreshProxy();
     };
 
@@ -141,7 +142,7 @@ export const useRenderList = (
         const timeout = verge?.default_latency_timeout || 10000;
         const proxyNames = allProxies.map((proxy) => proxy.name);
 
-        console.log(`[ChainMode] 开始计算 ${proxyNames.length} 个节点的延迟`);
+        debugLog(`[ChainMode] 开始计算 ${proxyNames.length} 个节点的延迟`);
 
         // 使用 delayManager 计算延迟，每个节点计算完成后会自动触发监听器刷新界面
         delayManager.checkListDelay(proxyNames, "chain-mode", timeout);