移动端 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 移动端 ...
随机推荐
- 【网络安全】Shell 脚本学习
声明:学习视频来自 b 站 up 主 泷羽 sec,如涉及侵权马上删除文章 声明:本文主要用作技术分享,所有内容仅供参考.任何使用或依赖于本文信息所造成的法律后果均与本人无关.请读者自行判断风险,并遵 ...
- PHP API接口数据简单快速的加密解密
php7.0版本以上不支持mcrypt_encryp函数进行加密的代码,加密方式改为openssl_encrypt 用自己私人的服务器来测试吧,99买阿里云 openssl_系列支持php5.3以上版 ...
- Transmission安装及更换官方UI
相关链接地址: Transmission镜像地址 Transmission 浏览器管理界面:Transmission Web Control UI. 创建容器 docker-compose.yaml ...
- Linux USB 文件读写性能测试
USB 端口读写性能测试:========================================================读测试:sync && echo 3 > ...
- 《入梦》Revisited
寝室里有本<美丽新世界>(Brave New World),书页翻过灯塔里上升的螺旋阶梯,还有大概三分之一的篇幅是<重返美丽新世界>(Brave New World Rev ...
- 字体查看比较工具 -- （采用wpf开发）
为了进一步加深对字体文件的理解,我写了这个小工具.可以查看字体文件信息.显示字体文件包含的字体.可以从字体文件中抽取字体,保存为其子集. 加入qq群:565438497,下载最新程序. 1 显示字体文 ...
- 夜莺监控支持 ES 日志告警了
夜莺项目( https://github.com/ccfos/nightingale )发布了 v8.0.0-beta.3 版本,这个版本主要是支持了 ES 日志告警,下面给大家介绍一下. 新版本下载 ...
- 单点认证（SSO）方案调研总结
SSO方案 SSO介绍 单点登录(SSO)是一种身份验证解决方案,可让用户通过一次性用户身份验证登录多个应用程序和网站.这意味着用户只需输入一次用户名和密码,即可访问所有相互信任的系统,而无需在每个系 ...
- Logstash介绍
Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地. 集中.转换和存储你的数据 Logstash是一个 ...
- Cobweb Intermediate pg walkthrough
源码泄露 可以直接看到源码存在sql注入 反弹shellpayload http://192.168.167.162/phpinfo%22%20%20union%20select%20'system( ...