移动端 web 调试神器 - Eruda

移动端 web 调试神器 - Eruda

移动端 web 调试神器 - Eruda 基本使用

效果预览

1659406510587

核心步骤

安装依赖

yarn add vite-plugin-html -D
# or
npm install vite-plugin-html -D

修改 vite 配置

  • 编辑 vite.config.ts 文件,添加以下配置
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
+ import { createHtmlPlugin } from 'vite-plugin-html'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
+ export default defineConfig(({ mode }) => {
+  return {
    plugins: [
      vue(),
+      createHtmlPlugin({
+        inject: {
+          data: {
+            erudaScript:
+              mode !== 'production'
+                ? `<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.5.0/eruda.min.js"></script><script>eruda.init()</script>`
+                : '',
+          },
+        },
+      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
+  }
})

注入调试脚本

  • 调试工具只会在 yarn dev 开发阶段生效,在 yarn build 构建打包阶段自动剔除。
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端 web 调试神器 - Eruda</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
+    <%- erudaScript %>
  </body>
</html>

Demo 预览

安装依赖

yarn

启动项目

yarn dev

打包项目

yarn build
posted @ 2022-08-02 15:06  MegaSu  阅读(774)  评论(0编辑  收藏  举报