移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端中使用 vConsole调试
移动端调试工具vconsole安装
Git地址:https://github.com/WechatFE/vConsole
vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。
目前vConsole自带有2个面板,默认为“日志”面板,负责展示log。
项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插件 vconsole
下载vconsole最新版本或者直接用npm下载nom install vconsole
引入vconsole到项目中:
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
或者通过import 初试化:
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
项目运行,点击页面右下角vconsole图标,即可看到debug内容
如果想要查看接口调用情况,和浏览器一样直接点击network按钮即可
https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
这个是调试自己开发的网站在手机版上用的,太麻烦
腾讯有个调试工具可以开启微信和QQ浏览器的调试模式的,不适用其他浏览器
====================
如何在手机端模拟浏览器控制台,
手机端网页的调试工具Eruda: Console for Mobile Browsers
https://eruda.liriliri.io/
gtihub地址:
https://github.com/liriliri/eruda
效果预览
http://liriliri.github.io/eruda/
进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。
特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码,重新打开页面并alert一下。
使用Chrome,Firefox连接手机调试限定于使用相应的手机版浏览器,意义并不大。
Weinre,Vorlonjs跟debugGap等工具实际上也并不好用,初始化过于繁琐,而且仅能调调样式,打打log,断点调试什么的也没有办法支持。每次测试出现问题,基本上只能拿手机过来连接自己的本地环境改代码查bug。
使用手机端网页的调试工具Eruda:在你的代码里面,加入下面两行代码,就可以轻轻松松实现手机调试了
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
console.log('控制台打印信息');
</script>
ps:想要在手机上查看,可以使手机跟你的电脑在同一个局域网内,然后访问电脑的ip,然后就能查看你做的h5页面了
====================
UI Recorder是一款零成本的整体自动化测试解决方案,一次自测等于多次测试,测一个浏览器等于测多个浏览器!
以下是本产品的特点:自测 = 自动化测试:
对于开发人员来讲,自测是开发流程中缺一不可的过程,我们要实现的目标就是自测过程中即可同步的录制出自动化脚本,实现真正的零成本自动化
支持全平台无线native app录制: 基于macaca实现: https://macacajs.com/
无干扰录制:所作操作均无需交互干扰,鼠标、键盘、alert弹框、文件上传,完全按照正常自测流程操作即可(以下操作除外:悬停事件、断言、变量)
本地生成脚本:录制的脚本存储在用户本机,用户可以自行在录制的基础上进行修改定制,更自由更开放
丰富的断言:支持以下断言类型,val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage
支持强大变量:我们支持配置式变量、更新变量、断言中使用变量、跳转时使用变量
支持数据Mock:我们支持Faker变量功能,支持强大的数据Mock
支持公共用例: 用例之间允许相互引用,可以将某些公用的操作步骤录制为公用用例,以进一步提升录制效率
支持高并发测试:支持任意数量的高并发,想跑多快就跑多快
支持单步执行截图:每一步操作都自动保存截图,以方便出问题时排查诊断
Git地址:http://git.oschina.net/mirrors/UI-Recorder
====================
AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。
Git地址:http://git.oschina.net/mirrors/alloylever
功能:
点击alloylever按钮之间切换显示或隐藏工具面板
Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]
Console会输出所有的错误信息(脚本错误和网络请求错误)
XHR面板会输出所有(XMLHttpRequest)AJAX请求和服务器端返回的数据
Resouces面板会输出所有的Cookie信息和LocalStorage
TimeLime面板会输出页面相关的生命周期里的时间段耗时情况
通过npm安装:
npm install alloylever
使用:
在你的页面任何地方引用下面脚本就可以,但是该js必须引用在其他脚本之前。
<script src="alloylever.js"></script>
务必记住,该js必须引用在其他脚本之前!
====================
Android&Html5混合开发WebView调试必备神器DevTools,chrome浏览器调试手机端WebView
DevTools能在浏览器上调试手机中的webview代码,给手机端调试带来了极大的便利!
操作步骤
1,打开手机开发者选项,开启USB调试
2,打开待调试的webview
3,手机通过USB数据线跟电脑连接
4、打开chrome浏览器,输入:chrome://inspect/#devices
5、点击inspect,进入调试页面进行调试,之后就可以直接在电脑上操作手机啦
# DevTools需要外网环境才能访问,在内网环境测试的要保证电脑与外网联通;
# 有大神已破解,在tb买离线开发安装包也可
===================
移动端调试神器vconsole,手机端网页的调试工具Eruda的更多相关文章
- 移动端调试神器vConsole
vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcs ...
- 移动端调试神器-vConsole
什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...
- 移动端真机debug调试神器 vConsole学习(一)之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- 移动端调试利器-vConsole
现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- PC端页面转换成手机端页面的分辨率问题的理解
PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...
- VirtualXposed查看手机端网页及调试
参考博客: https://sspai.com/post/44447 以下是实际动手操作步骤: 一 打开手机开发者模式 二 允许USB调试 三 安装 VirtualXposed_1.apk ...
- 【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息
一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...
随机推荐
- 基于图的异常检测(三):GraphRAD
基于图的异常检测(三):GraphRAD 风浪 一个快乐的数据玩家/风控/图挖掘 24 人赞同了该文章 论文:<GraphRAD: A Graph-based Risky Account Det ...
- html5 localStorage讲解
早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题. 1.cookies的大小限制在4kB,不适合大量的数据存储. 2.浏览器还限制 ...
- JDOJ 1044 Span
JDOJ 1044 Span https://neooj.com/oldoj/problem.php?id=1044 Description 某国有N个村子,M条道路,为了实现“村村通工程”现在要”油 ...
- 史上最全的CSP-J/S 第一轮知识点
CSP-J/S 第一轮知识点选讲 \(NOIP\)(全国青少年信息学奥林匹克竞赛)于2019年取消.取而代之的是由\(CCF\)推出的非专业级软件能力认证,也就是现在的\(CSP-J/S\).作为一名 ...
- CSP2019 树的重心 题解
本题当然可以通过大力讨论每棵子树的size的大小关系,然后用各种数据结构暴力维护.但是我更倾向于用一种更为性质的做法. 首先讲一下我在考场上想到的做法(没写).就是考虑换根,在换根的过程中计算每一条边 ...
- Java高级工程师常见问题
MySQL数据库调优 定位慢查询得到生产环境那些sql语句响应慢,根据执行计划进行分析调优事物管理索引结构(B+树)平衡二叉树.B树.B+树分库分表后,如何解决查询 使用第三方数据库中间件( ...
- Java GUI : 实现排序算法的动态演示
0.用到的jar包 jcommon-1.0.16.jar.jfreechart-1.0.13.jar 1.实现思路 自定义一个类---用于存放排序算法的操作状态--SortEntity 定义一个方法类 ...
- CISCO 3750交换机堆叠
双交换机堆叠操作 一.基本要求: ios版本要一致.专用的堆叠模块和堆叠线缆.最大堆叠个数9 二.堆叠的好处: 高密度端口.便于管理.堆叠的交换机可以看作一台交换机统一配置 三.堆叠实例: 1:分别清 ...
- java识别死亡或者存活的对象
那些内存需要回收 内存回收是对运行时内存区域的内存回收,其中程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭:栈中的栈帧随着方法的进入和退出而有条不紊的执行着出栈和入栈操作.每一个栈帧中 ...
- tomcat启动项目报404错误
1.请求的时候报404错误,而且我的请求API地址是/account/sendSmsCode,从后台获取到的竟然变成了/account/account/sendSmsCode. 2.后来发现是 ...