移动端调试神器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数据线跟电脑链接
四、打开chrome浏览器，输入:chrome://inspect/#devices
五、点击inspect，进入调试页面进行调试，以后就能够直接在电脑上操做手机啦

# DevTools须要外网环境才能访问，在内网环境测试的要保证电脑与外网联通；

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

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