能否在Vue Devtools中排除指定Vue事件与Vuex Mutations？

嘿，这个场景我太熟悉了——每秒50次的Mutation直接把Devtools的内存占满，半分钟崩溃完全是情理之中。下面给你几个实用的方案，从简单到灵活，按需选择：

方案1：用Devtools内置过滤快速临时解决 #

这是最直接的临时方案，不用改代码：

• 打开Vue Devtools的Vuex面板，顶部搜索框输入你要排除的Mutation名称，点击旁边的漏斗图标，选择「排除匹配项」，就能把这个高频Mutation从列表里隐藏。
• 对于高频事件，切换到Events面板，用同样的搜索+排除操作，就能过滤掉特定事件。

缺点：刷新页面后过滤规则会重置，适合临时调试用。

方案2：从提交源头阻止Devtools记录（推荐） #

如果这个高频Mutation是你自己代码里触发的，直接在提交时告诉Devtools不要记录它，性能最优：
Vuex的commit方法支持第三个参数，传入{ devtools: false }就能跳过Devtools的记录：

// 提交高频Mutation时添加devtools: false选项
store.commit('highFreqUpdate', payload, { devtools: false })

同样，对于Vue组件的自定义事件，触发时可以用$emit的第三个参数控制：

// 阻止特定事件被Devtools记录
this.$emit('highFreqEvent', data, { devtools: false })

优点：从根源减少Devtools的记录量，不会占用额外内存，永久生效（只要代码不改）。

方案3：自定义Devtools插件实现灵活过滤 #

如果需要更复杂的过滤规则（比如按payload内容、触发频率过滤，或者批量排除多个项），可以写个简单的Devtools插件：

// 自定义过滤插件
const devtoolsFilterPlugin = {
  install(app) {
    // 只在开发环境生效
    if (process.env.NODE_ENV !== 'development') return;

    // 注册Mutation过滤钩子
    app.$devtools.addHook('mutation:before', (mutation) => {
      // 排除指定名称的Mutation，可扩展为数组匹配
      const excludedMutations = ['highFreqUpdate', 'anotherFreqMutation'];
      if (excludedMutations.includes(mutation.type)) {
        return false; // 返回false阻止记录
      }
    });

    // 注册事件过滤钩子
    app.$devtools.addHook('event:before', (event) => {
      const excludedEvents = ['highFreqEvent'];
      if (excludedEvents.includes(event.name)) {
        return false;
      }
    });
  }
};

// 在Vue应用中挂载插件
createApp(App)
  .use(store)
  .use(devtoolsFilterPlugin)
  .mount('#app');

优点：规则灵活可扩展，适合需要批量过滤或复杂条件过滤的场景。

补充：Vue 2的适配写法 #

如果你用的是Vue 2，插件写法略有不同，直接在Vue实例初始化时操作：

Vue.config.devtools = true;
if (process.env.NODE_ENV === 'development') {
  Vue.devtools.addHook('mutation:before', (mutation) => {
    if (mutation.type === 'highFreqUpdate') return false;
  });
}

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