每個(gè)開發(fā)者都會(huì)遇到一個(gè)問題：當(dāng)網(wǎng)站被放到互聯(lián)網(wǎng)上，我們?nèi)绾文軌虼_保它能夠被用戶正確地呈現(xiàn)？解決這個(gè)問題，其中一項(xiàng)重要的工作就是調(diào)試。Vue提供了一些工具來協(xié)助我們調(diào)試代碼中可能出現(xiàn)的錯(cuò)誤。

Vue有兩種版本可以供使用：一種是開發(fā)環(huán)境版本，另外一種是生產(chǎn)環(huán)境版本。在開發(fā)環(huán)境版本中，有一個(gè)被稱為Vue Devtools的工具，它能夠協(xié)助我們調(diào)節(jié)Vue實(shí)例。Vue Devtools是一個(gè)瀏覽器插件，能夠幫助我們檢查組件的數(shù)據(jù)、計(jì)算響應(yīng)、事件、路由、存儲(chǔ)和組件狀態(tài)等等。

install the Devtools extension for Chrome

在你的Vue項(xiàng)目中，你也可以調(diào)用Vue.config.devtools來開啟和控制Devtools的功能。

Vue.config.devtools = true

Devtools有一些快捷鍵，可以快速開啟、關(guān)閉和切換面板：

ctrl + shift + i // 開啟 Devtools
ctrl + shift + j // 切換控制臺(tái)面板
ctrl + t // 切換組件樹面板
ctrl + p // 切換 Vuex 面板

雖然Devtools可以幫助我們解決許多問題，但實(shí)際中，有的錯(cuò)誤還是會(huì)在生產(chǎn)環(huán)境中出現(xiàn)。 為了解決這個(gè)問題，Vue提供了一個(gè)被稱為Vue Production Tip工具，它可以幫助我們?cè)谏a(chǎn)環(huán)境中發(fā)現(xiàn)一些常見問題。

在Vue 2.2.0以及以后版本中，如果你在運(yùn)行生產(chǎn)環(huán)境版本的Vue時(shí)，會(huì)發(fā)生以下情況：

You are running Vue in production mode.
Make sure to turn on production tip when
deploying for production.

這就是Vue Production Tip工具，它幫助你在代碼中尋找其中可能出現(xiàn)的問題，并且提示你如何修復(fù)這些問題。想要使用Vue Production Tip工具，在代碼中你需要添加以下的代碼：

Vue.config.productionTip = true

當(dāng)然，如果你想要通過Vue生產(chǎn)工具來關(guān)閉Vue Production Tip，也可以添加以下代碼：

Vue.config.silent = true

Vue提供了一些簡(jiǎn)單而有用的工具，這些工具能夠幫助我們?cè)陂_發(fā)和生產(chǎn)環(huán)境中快速而準(zhǔn)確地調(diào)試和維護(hù)Vue代碼。