uni-app HBuilder开发工具控制台日志要求增加搜索功能 以方便调试App时查看过多日志

在 uni-app 使用 HBuilder 开发工具时，增加控制台日志的搜索功能确实可以极大提升调试效率。虽然 HBuilder 原生并未提供直接扩展控制台搜索功能的接口，但我们可以通过一些变通的方法来实现类似效果。以下是一个基于 web 技术栈的模拟实现思路，借助 uni-app 的自定义组件和 web 技术来增强日志查看体验。

实现思路

1. 捕获日志信息：使用 console 的重写方法来捕获所有日志信息。
2. 存储日志信息：将捕获的日志信息存储在一个全局变量或组件的 data 中。
3. 实现搜索功能：在自定义组件中提供一个输入框和过滤逻辑，根据输入内容实时过滤日志。

代码实现

1. 捕获日志信息

在 main.js 或 App.vue 中重写 console 方法：

let logStorage = [];
const originalConsoleLog = console.log;

console.log = function(...args) {
    const logMessage = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');
    logStorage.push(logMessage);
    originalConsoleLog.apply(console, args);
};

Vue.prototype.$logStorage = logStorage; // 将日志存储挂载到 Vue 实例上，方便组件访问

2. 创建自定义日志查看组件

创建一个名为 LogViewer.vue 的组件：

<template>
    <div>
        <input v-model="searchQuery" placeholder="Search logs..." />
        <div v-for="log in filteredLogs" :key="log">{{ log }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchQuery: '',
            logs: this.$logStorage
        };
    },
    computed: {
        filteredLogs() {
            if (!this.searchQuery) return this.logs;
            return this.logs.filter(log => log.includes(this.searchQuery));
        }
    }
};
</script>

3. 使用自定义组件

在 App.vue 或其他需要查看日志的页面引入并使用 LogViewer 组件：

<template>
    <div id="app">
        <!-- 其他内容 -->
        <LogViewer />
    </div>
</template>

<script>
import LogViewer from './components/LogViewer.vue';

export default {
    components: {
        LogViewer
    }
};
</script>

总结

上述方法通过重写 console.log 方法捕获日志，并在自定义组件中展示和搜索日志，虽然是一个简化的模拟实现，但在开发调试阶段可以极大地提高日志查看效率。注意，这种方法仅适用于开发环境，生产环境应避免重写 console 方法，以免引入不必要的性能开销或安全风险。