在使用Vue開發(fā)過程中，我們有時(shí)會(huì)遇到一個(gè)問題：在瀏覽器調(diào)試器中使用debugger或console.log()，但卻發(fā)現(xiàn)并沒有任何輸出或調(diào)試中斷。這種情況下，我們需要尋找解決方案來解決Vue的debugger失效的問題。

首先，我們需要確認(rèn)是否使用了Vue開發(fā)調(diào)試工具 Vue.js Devtools。如果沒有使用此工具，那么Vue的debugger自然不會(huì)生效。所以，在開始項(xiàng)目開發(fā)前，請(qǐng)確保已經(jīng)安裝并啟用了Vue.js Devtools工具。

// Vue.js Devtools 官網(wǎng)下載地址
https://devtools.vuejs.org/

如果已經(jīng)啟用了Vue.js Devtools，但調(diào)試仍然無效，那么我們需要確認(rèn)是否正確引入了Vue的開發(fā)依賴 vue/dist/vue.js 文件。如果在引入中沒有指定 Vue.js 的模塊路徑，則很可能會(huì)導(dǎo)致 Vue 的調(diào)試器失效。

// 引入Vue.js文件示例

如果引入文件路徑無誤，但debugger仍然不起作用，我們就需要考慮WebPack配置的問題。在webpack配置中，可能會(huì)出現(xiàn)“process.env.NODE_ENV”變量判斷，而如果該變量的值為‘production’，則WebPack會(huì)自動(dòng)開啟壓縮模式，此時(shí)Vue的devtool失效。

// webpack配置示例
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
],

解決這個(gè)問題的方法很簡單，只需要將NODE_ENV的值改為其他字符串即可避免出現(xiàn)壓縮模式。

// 修改NODE_ENV示例
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
],

還有一種情況是，當(dāng)我們?cè)陂_發(fā)過程中使用Vue CLI創(chuàng)建的項(xiàng)目時(shí)，我們需要考慮Vue CLI提供的默認(rèn)配置。默認(rèn)情況下，Vue CLI開發(fā)模式下的 sourcemap 是關(guān)閉的。這就導(dǎo)致了斷點(diǎn)調(diào)試以及調(diào)試器窗口的全部失效。

為了解決這個(gè)問題，我們只需要簡單的打開sourcemap即可：

// Vue CLI開發(fā)模式下的啟用sourcemap配置
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}

最后，如果所有上述解決方法都不能解決Vue的debugger無法起作用的問題，我們還有一個(gè)更為萬能的解決方法：在Vue掛載后 forcing 下 break。

// 給Vue掛載后 強(qiáng)制中斷調(diào)試示例
mounted() {
console.log('掛載成功')
debugger
},

以上幾種方法足以解決Vue中debugger失效的問題。如果還有其他問題，請(qǐng)參考Vue官方文檔進(jìn)行解決。