【前端】Devtools使用

七灵微

于 2025-08-28 00:08:15 发布

阅读量708

点赞数 17

CC 4.0 BY-SA版权

分类专栏：前端🌟 文章标签：前端

本文链接：https://blog.csdn.net/qq_41775119/article/details/150922716

前端🌟 专栏收录该内容

66 篇文章

订阅专栏

react

作用：检查 React components，编辑 props 和 state，并识别性能问题。
安装
chrome 插件
其他浏览器：安装 react-devtools npm 包
终端react-devtools打开开发者工具，将以下 <script> 标签添加到你网站的 <head> 开头来连接你的网站 <script src="http://localhost:8097"></script>

vue

安装&使用

chrome 插件
vite 插件：如果使用vite必选

npm add -D vite-plugin-vue-devtools

//  Configuration Vite
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools({
		//在这里放options
	  appendTo: /main\.ts$/, // 在 main.ts 里注入，而不是往 body 里加 <script>
      componentInspector: true, // 启用组件检查器（默认就是 true）
      launchEditor: 'webstorm', // 点击 "open in editor" 时用 WebStorm 打开
	}),
  ],
})
//选项
interface VitePluginVueDevToolsOptions {
  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp

  /**
   * Enable vue component inspector
   *
   * @default true
   */
  componentInspector?: boolean | VitePluginInspectorOptions

  /**
   * Target editor when open in editor (v7.2.0+)
   *
   * @default code (Visual Studio Code)
   */
  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | string
}

1）appendTo?: string | RegExp
默认值：‘’（不用）
含义：把调试工具的入口代码追加到指定的模块里，而不是往 <body> 注入 <script>。
使用场景：有些项目不是以 HTML 作为入口（比如 Electron、SSR、单文件入口），就没法直接往<body>加脚本，这时可以指定一个模块文件（字符串路径或正则匹配）作为注入点。
风险提示：官方也说了“只有非常清楚原理时才用”，因为如果随便乱填，可能会导致 DevTools 注入失败或项目打包报错。
2）componentInspector?: boolean | VitePluginInspectorOptions
默认值：true
含义：是否启用 Vue 组件检查器 (Inspector)。
启用后，你可以在浏览器里按住 Alt（可配合鼠标点击）直接定位到某个组件源码。
如果传对象，可以进一步配置 Inspector（比如快捷键、自定义行为）。
3. launchEditor?: ...
默认值：‘code’（即 VS Code）
含义：当你在浏览器中点击 “在编辑器中打开组件” 时，用哪个编辑器打开。
可选值：‘code’ | ‘webstorm’ | ‘idea’ | ‘sublime’ | ‘vim’ | … 等，也可以自定义字符串（比如设置为本机的可执行命令）。
3. 独立应用

npm add -g @vue/devtools #- D/-g
vue-devtools #启动

根据安装方式，使用方式不同
1）全局包
需要将代码<script src="http://localhost:8098"></script>放入<head>
或者调试远端设备，

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

需要注意上述要在部署到生产环境之前移除
2）依赖包
./node_modules/.bin/vue-devtools执行

//直接项目中引入 在main.ts 一定要在 createApp() 之前 调用
import { devtools } from '@vue/devtools'
if (process.env.NODE_ENV === 'development')
  devtools.connect(/* host (the default is "http://localhost"), port (the default is 8090) */)//这个在调试移动设备常用
//确保在创建vue app之前调用connect

//修改配置 比如port
PORT=8000 vue-devtools //执行命令中添加

window.__VUE_DEVTOOLS_PORT__ = 8000

devtools.connect(/ host /, 8000)

//链接远程服务器上的页面 用到ngrok这个proxy 需要下载 https同理
ngrok http 8098//启动vue-devtools之后运行
devtools.connect('https://example.ngrok.io', null)//注意千万不要设置端口，ngrok自动设置好了

功能

实时编辑属性：Vue DevTools允许您直接实时编辑属性，并立即查看反映的更改。此功能对于快速测试更改特别有用，而无需重新启动应用程序或手动更新代码。
时间旅行调试：最强大的功能之一是它能够执行时间旅行调试。这意味着您可以随时检查商店的状态，让您跟踪错误，并了解应用程序的状态如何随时间变化、性能记录。

Event Info 
component : Hello 
type: mount
measure : start //性能测量起点。

Group Info //说明这一条事件属于一个 事件组（比如一个大操作里包含多个子事件）。
events : 2 //表示这个组里有 2 个事件 比如 Hello start和Hello end

Vue路由器集成：查看路由列表及其详细信息。

path: /hey/: id
name : hey //路由命名
regexp : /^\/hey\/([^/]+?)\/?$/i //vue router把路由规则编译成正则表达式匹配url
• keys : "id" •//参数定义
	0: Object,//参数列表里参数按顺序定义
	name : id,
	optional: false //能否省略
	repeatable: false //能否重复
• meta: Object
• score : "80 | 60"//Vue Router 内部给路由规则算的 匹配优先级分数，分数越高，匹配优先。