如何为浏览器DevTools控制台默认添加自定义函数或类，使其每次打开时自动可用？

嘿，这个需求我太懂了——每次开控制台还要重新粘贴函数真的烦！这里有几个实用的方法，能让你的自定义函数/类每次打开控制台都自动加载，直接就能用：

这是Chrome/Edge DevTools自带的功能，专门用来保存和复用代码片段，还能设置自动执行：

• 打开DevTools（按F12或Ctrl+Shift+I），切换到Sources面板，左侧找到「Snippets」（如果没显示，点左上角的>>按钮展开菜单）
• 右键Snippets区域，选「New snippet」，给它起个好记的名字比如my-console-tools.js
• 把你的自定义函数/类粘贴进去，举个例子：

  // 自定义数组排序函数
  function sortByKey(arr, key) {
    return arr.sort((a, b) => (a[key] > b[key] ? 1 : -1));
  }
  
  // 带时间戳的日志工具类
  class LogHelper {
    static timestampLog(msg) {
      const time = new Date().toLocaleTimeString();
      console.log(`[${time}] ${msg}`);
    }
  }
  

• 保存后，右键这个snippet选「Run」，现在控制台就能直接调用这些函数了。要实现自动加载，还需两步：
  1. 点击DevTools右上角的齿轮图标打开设置，切换到「Experiments」标签，先勾选「Enable experiments」（如果没开的话），然后找到「Automatically run snippets on console load」并勾选
  2. 回到Snippets面板，右键你的代码片段，选择「Run on page load」——这样每次打开当前页面的控制台，这段代码都会自动执行，函数直接可用

如果想在所有页面的控制台都能用自己的函数，可以用这个方法：

• 打开Sources面板，左侧找到「Overrides」，点击「Select folder for overrides」，选择本地一个空文件夹，浏览器会请求权限，点击允许
• 在你选的本地文件夹里新建一个JS文件，比如global-console-functions.js，写入你的自定义代码
• 回到DevTools，勾选「Enable local overrides」，然后在控制台执行这段代码（只需要执行一次）：

  const script = document.createElement('script');
  script.src = 'global-console-functions.js';
  document.head.appendChild(script);
  

  之后每次打开任何页面的控制台，这个脚本都会自动注入，你的函数就全局可用了。

如果需要在所有浏览器会话里都生效，甚至同步到其他设备，用用户脚本扩展最方便：

• 安装Tampermonkey（Chrome/Edge应用商店都能找到）
• 点击扩展图标，选「Create a new script」，替换默认代码为：

  // ==UserScript==
  // @name         Console Custom Tools
  // @namespace    your-namespace
  // @version      0.1
  // @description  Auto-load custom functions in DevTools console
  // @author       You
  // @match        *://*/*  // 匹配所有页面，可改成你需要的特定域名
  // @grant        none
  // ==/UserScript==
  
  (function() {
      'use strict';
  
      // 把函数挂载到window对象，控制台就能直接访问
      window.sortByKey = function(arr, key) {
        return arr.sort((a, b) => (a[key] > b[key] ? 1 : -1));
      };
  
      window.LogHelper = class {
        static timestampLog(msg) {
          const time = new Date().toLocaleTimeString();
          console.log(`[${time}] ${msg}`);
        }
      };
  })();
  

• 保存脚本，之后打开任何匹配页面的控制台，你的自定义工具就能直接用了。

小提醒 #

为了避免和页面原有变量冲突，建议把所有自定义工具放到一个命名空间里，比如：

window.MyConsoleTools = {
  sortByKey: function(arr, key) { /* ... */ },
  LogHelper: class { /* ... */ }
};

之后调用的时候用MyConsoleTools.sortByKey(...)就不会有冲突啦～

内容的提问来源于stack exchange，提问作者Sotem