如何定位 Hybrid Web 頁面中 Native 注入的 JS 代碼
一個(gè)網(wǎng)頁除了可以運(yùn)行在公共的瀏覽器上，也可以運(yùn)行在 APP 端內(nèi)的 WebView 組件上。由于這些 Hybrid Web 網(wǎng)頁運(yùn)行在一個(gè)相對(duì)封閉的環(huán)境里，所以 APP 本身可以向 WebView 中注入一些 JS 代碼，對(duì) Web 頁面做定向增強(qiáng)（最典型的運(yùn)用就是 JSBridge，提供了一道 Web <--> Native 通信的橋梁）。
在絕大多數(shù)情況下，業(yè)務(wù)開發(fā)并不需要感知這些 Native 注入的代碼，但是在一些 性能優(yōu)化/鏈路排查 的情況下，就需要感知這些 Native 注入代碼的時(shí)機(jī)和運(yùn)行情況了，從而更好的定位問題。
由于 Chrome/Safari 的 debug 調(diào)試工具基本上是為 純 Web 服務(wù)的，而且這個(gè)需求很小眾，所以這個(gè)能力支持的并不是很好。這個(gè)小需求網(wǎng)絡(luò)上沒什么總結(jié)性的文章，ChatGPT 回答的也差強(qiáng)人意，正好這段時(shí)間也做了一些相關(guān)的工作，所以順勢(shì)就記下來，幫助某個(gè)有緣人。
直接查看 Native 代碼
如果你對(duì) Native WebView 的封裝代碼很熟悉，或者有一定的 Native 經(jīng)驗(yàn)，直接閱讀源碼是最快的方式。這里我說幾個(gè)最常用的 JS 注入 API：
iOS
iOS 主要關(guān)注這 3 個(gè) API：
addScriptMessageHandler[1]
- (void)addScriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler
name:(NSString *)name;通過這個(gè)方法可以給WKWebView環(huán)境中添加一個(gè)指定 name 的 JS 對(duì)象，前端可以調(diào)用該對(duì)象的 postMessage 方法，向客戶端發(fā)送消息。前端類似于這樣調(diào)用：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)addUserScript[2]
// WKUserContentController
- (void)addUserScript:(WKUserScript *)userScript;可以用這個(gè)函數(shù)注入 JS 腳本字符串到 WKWebView 中。
evaluateJavaScript[3]
// WKWebView
- (void)evaluateJavaScript:(NSString *)javaScriptString
completionHandler:(void (^)(id, NSError *error))completionHandler;這個(gè)函數(shù)也可以在 WKWebView 上下文中運(yùn)行一段 JS 代碼。
其實(shí)還有很多注入函數(shù)，但常用的就這 3 個(gè)，其它的函數(shù)就是和他們有些細(xì)微的差別，感興趣的可以直接看官方文檔。
另外還需注意的是 JS 代碼注入的時(shí)機(jī)，頁面加載前還是頁面加載后注入代碼，帶來的影響可能是大不一樣的。而且這個(gè) API 也特別多，可參考文檔：WKNavigationDelegate[4]，重點(diǎn)關(guān)注 didStartProvisionalNavigation[5] 和 didFinishNavigation[6]。
圖片
https://bbs.huaweicloud.com/blogs/331397
Android
Android 主要關(guān)注這 2 個(gè) API：
addJavascriptInterface[7]
/** Instantiate the interface and set the context. */class WebAppInterface(private val mContext: Context) { // 通過 @JavascriptInterface 注解，向 WebView 暴露 showToast 方法 @JavascriptInterface fun showToast(toast: String) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show() }}val webView: WebView = findViewById(R.id.webview)// "Android" 將會(huì)暴露在 Webview 的 window 變量上webView.addJavascriptInterface(WebAppInterface(this), "Android")然后前端直接調(diào)用即可：
<input type="button" value="Say hello" notallow="showAndroidToast('Hello Android!')" /><script type="text/javascript"> function showAndroidToast(toast) { window.Android.showToast(toast); }</script>evaluateJavascript[8]
public void evaluateJavascript (String script, ValueCallback<String> resultCallback)類似于 iOS，也是在 WebView 上下文中運(yùn)行一段 JS 腳本。
同樣的，Android 也要注意 JS 代碼注入的時(shí)機(jī)。API 太多了，參考這個(gè)鏈接：WebViewClient#public-methods[9]，重點(diǎn)關(guān)注 onPageStarted[10] 和 onPageFinished[11]。
有能力閱讀 Native 源代碼是最理想的情況，但是現(xiàn)實(shí)一般很殘酷：
- 絕大部分前端同學(xué)不懂 Native 代碼
- 現(xiàn)在還存留的高流量 APP，基本都迭代 5 年以上了，代碼一層一層糊成 ?? 山，老師傅都得在里面繞半天
- 降本增笑，老師傅都沒了
所以其實(shí)還有第 2 種基于觀測(cè)的方案：利用 WebView Devtool 工具定位。
用 Web 調(diào)試工具定位
前面也說了，查看注入的 JS 代碼是一個(gè)很小眾的需求，所以調(diào)試工具并沒有提供獨(dú)立的查看面板，所有的能力都是拼拼湊湊起來的，而且部分能力 iOS 和 Android 互為補(bǔ)集 ??，整體上還有有些凌亂的。
如何遠(yuǎn)程調(diào)試 Web 頁面，可以參考這篇文章：各種「真機(jī)遠(yuǎn)程調(diào)試」方法匯總[12]
想遠(yuǎn)程調(diào)試 APP WebView 網(wǎng)頁，需要在 Native 層開啟調(diào)試能力
- iOS：16.4 以上版本需要設(shè)置 webView.isInspectable = true[13] 開啟遠(yuǎn)程調(diào)試
- Android：設(shè)置 setWebContentsDebuggingEnabled(true)[14] 開啟遠(yuǎn)程調(diào)試
Common
iOS 和 Android 都通用的方案有這么兩種：
Debug
我們可以通過 debug 到關(guān)鍵代碼，然后查看調(diào)用棧，找到注入代碼：
iOS 利用 Safari Devtool 調(diào)試，查看方式如下：
iOS Safari Debug
Android 利用 Chrome Devtool 調(diào)試，查看方法如下：
Log
還有一種方法是在 Native 注入的 JS 代碼中，加入 console.log 的調(diào)用，這樣在注入代碼運(yùn)行的時(shí)候，可以從 Console 面板的資源引用找到注入腳本。
但是這個(gè)問題有個(gè)悖論：
- 一般注入的腳本為了不增加運(yùn)行時(shí)性能負(fù)擔(dān)，是不會(huì)加 log 調(diào)用的，所以一般沒法用
- 如果開發(fā)者主動(dòng)去注入的 JS 代碼中加入 log，那說明他有一定的 native 經(jīng)驗(yàn)，那為什么不直接看 native 代碼呢？
所以這樣方法更像一種輔助方案，用來配合其它方案一起排查問題。
iOS
iOS 有兩種方式看注入的代碼。
第一種是在「來源」的「附加腳本」里，可以在這里看到 Native 通過 addUserScript 注入的腳本，整整齊齊的，還是比較方便查看的。但有個(gè)問題是這里并不會(huì)列出 evaluateJavaScript 注入的代碼。
iOS 附加腳本
這里就介紹第二種方法，那就是「全局搜索」。
Safari 的全局搜索功能，可以同時(shí)搜索 addUserScript/evaluateJavaScript/正常加載的資源 里的代碼，所以如果你知道注入代碼的一些關(guān)鍵信息，可以通過搜索的方式定位代碼。
iOS 全局搜索
Android
Android 這里使用 Chrome Devtool 查看注入代碼。用了這么久的 Chrome Devtool，我是第一次發(fā)現(xiàn)它做的不如 Safari 的地方，那就是上面 Safari Devtool 有的東西它都沒有。
但是 Chrome Devtool Performance 可以曲線救國一下，我們可以通過性能錄制得到一份性能分析火焰圖，然后查看主線程的代碼執(zhí)行情況，一般是 Evalutae Script 階段，然后再定位可能的執(zhí)行時(shí)機(jī)，通過點(diǎn)擊 Bar 展開的 Summary 面板，一般有個(gè) VM 開頭的文件，打開就可顯示注入的 JS 代碼：
Chrome 火焰圖
總結(jié)
從上面內(nèi)容可以看出定位「注入 JS 代碼」還是挺麻煩的，需要用各種手段曲線救國，而且很多情況下各個(gè)技巧需要交叉使用才能定位到。希望我這篇文章可以幫助到一些開發(fā)者，減少 debug 內(nèi)耗的時(shí)間。
