// 在開發(fā)環(huán)境啟用devtools
Vue.config.devtools = true;

// 在生產(chǎn)環(huán)境禁用
Vue.config.devtools = false;

// 基礎(chǔ)日志
console.log('普通信息');
console.warn('警告信息');
console.error('錯(cuò)誤信息');

// 分組日志
console.group('組名');
console.log('組內(nèi)信息');
console.groupEnd();

// 表格展示
console.table(['數(shù)據(jù)1', '數(shù)據(jù)2']);

// 性能計(jì)時(shí)
console.time('操作');
// ... 代碼執(zhí)行
console.timeEnd('操作');

// 代碼斷點(diǎn)
debugger;

// 條件斷點(diǎn)
if (someCondition) {
    debugger;
}

// Vue組件中使用
methods: {
    someMethod() {
        debugger;
        // 方法邏輯
    }
}

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

// 響應(yīng)攔截
axios.interceptors.response.use(response => {
    console.log('響應(yīng)數(shù)據(jù):', response);
    return response;
}, error => {
    return Promise.reject(error);
});

// 全局錯(cuò)誤處理
Vue.config.errorHandler = function(err, vm, info) {
    console.error('Vue錯(cuò)誤:', err);
    console.log('Vue實(shí)例:', vm);
    console.log('錯(cuò)誤信息:', info);
};

// 組件性能追蹤
Vue.config.performance = true;

// 自定義性能標(biāo)記
performance.mark('componentStart');
// ... 組件操作
performance.mark('componentEnd');
performance.measure('組件執(zhí)行時(shí)間', 'componentStart', 'componentEnd');

export default {
    created() {
        // 確保在created中不訪問DOM
    },
    mounted() {
        // DOM操作放在mounted中
    },
    beforeDestroy() {
        // 清理工作（定時(shí)器、事件監(jiān)聽等）
        clearInterval(this.timer);
        window.removeEventListener('resize', this.handleResize);
    }
}

// 正確的數(shù)據(jù)更新方式
this.$set(this.someObject, 'newProperty', value);

// 數(shù)組更新
this.array.splice(index, 1, newValue);

// 組件結(jié)構(gòu)建議
export default {
    name: 'ComponentName',
    props: {
        // 屬性驗(yàn)證
        propName: {
            type: String,
            required: true,
            validator: function(value) {
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    },
    data() {
        return {
            // 數(shù)據(jù)初始化
        }
    },
    computed: {
        // 計(jì)算屬性
    },
    methods: {
        // 方法定義
    }
}

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