在今天的文章中,我想深入研究我最近发现的一个项目- Vue Vite DevTools。这个项目是一个Vite插件,允许你在Vue应用程序中拥有惊人的DevTools。它的灵感来自Nuxt DevTools,因此UI几乎相同。 你可以在这里查看插件的所有文档。 安装 插件的安装非常简单。 yarn add --dev vite-plugin-vue-devtools 然后,将其添加到vite....
1. 安装依赖 pnpmaddvite-plugin-vue-devtools -D 2.引入插件 在vite.config.ts 中引入插件,并在 plugins 中添加该插件: importvuefrom'@vitejs/plugin-vue'importVueDevToolsfrom'vite-plugin-vue-devtools'...exportdefaultdefineConfig({plugins: [vue(),VueDevTools(), ... ] ... }) 启动项目,并在浏...
本地是 main.tsx 引入了 App.tsx,并且还有 react 和react-dom/client 的依赖: 用devtools看下: 可以看到,main.tsx、App.tsx 还有 react 和 react-dom/client 的依赖都是直接引入的,做了编译,但是并没有打包。 这是基于浏览器的 type 为 module 的 script 实现的: 我们加一个 index2.html: <!doctype htm...
不过,如果你想要在 Vite 项目中正常地使用 Vue Devtools 进行调试,你可以遵循以下步骤: 确保Vue Devtools 已安装并启用:在 Chrome 或 Firefox 等浏览器中安装 Vue Devtools 扩展,并确保它已启用。 检查你的 Vite 配置:确保你的 Vite 项目正确配置了 Vue 插件。对于 Vue 3,你通常需要在vite.config.js或vite.con...
如配置代理、别名、CSS预处理器等。Vue DevTools：在开发Vue应用时，确保安装并启用Vue DevTools浏览器扩展，以便更好地调试应用状态。TypeScript支持：如果项目中使用TypeScript，Vite已默认支持，你只需在项目中包含.ts或.tsx文件即可。优化：学习如何利用Vite的内置优化选项和外部插件，进一步提升应用性能。
用devtools 看下: 可以看到,main.tsx、App.tsx 还有 react 和 react-dom/client 的依赖都是直接引入的,做了编译,但是并没有打包。 这是基于浏览器的 type 为 module 的 script 实现的: 我们加一个 index2.html: 代码语言:javascript 复制 <!doctype html>Vite+React+TS 然后添加 aaa.js 代码语言...
现在,如果我们正在调试我们的代码,打开 DevTools 中的 "Sources " 面板,我们应该会看到一个脚本,它与源代码在编辑器中的样子几乎相同。 通过这种方式,我们就可以正确地调查错误在浏览器中的位置,而不必使用 source map 。当然,这个具体的例子是很造作的,但你可以看到这可能是非常有用的,因为这意味着wmr在你的开...
第 4 版中发生了很多变化！从较高的层面来看，这个新版本应该可以提供显着的性能提升和改进的导航体验...
Vite 4.2 于 2023 年 3 月发布,该版本的主要改进是提升了 source map 的调试体验。Vite 团队与 Chrome Devtools 团队进行合作,修复了一些长期存在的路径显示问题。通过x_google_ignoreList source map 扩展添加了排除文件的选项来排除堆栈跟踪。 这个选项被一些更高级的框架,如 Nuxt 和 Angular 所使用,它可以让开...
解决方法是在main.ts中加入这几行代码: const win: any = window if (process.env.NODE_ENV === 'development') { if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in win) { win.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app } } 自己记录一下,方便自己找到。。。