使用瀏覽器inspect除錯app
在開發混合專案的過程中，常常需要在app環境排查問題，介面可以使用fiddler等工具來抓包，但是js錯誤就不好抓包了，這裡介紹一種除錯工具-瀏覽器。
1.除錯過程
先看實現步驟
-
首先電腦開啟edge瀏覽器，位址列中輸入edge://inspect/#devices，介面如下圖1
-
開啟手機開發者模式，華為P30開啟方式是，設定->關於手機->連續點選版本號，會有一個toast提示，切換成開發者模式，如下圖示2
-
開啟要除錯的app，開啟webview debug
-
使用usb資料線把電腦和手機連線起來，這時瀏覽器就會監聽到app開啟的html頁面，如下圖3
注意在REMOTE TARGET中出現了一個手機型號ELE-AL00，這個是我的華為P30手機。其次，下方出現了頁面資訊“webview in com.xxx.xxx”，是app的包名和版本號，上圖中使用黑色筆記塗抹。再下面是除錯的地址和兩個按鈕“inspect”，“pause”。
5. 點選“inspect”，就出現了熟悉的除錯介面，如下圖4
這個就是除錯介面了，可以在手機上輸入文字，點選按鈕，這個除錯介面也會跟著變化，在控制檯下面就可以看到前段錯誤資訊了。
2.Q&A
- 能不能用chrome來除錯？
可以使用chrome除錯，但是要FQ，使用edge可以不用FQ。 - 關於webview除錯模式
這個要向Android&ios開發人員尋求幫助，要打一個支援web view除錯的測試包。 - 可以除錯微信公眾號頁面嗎？
不能，不過可以除錯手機瀏覽器開啟的頁面。部分h5網頁需要微信認證登入，可以使用微信開發者工具來除錯。