[Javascript] 複寫 XMLHttpRequest 來紀錄 Network Request URL @ Chrome Browser DevTools

最近 podcast 很夯，來研究 <audio> 。之前研究過 <video> 就有發現現在都用很夯 blob 的播放方式，透過 JS 片段下載資料交給 <video> 播放，以至於從 JS 調閱出 <video> 元件時，看不到真實的影片來源，而是一連串 blob (Binary Large Object) 記憶體位置。

原本想說在 Chrome DevTools 下，能不能靠 JS 取得 network request 發送清單來做應用，看著看著突然腦筋一轉，乾脆就用 XMLHttpRequest 好了，多包一層就可以收集了。

用法：

//
// https://stackoverflow.com/questions/7775767/javascript-overriding-xmlhttprequest-open
//
(function() {
var proxied = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function() {
// console.log( arguments );
//
// 只關注 m3u8 來源
//
if (arguments.length >= 2 && arguments[1].indexOf('.m3u8') > 0) {
console.log( arguments );
// return;
}
return proxied.apply(this, [].slice.call(arguments));
};
})();

[Android] 使用 Chrome Browser - Web Inspector 查看 App WebView 行為

之前用了一陣子，然後又忘了，還是寫一下筆記：

1. 要把 Android app 內使用的 Webview 開啟 setWebContentsDebuggingEnabled
• WebView.setWebContentsDebuggingEnabled(true);
2. Android phone 也要開啟 developer mode 和 adb debug
3. 使用 Chrome browser -> 開發人員選項 -> more tools -> remote devices

順利的話，就會看到手機彈跳出一些視窗，按一按授權就看在 chrome browser 上追蹤 App 內 webview 的行為，像是追蹤其他國家內的網頁資源有被有被 ban 掉 XD

請直接參考：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-tw

未來可以規劃 release apk 不開啟 setWebContentsDebuggingEnabled ，而 dev apk 再開啟即可。