[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));
};
})();