移动端调试神器vconsole,手机端网页的调试工具Eruda

移动端调试神器vconsole,手机端网页的调试工具Eruda

移动端中使用vConsole调试

移动端调试工具vconsole安装

Git地址:

vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。

目前vConsole自带有2个面板,默认为“日志”面板,负责展示log。

项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插件 vconsole

下载vconsole最新版本或者直接用npm下载nom install vconsole

引入vconsole到项目中:

或者通过import 初试化:

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole

let vConsole = new VConsole() // 初始化

项目运行,点击页面右下角vconsole图标,即可看到debug内容

如果想要查看接口调用情况,和浏览器一样直接点击network按钮即可

这个是调试自己开发的网站在手机版上用的,太麻烦

腾讯有个调试工具可以开启微信和QQ浏览器的调试模式的,不适用其他浏览器

====================

如何在手机端模拟浏览器控制台,

手机端网页的调试工具Eruda: Console for Mobile Browsers

gtihub地址:

效果预览

进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。

特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码,重新打开页面并alert一下。

使用Chrome,Firefox连接手机调试限定于使用相应的手机版浏览器,意义并不大。

Weinre,Vorlonjs跟debugGap等工具实际上也并不好用,初始化过于繁琐,而且仅能调调样式,打打log,断点调试什么的也没有办法支持。每次测试出现问题,基本上只能拿手机过来连接自己的本地环境改代码查bug。

使用手机端网页的调试工具Eruda:在你的代码里面,加入下面两行代码,就可以轻轻松松实现手机调试了

ps:想要在手机上查看,可以使手机跟你的电脑在同一个局域网内,然后访问电脑的ip,然后就能查看你做的h5页面了

====================

UI Recorder是一款零成本的整体自动化测试解决方案,一次自测等于多次测试,测一个浏览器等于测多个浏览器!

以下是本产品的特点:自测 = 自动化测试:

对于开发人员来讲,自测是开发流程中缺一不可的过程,我们要实现的目标就是自测过程中即可同步的录制出自动化脚本,实现真正的零成本自动化

支持全平台无线native app录制: 基于macaca实现:

无干扰录制:所作操作均无需交互干扰,鼠标、键盘、alert弹框、文件上传,完全按照正常自测流程操作即可(以下操作除外:悬停事件、断言、变量)

本地生成脚本:录制的脚本存储在用户本机,用户可以自行在录制的基础上进行修改定制,更自由更开放

丰富的断言:支持以下断言类型,val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage

支持强大变量:我们支持配置式变量、更新变量、断言中使用变量、跳转时使用变量

支持数据Mock:我们支持Faker变量功能,支持强大的数据Mock

支持公共用例: 用例之间允许相互引用,可以将某些公用的操作步骤录制为公用用例,以进一步提升录制效率

支持高并发测试:支持任意数量的高并发,想跑多快就跑多快

支持单步执行截图:每一步操作都自动保存截图,以方便出问题时排查诊断

Git地址:

====================

AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。

Git地址:

功能:

点击alloylever按钮之间切换显示或隐藏工具面板

Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]

Console会输出所有的错误信息(脚本错误和网络请求错误)

XHR面板会输出所有(XMLHttpRequest)AJAX请求和服务器端返回的数据

Resouces面板会输出所有的Cookie信息和LocalStorage

TimeLime面板会输出页面相关的生命周期里的时间段耗时情况

通过npm安装:

npminstallalloylever

使用:

在你的页面任何地方引用下面脚本就可以,但是该js必须引用在其他脚本之前。

务必记住,该js必须引用在其他脚本之前!

====================

Android&Html5混合开发WebView调试必备神器DevTools,chrome浏览器调试手机端WebView

DevTools能在浏览器上调试手机中的webview代码,给手机端调试带来了极大的便利!

操作步骤

1,打开手机开发者选项,开启USB调试

2,打开待调试的webview

3,手机通过USB数据线跟电脑连接

4、打开chrome浏览器,输入:chrome://inspect/#devices

5、点击inspect,进入调试页面进行调试,之后就可以直接在电脑上操作手机啦

# DevTools需要外网环境才能访问,在内网环境测试的要保证电脑与外网联通;

# 有大神已破解,在tb买离线开发安装包也可

===================

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享