移动端 web 调试神器 - Eruda

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

效果预览

核心步骤

安装依赖

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

移动端 web 调试神器 - Eruda的更多相关文章

  1. 移动端页面调试神器-browser-sync

    最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...

  2. eruda手机端调试神器

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,如果想在手机上能和浏览器一样看控制台调试就更加完美了: 一个手机端调试神器eruda是一个专为手机网页前端设计的调试面板 ...

  3. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  4. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  5. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  6. 【移动端debug-6】如何做一个App里的web调试小工具

    原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...

  7. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  8. 移动端 Web 网页调试技巧

    原文出处: 盛瀚钦 本文主要列举了调试本地网页.查看测试环境网页的各种方法,涵盖了PC.iPad.移动端的调试技巧. 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页. ...

  9. 移动端真机debug调试神器 vConsole学习（一）之基础

    参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...

  10. 转载--未看关于移动端Web远程开发调试

    移动端Web开发调试之Chrome远程调试(Remote Debugging) http://blog.csdn.net/freshlover/article/details/42528643 移动端 ...

随机推荐

  1. Qt音视频开发02-海康sdk解码（支持句柄/回调/gpu模式/支持win/linux）

    一.前言 为何还要选用使用海康sdk,之前不是ffmpeg已经牛皮吹上天了吗?这个问题问得好,那是因为无论ffmpeg也好还是vlc/mpv之类的,都是实现的播放相关,不同的监控硬件厂家对应设备还有很 ...

  2. Qt音视频开发9-ffmpeg录像存储

    一.前言 上一篇文章写道直接将视频流保存裸流到文件,尽管裸流文件有一定的好处,但是 毕竟大部分用户需要的不是裸流而是MP4视频文件,所以需要将视频流保存成MP4文件,毕竟电脑上的播放器包括默认的播放器 ...

  3. v-for和v-if一起使用时的坑：The 'XXX' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'

    目的:Vue - ElementUI中循环渲染表格,控制字段的显示与隐藏 v-if与v-for同时使用. 在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正 ...

  4. 即时通讯技术文集（第38期）：IM代码入门实践(Part2) [共15篇]

    为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第38 期. [- 1 -] 高仿Android版手机QQ首页侧滑菜单源码 [附件下载] [链接 ...

  5. 怎么在 Linux 下运行 smart_rtmpd

    怎么在 Linux 下运行 smart_rtmpd 操作系统的准备 我们知道比较流行的 Linux 操作系统基本上分为两类,一类是以 Redhat 为基线的 Redhat, CentOS:另一类是 D ...

  6. JavaScript 数组展平方法： flat() 和 flatMap()

    从 ES2019 中开始引入了一种扁平化数组的新方法,可以展平任何深度的数组. flat flat() 方法创建一个新数组,其中所有子数组元素以递归方式连接到特定深度. 语法:array.flat(d ...

  7. Android增加USB Camera摄像头驱动支持

    一般情况下kernel需要添加以下宏 ================================= CONFIG_VIDEO_DEV=yCONFIG_VIDEOBUF2_CORE=yCONFIG ...

  8. 中间件 vs 过滤器

    在 ASP.NET Core 中,中间件(Middleware) 和 过滤器(Filters) 是两种不同的机制,用于处理请求和响应的管道.它们的作用和适用场景有所不同,以下是它们的对比和详细说明: ...

  9. 接口(interface)：实例化时要覆盖所有抽象方法，否则仍为抽象类

    概述 /* * 接口的使用 * 1.接口使用interface来定义 * 2.Java中,接口和类是并列的两个结构 * 3.如何定义接口:定义接口中的成员 * * 3.1 JDK7及以前:只能定义全局 ...

  10. 深入解析 Spring AI 系列：解析返回参数处理

    关于普通聊天对接,目前已经完成了大部分讲解,剩下的就是最后一步,今天我们将重点讨论在返回参数时需要注意的几个关键点.为了更好地说明这些注意事项,我们仍然以OpenAI接口为例,逐步讲解相关的代码实现, ...