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

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