Dev: Network fetch

README.md

@@ -46,7 +46,7 @@ javascript:(function () { var script = document.createElement('script'); script.
 
 * [Console](doc/TOOL_API.md#console): Display JavaScript logs.
 * [Elements](doc/TOOL_API.md#elements): Check dom state.
-* [Network](doc/TOOL_API.md#network): Show ajax requests status.
+* [Network](doc/TOOL_API.md#network): Show requests status.
 * [Resource](/doc/TOOL_API.md#resources): Show localStorage, cookie information.
 * [Info](doc/TOOL_API.md#info): Show url, user agent info.
 * [Snippets](doc/TOOL_API.md#snippets): Include snippets used most often.

doc/README_CN.md

@@ -32,7 +32,7 @@ Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools
 
 3. Elements面板：查看标签内容及属性；查看应用在Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。
 
-4. Network面板：捕获XHR请求，查看发送数据、返回头、返回内容等信息。
+4. Network面板：捕获请求，查看发送数据、返回头、返回内容等信息。
 
 5. Resources面板：查看并清除localStorage、sessionStorage及cookie；查看页面加载脚本及样式文件；查看页面加载图片。
 

doc/TOOL_API.md

@@ -89,7 +89,21 @@ elements.set(document.body);
 
 ## Network
 
-Display xhr requests.
+Display requests.
+
+### Config
+
+|Name         |Type   |Desc                |
+|-------------|-------|--------------------|
+|overrideFetch|boolean|Catch Fetch Requests|
+
+### clear
+
+Clear requests.
+
+```javascript
+network.clear();
+```
 
 ## Resources
 

src/Network/FetchRequest.js

@@ -16,6 +16,8 @@ export default class FetchRequest extends Emitter
     {
         super();
 
+        if (url instanceof window.Request) url = url.url;
+
         this._url = fullUrl(url);
         this._id = uniqId('request');
         this._options = options;

src/Network/Network.js

@@ -1,6 +1,7 @@
 import Tool from '../DevTools/Tool';
 import XhrRequest from './XhrRequest';
 import FetchRequest from './FetchRequest';
+import Settings from '../Settings/Settings';
 import {evalCss, isNative, defaults, now, extend, isEmpty, $} from '../lib/util';
 
 export default class Network extends Tool
@@ -23,8 +24,8 @@ export default class Network extends Tool
 
         this._container = container;
         this._bindEvent();
+        this._initCfg();
         this.overrideXhr();
-        this.overrideFetch();
     }
     show()
     {
@@ -32,6 +33,11 @@ export default class Network extends Tool
 
         this._render();
     }
+    clear() 
+    {
+        this._requests = {};
+        this._render();
+    }
     overrideXhr()
     {
         let winXhrProto = window.XMLHttpRequest.prototype;
@@ -162,11 +168,7 @@ export default class Network extends Tool
                 subType: data.subType,
                 resHeaders: data.resHeaders
             });
-        }).on('click', '.eruda-clear-request', function ()
-        {
-            self._requests = {};
-            self._render();
-        });
+        }).on('click', '.eruda-clear-request', () => this.clear());
 
         function showSources(type, data)
         {
@@ -186,6 +188,27 @@ export default class Network extends Tool
         this.restoreXhr();
         this.restoreFetch();
     }
+    _initCfg() 
+    {
+        let cfg = this.config = Settings.createCfg('network', {
+            overrideFetch: true
+        });
+
+        if (cfg.get('overrideFetch')) this.overrideFetch();
+
+        cfg.on('change', (key, val) =>
+        {
+            switch (key)
+            {
+                case 'overrideFetch': return val ? this.overrideFetch() : this.restoreFetch();
+            }
+        });
+
+        let settings = this._container.get('settings');
+        settings.text('Network')
+                .switch(cfg, 'overrideFetch', 'Catch Fetch Requests')
+                .separator();
+    }
     _render()
     {
         if (!this.active) return;