移动端 web 调试神器 - Eruda
移动端 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的更多相关文章
- 移动端页面调试神器-browser-sync
最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...
- eruda手机端调试神器
在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,如果想在手机上能和浏览器一样看控制台调试就更加完美了: 一个手机端调试神器eruda是一个专为手机网页前端设计的调试面板 ...
- 移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...
- Eruda 一个被人遗忘的调试神器
Eruda 一个被人遗忘的调试神器 引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
- 移动端 Web 网页调试技巧
原文出处: 盛瀚钦 本文主要列举了调试本地网页.查看测试环境网页的各种方法,涵盖了PC.iPad.移动端的调试技巧. 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页. ...
- 移动端真机debug调试神器 vConsole学习（一）之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- 转载--未看关于移动端Web远程开发调试
移动端Web开发调试之Chrome远程调试(Remote Debugging) http://blog.csdn.net/freshlover/article/details/42528643 移动端 ...
随机推荐
- 跟着 8.6k Star 的开源数据库，搞 RAG！
过去 9 年里,HelloGitHub 月刊累计收录了 3000 多个开源项目.然而,随着项目数量的增加,不少用户反馈:"搜索功能不好用,找不到想要的项目!" 这让我意识到,仅仅收 ...
- Qt/C++编写视频监控系统83-自定义悬浮条信息
一.前言 一般视频控件上会给出个悬浮条,这个悬浮条用于显示分辨率或者一些用户期望看到的信息,一般常用的信息除了分辨率以外,还有帧率.封装格式.视频解码器名称.音频解码器名称.实时码率等,由于实际的场景 ...
- Qt开发经验小技巧251-255
今天在一个头文件中,发现 #ifdef Q_OS_WIN #ifdef Q_CC_MSVC 之类的都失效了,搞得差点怀疑人生了.经历过之前类似的教训后,排查原来是没有提前引入 qglobal.h 头文 ...
- Qt编写地图综合应用19-地图服务
一.前言 国内提供地图服务的厂家基本上是五家,百度地图.高德地图.腾讯地图.搜狗地图.天地图,国外的一般还有谷歌地图.微软地图(BING地图),这几家的地图服务的api接口都大同小异,甚至很多函数的名 ...
- [转]Mybatis入门和简单Demo
原文链接: 1.Mybatis入门和简单Demo 2.Mybatis的CRUD案例 3.Mybatis分页查询与动态SQL
- [转]在WorldWind中加入*.x格式的三维模型
Nasa支持的WorldWind项目最近推出了1.4RC5版,可以加入三维模型,效果如下图所示: 点击查看大图 WW1.4对XML配置文件增加了许多新的元素,其中ModelFeature就是用来增加三 ...
- uniapp请求封装-token无感刷新
当前是vue3+ts版本的封装 vue3+js版本请求封装可参考 https://www.cnblogs.com/lovejielive/p/14343619.html token无感刷新,可自行删除 ...
- python SQLAlchemy ORM——从零开始学习03 如何针对数据库信息进行排序
03 如何进行排序 3-1准备工作: 因为要排序,所以需要随机多谢数据,model见后文.也需要random进行随机 from model import User, Engine from sqlal ...
- Netty与NIO服务器-NIO中的零拷贝
1.什么是零拷贝 一种避免 CPU 将数据从一块存储拷贝到另外一块存储的技术.针对操作系统中的设备驱动程序.文件系统以及网络协议堆栈而出现的各种零拷贝技术极大地提升了特定应用程序的性能,并且使得这些应 ...
- 同态加密技术及其在FL/MPC中的应用-洪澄
转载:链接 Pailler是具有一次乘法同态的. Pailler 我好像一直叫的都是 "拍利尔" . 关于定理的证明,参考:Pailler 同态性 安全性 语义安全 DCR问题 简 ...