Vue CLI Devtools 是一個基于 Chrome 開發者工具的插件，它提供了一種可視化的方式來調試和分析 Vue.js 應用程序，幫助開發人員更快地發現和解決問題。

Vue CLI Devtools 可以通過 npm 安裝在 Vue CLI 項目中：

npm i @vue/cli-plugin-
serve vue-cli-plugin-
apollo standard-
vue-lint-plugin --save-dev

安裝完成后，必須在 Vue CLI 配置文件中啟用它：

const devConfig = merge(baseConfig, {
mode: 'development',
plugins: [
new VueLoaderPlugin(),    new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: false,
host: 'localhost',
port: 8080,
open: true,
hot: true,
inline: true,
stats: 'errors-only',
historyApiFallback: true,
overlay: true,
before: function (app) {
app.use(bodyParser.json({ strict: false }))
app.use(cors({
origin: true
}))
app.use('/api', api)
},
proxy: {
'/graphql': {
target: 'http://localhost:3000/graphql',
ws: true
}
}
}
})
if (process.env.NODE_ENV === 'development') {
// 開發環境下啟用 Vue CLI Devtools 插件
const VueDevtools = require('vue-cli-plugin-devtools')
devConfig.plugins.push(VueDevtools())
}
module.exports = devConfig

現在，在使用 Vue CLI 開發 Vue.js 應用程序時，只需單擊 Chrome 開發者工具的 Vue 標簽即可進入 Vue CLI Devtools 界面，開始分析和調試應用程序：