addon web content-type

addon/web/client/src/App.tsx

@@ -150,6 +150,7 @@ class App extends React.Component<any, IState> {
               <th style={{ width: '80px' }}>Method</th>
               <th style={{ width: '200px' }}>Host</th>
               <th style={{ width: '600px' }}>Path</th>
+              <th style={{ width: '150px' }}>Type</th>
               <th style={{ width: '80px' }}>Status</th>
               <th style={{ width: '90px' }}>Size</th>
               <th style={{ width: '90px' }}>Time</th>

addon/web/client/src/components/FlowPreview.tsx

@@ -33,6 +33,7 @@ class FlowPreview extends React.Component<IProps> {
         <td>{fp.method}</td>
         <td>{fp.host}</td>
         <td>{fp.path}</td>
+        <td>{fp.contentType}</td>
         <td>{fp.statusCode}</td>
         <td>{fp.size}</td>
         <td>{fp.costTime}</td>

addon/web/client/src/message.ts

@@ -40,6 +40,7 @@ export interface IFlowPreview {
   statusCode: string
   size: string
   costTime: string
+  contentType: string
 }
 
 interface IPreviewResponseBody {
@@ -59,6 +60,7 @@ export class Flow {
   private _size = 0
   private size = '0'
   private headerContentLengthExist = false
+  private contentType = ''
 
   private startTime = Date.now()
   private endTime = 0
@@ -102,10 +104,16 @@ export class Flow {
     this.waitIntercept = msg.waitIntercept
     this.response = msg.content as IResponse
 
-    if (this.response && this.response.header && this.response.header['Content-Length'] != null) {
+    if (this.response && this.response.header) {
-      this.headerContentLengthExist = true
+      if (this.response.header['Content-Type'] != null) {
-      this._size = parseInt(this.response.header['Content-Length'][0])
+        this.contentType = this.response.header['Content-Type'][0].split(';')[0]
-      this.size = getSize(this._size)
+        if (this.contentType.includes('javascript')) this.contentType = 'javascript'
+      }
+      if (this.response.header['Content-Length'] != null) {
+        this.headerContentLengthExist = true
+        this._size = parseInt(this.response.header['Content-Length'][0])
+        this.size = getSize(this._size)
+      }
     }
 
     return this
@@ -136,6 +144,7 @@ export class Flow {
       statusCode: this.response ? String(this.response.statusCode) : '(pending)',
       size: this.size,
       costTime: this.costTime,
+      contentType: this.contentType,
     }
   }