移動端調試神器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買離線開發安裝包也可
===================