使用瀏覽器inspect調試app

在開發混合項目的過程中，常常需要在app環境排查問題，接口可以使用fiddler等工具來抓包，但是js錯誤就不好抓包了，這里介紹一種調試工具-瀏覽器。

1.調試過程

先看實現步驟

1. 首先電腦打開edge瀏覽器，地址欄中輸入edge://inspect/#devices，界面如下圖1
   

2. 打開手機開發者模式，華為P30打開方式是，設置->關于手機->連續點擊版本號，會有一個toast提示，切換成開發者模式，如下圖示2
   

3. 打開要調試的app，開啟webview debug開關

4. 使用usb數據線把電腦和手機連接起來，這時瀏覽器就會監聽到app打開的html頁面，如下圖3
   

注意在REMOTE TARGET中出現了一個手機型號ELE-AL00，這個是我的華為P30手機。其次，下方出現了頁面信息“webview in com.xxx.xxx”，是app的包名和版本號，上圖中使用黑色筆記涂抹。再下面是調試的地址和兩個按鈕“inspect”，“pause”。
5. 點擊“inspect”，就出現了熟悉的調試界面，如下圖4

這個就是調試界面了，可以在手機上輸入文字，點擊按鈕，這個調試界面也會跟著變化，在控制臺下面就可以看到前段錯誤信息了。

2.Q&A

1. 能不能用chrome來調試？
   可以使用chrome調試，但是要FQ，使用edge可以不用FQ。
2. 關于webview調試模式
   這個要向Android&ios開發人員尋求幫助，要打一個支持web view調試的測試包。
3. 可以調試微信公眾號頁面嗎？
   不能，不過可以調試手機瀏覽器打開的頁面。部分h5網頁需要微信認證登錄，可以使用微信開發者工具來調試。