XHR / Fetch Hook - Log requests directly in the Dev Console

xhr_fetch_hook.js

formatBody = (body) => { if (!body) return body; try { return JSON.parse(body); } catch (err) { return body; } };

XMLHttpRequest.prototype._open = XMLHttpRequest.prototype._open || XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
	this._openArgs = arguments;
	return XMLHttpRequest.prototype._open.apply(this, arguments);
};
  
XMLHttpRequest.prototype._send = XMLHttpRequest.prototype._send || XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body) {
	console.log(this._openArgs[0] || "GET", this._openArgs[1], formatBody(body));
	return XMLHttpRequest.prototype._send.apply(this, arguments);
};
    
window._fetch = window._fetch || window.fetch;
window.fetch = (url, opt) => { 
	console.log(opt.method || 'GET', url, formatBody(opt.body)); 
	return _fetch.apply(null, arguments); 
};