feature: show custom request headers if exist

src/Network/Network.js

@@ -46,7 +46,9 @@ export default class Network extends Tool {
     let winXhrProto = window.XMLHttpRequest.prototype
 
     let origSend = (this._origSend = winXhrProto.send),
-      origOpen = (this._origOpen = winXhrProto.open)
+      origOpen = (this._origOpen = winXhrProto.open),
+      origSetRequestHeader = (this._origSetRequestHeader =
+        winXhrProto.setRequestHeader)
 
     let self = this
 
@@ -76,6 +78,18 @@ export default class Network extends Tool {
 
       origSend.apply(this, arguments)
     }
+
+    winXhrProto.setRequestHeader = function() {
+      let req = this.erudaRequest
+      if (!req._headers) {
+        req._headers = {}
+      }
+      let key = arguments[0]
+      let val = arguments[1]
+      req._headers[key] = val
+
+      origSetRequestHeader.apply(this, arguments)
+    }
   }
   restoreXhr() {
     let winXhrProto = window.XMLHttpRequest.prototype
@@ -119,6 +133,7 @@ export default class Network extends Tool {
       startTime: now(),
       time: 0,
       resHeaders: {},
+      reqHeaders: {},
       resTxt: '',
       done: false
     })
@@ -161,7 +176,8 @@ export default class Network extends Tool {
           resTxt: data.resTxt,
           type: data.type,
           subType: data.subType,
-          resHeaders: data.resHeaders
+          resHeaders: data.resHeaders,
+          reqHeaders: data.reqHeaders
         })
       })
       .on('click', '.eruda-clear-request', () => this.clear())

src/Network/XhrRequest.js

@@ -42,7 +42,8 @@ export default class XhrRequest extends Emitter {
       subType: type.subType,
       size: getSize(xhr, true, this._url),
       time: now(),
-      resHeaders: getHeaders(xhr)
+      resHeaders: getHeaders(xhr),
+      reqHeaders: (xhr.erudaRequest && xhr.erudaRequest._headers) || {}
     })
   }
   handleDone() {

src/Sources/Sources.scss

@@ -86,6 +86,7 @@
             td {
               font-size: $font-size-s;
               padding: 5px 10px;
+              word-break: break-all;
             }
             .key {
               white-space: nowrap;

src/Sources/http.hbs

@@ -4,6 +4,23 @@
         <pre class="eruda-data">{{data}}</pre>
     {{/if}}
     <div class="eruda-section">
+        <h2>Request Headers</h2>
+        <table class="eruda-headers">
+            <tbody>
+                {{#if reqHeaders}}
+                    {{#each reqHeaders}}
+                        <tr>
+                            <td class="eruda-key">{{@key}}</td>
+                            <td>{{.}}</td>
+                        </tr>
+                    {{/each}}
+                {{else}}
+                    <tr>
+                        <td>Empty</td>
+                    </tr>
+                {{/if}}
+            </tbody>
+        </table>
         <h2>Response Headers</h2>
         <table class="eruda-headers">
             <tbody>