移动端 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/C++开发经验小技巧291-295

    国内站点:https://gitee.com/feiyangqingyun 国际站点:https://github.com/feiyangqingyun 关于在pro中区分linux系统,在Qt4套件 ...

  2. Qt/C++开发经验小技巧286-290

    国内站点:https://gitee.com/feiyangqingyun 国际站点:https://github.com/feiyangqingyun 很多时候项目越写越大,然后就可能遇到,明明之前 ...

  3. Qt音视频开发39-人脸识别在线版

    一.前言 关于人脸识别这块,前些年不要太火,哪怕是到了今天依然火的一塌糊涂,什么玩意都要跟人脸识别搭个边,这东西应该只是人工智能的一个很小的部分,人脸识别光从字面上理解就是识别出人脸区域,其实背后真正 ...

  4. cmake错误：CMake Error: CMake can not determine linker language for target

    解决方案:因为你的library只有头文件,没有cpp文件 在add_library中增加cpp文件 同时建立一个空的cpp文件即可. 处理后的源代码结构和CMakeLists.txt内容如下所示: ...

  5. 查询 maven 依赖 的最新版本号

    如何通过maven官网查询相关依赖的具体代码和版本? 通过官网:http://mvnrepository.com/,或者:https://search.maven.org/ 在搜索栏中输入想要引入的依 ...

  6. IM通讯协议专题学习(二)：快速理解Protobuf的背景、原理、使用、优缺点

    本文由vivo技术团队Li Guanyun分享,为了提升阅读体验,进行了较多修订和重新排版. 1.引言 Protobuf 作为一种跨平台.语言无关.可扩展的序列化结构数据通讯协议,已广泛应用于网络数据 ...

  7. 2025-01-01：优质数对的总数Ⅰ。用go语言，给定两个整数数组 nums1 和 nums2，分别长度为 n 和 m，以及一个正整数 k。 如果 nums1 数组中的元素 nums1[i] 能被

    2025-01-01:优质数对的总数Ⅰ.用go语言,给定两个整数数组 nums1 和 nums2,分别长度为 n 和 m,以及一个正整数 k. 如果 nums1 数组中的元素 nums1[i] 能被 ...

  8. postman环境设置以及参数传递

    通常一个公司项目有不同的环境(开发环境,测试环境,上线环境),在做测试时候,有可能会遇到接口改变之类的,postman保存了很多接口,想要再测试局需要多次修改域名或者端口,这个时候就需要配置环境 1. ...

  9. cmake-3

    本节内容,转载文章:https://www.zhihu.com/column/c_200294809 :参考程序:https://github.com/BrightXiaoHan/CMakeTutor ...

  10. Dotnet程序的内存与垃圾回收

    都知道程序运行时的变量是放在内存里的,从我们学c++ 就知道有析构函数  malloc,还有学c#的时候天天 什么垃圾回收 GC 像背八股文样的 ,但是这个内存究竟能分配多少 没有人想过吧 ,不论做什 ...