Vue程序调试和排错技巧分享

// 在开发环境启用devtools
Vue.config.devtools = true;

// 在生产环境禁用
Vue.config.devtools = false;

// 基础日志
console.log('普通信息');
console.warn('警告信息');
console.error('错误信息');

// 分组日志
console.group('组名');
console.log('组内信息');
console.groupEnd();

// 表格展示
console.table(['数据1', '数据2']);

// 性能计时
console.time('操作');
// ... 代码执行
console.timeEnd('操作');

// 代码断点
debugger;

// 条件断点
if (someCondition) {
    debugger;
}

// Vue组件中使用
methods: {
    someMethod() {
        debugger;
        // 方法逻辑
    }
}

// 请求拦截
axios.interceptors.request.use(config => {
    console.log('请求配置:', config);
    return config;
}, error => {
    return Promise.reject(error);
});

// 响应拦截
axios.interceptors.response.use(response => {
    console.log('响应数据:', response);
    return response;
}, error => {
    return Promise.reject(error);
});

// 全局错误处理
Vue.config.errorHandler = function(err, vm, info) {
    console.error('Vue错误:', err);
    console.log('Vue实例:', vm);
    console.log('错误信息:', info);
};

// 组件性能追踪
Vue.config.performance = true;

// 自定义性能标记
performance.mark('componentStart');
// ... 组件操作
performance.mark('componentEnd');
performance.measure('组件执行时间', 'componentStart', 'componentEnd');

export default {
    created() {
        // 确保在created中不访问DOM
    },
    mounted() {
        // DOM操作放在mounted中
    },
    beforeDestroy() {
        // 清理工作（定时器、事件监听等）
        clearInterval(this.timer);
        window.removeEventListener('resize', this.handleResize);
    }
}

// 正确的数据更新方式
this.$set(this.someObject, 'newProperty', value);

// 数组更新
this.array.splice(index, 1, newValue);

// 组件结构建议
export default {
    name: 'ComponentName',
    props: {
        // 属性验证
        propName: {
            type: String,
            required: true,
            validator: function(value) {
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    },
    data() {
        return {
            // 数据初始化
        }
    },
    computed: {
        // 计算属性
    },
    methods: {
        // 方法定义
    }
}

// vue.config.js
module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}