移动端 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. xcrun: error: unable to find utility "xctest", not a developer tool or in PATH

    Start Xcode, select "Preferences -> Locations". Chances are that your Command Line Tool ...

  2. Qt编写物联网管理平台50-超强跨平台

    一.前言 跨平台的需求,除了是用户的需求外,也是为了适应日益增长的国产操作系统的发展的需要,当前国产操作系统发展的如火如荼,100%都是围绕linux系统展开,说的好听点就是站在巨人的肩膀上开发,不好 ...

  3. Nlog基本使用

    引入get包:NLog.Extensions.Logging 添加一个nlog.cofig文件 并设置属性,始终复制或较新则复制 <?xml version="1.0" en ...

  4. [转]OpenCV使用之-----BruteForceMatcher无法使用

    最近Opencv升级比较快,从2.4.0到2.4.1到2.4.2,使得我这个还在使用2.3.1的人很不好意思,而且听说新版本里添加了tbb并行功能,急着想用这些功能的我赶紧下了2.4.2. 按部就班的 ...

  5. ids4-startup

    https://stackoverflow.com/questions/28418360/jwt-json-web-token-audience-aud-versus-client-id-whats- ...

  6. WPFMediaKit --WPF项目中 调用摄像头拍照

    <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  7. dart变量声明和变量类型

    ps==>所有的代码必须放在main方法中 main方法有两种写法 1==> main() { print("你好,dart我们相遇了"); } 2==> voi ...

  8. Ubuntu开启root账户步骤

    在VMware中新建一个Ubuntu,经常使用sudo 太麻烦,还是开启root账户吧. 1.打开 终端: 输入下列命令sudo gedit /usr/share/lightdm/lightdm.co ...

  9. nacos(五): 读取nacos配置并实现动态刷新

    接上回<nacos(四): 创建第一个消费者Conumer(单体)>,这一篇将介绍如何读取nacos中的配置,并实现动态刷新. 首先,需要先引入spring-cloud-starter-a ...

  10. [CF494D] Birthday 题解

    首先 \(S(u)\) 显然是 \(u\) 的子树. 假如 \(u\) 是定点,问题转化为区间求平方和,十分简单. 于是我们用线段树维护区间平方和,支持区间加,然后离线问题,在 \(u\) 的位置处理 ...