index.html
<!doctype html>
<html lang="en" ng-app="net">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Chrome HAR Viewer</title>
<meta name="description" content="An HTTP Archive (HAR) Viewer that mimics Chrome Developer Tools">
<!-- Required Chrome Dev Tools CSS -->
<link rel="stylesheet" type="text/css" href="chrome/dialog.css">
<link rel="stylesheet" type="text/css" href="chrome/inspector.css">
<link rel="stylesheet" type="text/css" href="chrome/inspectorCommon.css">
<link rel="stylesheet" type="text/css" href="chrome/inspectorSyntaxHighlight.css">
<link rel="stylesheet" type="text/css" href="chrome/popover.css">
<link rel="stylesheet" type="text/css" href="chrome/dataGrid.css">
<link rel="stylesheet" type="text/css" href="chrome/tabbedPane.css">
<link rel="stylesheet" type="text/css" href="chrome/splitView.css">
<link rel="stylesheet" type="text/css" href="chrome/networkLogView.css">
<link rel="stylesheet" type="text/css" href="chrome/networkPanel.css">
<link rel="stylesheet" type="text/css" href="chrome/networkLogView.css">
<link rel="stylesheet" type="text/css" href="css/generic.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/libs/modernizr.custom.min.js"></script>
</head>
<body class="detached" ng-controller="NetworkCtrl" dnd-drop="dnd.drop($event)" dnd-dragover="dnd.cancel($event)" dnd-dragenter="dnd.cancel($event)">
<a class="fork-banner" href="https://github.com/ericduran/chromeHAR" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div id="dropArea" class="visible">
<h2 class="support"><span>Drag and <em>Drop</em> HARs here</span></h2>
<h2 class="no-support">Your browser doesn't support Drag and Drop, or some other modern required features. :-p</h2>
</div>
<div id="toolbar">
<div class="toolbar-controls">
<div class="toolbar-item" id="toolbar-load-item">
<label class="file-label">Load local HAR</label>
<file name="har" ng-model="inputFile" accept="*" />
</div>
<div class="toolbar-item" id="toolbar-sample-item">
<a href="#" class="sample">Load sample HAR</a>
</div>
<div class="toolbar-item" id="toolbar-search-item">
<input id="search" type="search" incremental="" results="0" placeholder="Search Network" ng-model="query">
</div>
</div>
<button class="toolbar-item toggleable network toggled-on">
<div class="toolbar-icon"></div>
<div class="toolbar-label">Network</div>
</button>
</div>
<div id="main">
<div id="main-status-bar" class="status-bar">
<div id="anchored-status-bar-items">
<button class="settings-status-bar-item status-bar-item" title="Settings">
<div class="glyph"></div><div class="glyph shadow"></div>
</button>
</div>
<div>
<button ng-click="class='small'" class="network-larger-resources-status-bar-item status-bar-item toggled-on" title="Use small resource rows.">
<div class="glyph"></div><div class="glyph shadow"></div>
</button>
<div class="scope-bar status-bar-item" id="network-filter">
<li ng-class="getClass('all')" class="all" ng-click="sI='all'">All</li>
<div class="scope-bar-divider"></div>
<li ng-class="getClass('doc')" class="document" ng-click="sI='doc'">Documents</li>
<li ng-class="getClass('css')" class="stylesheet" ng-click="sI='css'">Stylesheets</li>
<li ng-class="getClass('img')" class="image" ng-click="sI='img'">Images</li>
<li ng-class="getClass('js')" class="script" ng-click="sI='js'">Scripts</li>
<li ng-class="getClass('xhr')" class="xhr" ng-click="sI='xhr'">XHR</li>
<li ng-class="getClass('fnt')" class="font" ng-click="sI='fnt'">Fonts</li>
<li ng-class="getClass('sck')" class="websocket" ng-click="sI='sck'">WebSockets</li>
<li ng-class="getClass('oth')" class="other" ng-click="sI='oth'">Other</li>
</div>
</div>
</div>
<div id="main-panels" class="visible">
<div class="panel network visible">
<div class="split-view visible">
<div class="split-view-contents split-view-sidebar-left maximized">
<div id="network-container" class="visible">
<div class="data-grid network-log-grid visible filter-all" tabindex="0">
<table class="header">
<colgroup span="7">
<col class="first">
<col class="sec">
<col class="third">
<col class="fourth">
<col class="five">
<col class="six">
<col class="sev">
</colgroup>
<tbody>
<tr>
<th class="name-column sortable" ng-click="setSort('nameSort');">
<div>Name<div class="network-header-subtitle">Path</div></div>
</th>
<th class="method-column sortable" ng-click="setSort('method');">
<div>Method</div>
</th>
<th class="status-column sortable" ng-click="setSort('status');">
<div>Status<div class="network-header-subtitle">Text</div></div>
</th>
<th class="type-column sortable" ng-click="setSort('mimeType');">
<div>Type</div>
</th>
<th class="size-column sortable" ng-click="setSort('size');">
<div>Size<div class="network-header-subtitle">Content</div></div>
</th>
<th class="time-column sortable" ng-click="setSort('timeSort')">
<div>Time<div class="network-header-subtitle">Latency</div></div>
</th>
<th class="timeline-column sort-ascending">
<select>
<option value="startTime" label="Timeline"></option>
<option value="startTime" label="Start Time"></option>
<option value="responseTime" label="Response Time"></option>
<option value="endTime" label="End Time"></option>
<option value="duration" label="Duration"></option>
<option value="latency" label="Latency"></option>
</select>
</th>
<th class="corner"></th>
</tr>
</tbody>
</table>
<div class="data-container" ng-repeat="page in pages">
<div class="page-wrapper">
<table class="data">
<colgroup span="7">
<col class="first">
<col class="sec">
<col class="third">
<col class="fourth">
<col class="five">
<col class="six">
<col class="sev">
</colgroup>
<thead ng-show="checked">
<tr class="revealed page-summary-bar">
<td colspan="7">{{page.id}} {{page.title}}</td>
</tr>
</thead>
<tfoot ng-show="checked">
<tr class="revealed network-summary-bar">
<!-- FixMe: This always assume ms -->
<td colspan="7">{{page.count}} requests ❘ {{page.transfer}} transferred ❘ <!-- TODO: Need the time here; --> (onload: {{page.pageTimings.onLoad | roundMS}}, DOMContentLoaded: {{page.pageTimings.onContentLoad | roundMS}})</td>
</tr>
</tfoot>
<tbody>
<tr ng-class="getSelectedRow($index)" class="revealed network-item network-type-{{entry.name}}" data-id="{{entry.id}}" ng-repeat="entry in page.entries | filter:query | filter:typeFilter | orderBy:predicate:reverse">
<td class="name-column" ng-click="showDetails($index)" title="{{entry.url}}"><div><img class="icon">{{entry.parsedURL.lastPathComponent}}<div class="network-cell-subtitle">{{entry.folder}}</div></div></td>
<td class="method-column"><div title="{{entry.method}}">{{entry.method}}</div></td>
<td class="status-column" title="{{entry.status}} {{entry.statusText}}"><div>{{entry.status}}<div class="network-cell-subtitle">{{entry.statusText}}</div></div></td>
<td class="type-column" title="{{entry.mimeType}}"><div>{{entry.mimeType}}</div></td>
<td class="size-column"><div title="{{entry.size}}">{{entry.size}}<div class="network-cell-subtitle" title="{{entry.contentSize}}">{{entry.contentSize}}</div></div></td>
<td class="time-column"><div title="{{entry.time | roundMS}}">{{entry.time | roundMS}}<div class="network-cell-subtitle" title="{{entry.latency | roundMS}}">{{entry.latency | roundMS}}</div></div></td>
<td class="timeline-column">
<div class="network-graph-side network-type-{{entry.name}}">
<div class="network-graph-bar-area">
<div class="network-graph-bar waiting" style="left: {{entry.graphs.latency_left}}%; right: {{entry.graphs.latency_right}}%;"></div>
<div class="network-graph-bar" style="left: {{entry.graphs.receiving_left}}%; right: {{entry.graphs.receiving_right}}%;"></div>
<div class="network-graph-label waiting" title="{{entry.latency | roundMS}}">{{entry.latency | roundMS}}</div>
<div class="network-graph-label after" title="{{entry.receive | roundMS}}">{{entry.receive | roundMS}}</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="network-timeline-grid" ng-show="checked">
<div id="resources-graphs"></div>
<div class="resources-dividers">
<div class="resources-divider first" style="left: 8.333333333333338%"></div>
<div class="resources-divider" style="left: 16.666666666666668%; "></div>
<div class="resources-divider" style="left: 25%; "></div>
<div class="resources-divider" style="left: 33.333333333333336%; "></div>
<div class="resources-divider" style="left: 41.66666666666667%; "></div>
<div class="resources-divider" style="left: 50%; "></div>
<div class="resources-divider" style="left: 58.333333333333336%; "></div>
<div class="resources-divider" style="left: 66.66666666666667%; "></div>
<div class="resources-divider" style="left: 75%; "></div>
<div class="resources-divider" style="left: 83.33333333333334%; "></div>
<div class="resources-divider" style="left: 91.66666666666667%; "></div>
<div class="resources-divider last" style="left: 100%; "></div>
</div>
<div class="resources-event-dividers">
<div class="network-event-divider-padding" title="Load event fired" style="left: {{page.loadEventLeft}}%; ">
<div class="network-event-divider network-red-divider"></div>
</div>
<div class="network-event-divider-padding" title="DOMContent event fired" style="left: {{page.contentLoadLeft}}%; ">
<div class="network-event-divider network-blue-divider"></div>
</div>
</div>
<div class="resources-dividers-label-bar">
<div class="resources-divider first" style="left: 8.333333333333338%; ">
<div class="resources-divider-label">{{labels.1}}</div>
</div>
<div class="resources-divider" style="left: 16.666666666666668%; ">
<div class="resources-divider-label">{{labels.2}}</div>
</div>
<div class="resources-divider" style="left: 25%; ">
<div class="resources-divider-label">{{labels.3}}</div>
</div>
<div class="resources-divider" style="left: 33.333333333333336%; ">
<div class="resources-divider-label">{{labels.4}}</div>
</div>
<div class="resources-divider" style="left: 41.66666666666667%; ">
<div class="resources-divider-label">{{labels.5}}</div>
</div>
<div class="resources-divider" style="left: 50%; ">
<div class="resources-divider-label">{{labels.6}}</div>
</div>
<div class="resources-divider" style="left: 58.333333333333336%; ">
<div class="resources-divider-label">{{labels.7}}</div>
</div>
<div class="resources-divider" style="left: 66.66666666666667%; ">
<div class="resources-divider-label">{{labels.8}}</div>
</div>
<div class="resources-divider" style="left: 75%; ">
<div class="resources-divider-label">{{labels.9}}</div>
</div>
<div class="resources-divider" style="left: 83.33333333333334%; ">
<div class="resources-divider-label">{{labels.10}}</div>
</div>
<div class="resources-divider" style="left: 91.66666666666667%; ">
<div class="resources-divider-label">{{labels.11}}</div>
</div>
<div class="resources-divider last" style="left: 100%; ">
<div class="resources-divider-label">{{labels.12}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="split-view-contents split-view-network-views hidden" id="network-views">
<button id="network-close-button" ng-click="hideDetails()"></button>
<div class="tabbed-pane network-item-view visible">
<div class="tabbed-pane-header">
<div class="tabbed-pane-header-contents">
<div class="tabbed-pane-header-tabs">
<div ng-click="showTab(1)" ng-class="getTab(1)" class="tabbed-pane-header-tab selected"><span class="tabbed-pane-header-tab-title" title="">Headers</span></div>
<div ng-click="showTab(2)" ng-class="getTab(2)" class="tabbed-pane-header-tab"><span class="tabbed-pane-header-tab-title" title="">Cookies</span></div>
<div ng-click="showTab(3)" ng-class="getTab(3)" class="tabbed-pane-header-tab"><span class="tabbed-pane-header-tab-title" title="">Timing</span></div>
</div>
</div>
</div>
<div class="tabbed-pane-content">
<div ng-class="getVisibleTab(1)" class="resource-headers-view">
<ol class="outline-disclosure" tabindex="0">
<li>
<div class="header-name">Request URL:</div>
<div class="header-value source-code"><a href="{{selectedEntry.url}}" target="_blank">{{selectedEntry.url}}</a></div>
</li>
<li>
<div class="header-name">Request Method:</div>
<div class="header-value source-code">{{selectedEntry.method}}</div>
</li>
<li>
<div class="header-name">Status Code:</div>
<img class="resource-status-image" src="Images/successGreenDot.png" title="{{selectedEntry.status}} {{selectedEntry.statusText}}">
<div class="header-value source-code">{{selectedEntry.status}} {{selectedEntry.statusText}}</div>
</li>
<li ng-show="selectedEntry.reqHeadersCount" class="request parent expanded" ng-click="toggleReqHeaders()">Request Headers<span class="header-count"> ({{selectedEntry.reqHeadersCount}})</span></li>
<ol class="request children expanded">
<li ng-repeat="header in selectedEntry._entry.request.headers | orderBy:'name'">
<div class="header-name">{{header.name}}:</div>
<div class="header-value source-code">{{header.value}}</div>
</li>
</ol>
<li ng-show="selectedEntry.resHeadersCount" class="response parent expanded" ng-click="toggleResHeaders()">Response Headers<span class="header-count"> ({{selectedEntry.resHeadersCount}})</span></li>
<ol class="response children expanded">
<li ng-repeat="header in selectedEntry._entry.response.headers | orderBy:'name'">
<div class="header-name">{{header.name}}:</div>
<div class="header-value source-code">{{header.value}}</div>
</li>
</ol>
</ol>
</div>
<div ng-class="getVisibleTab(2)" class="resource-cookies-view">
<div class="fill visible">
<div class="data-grid visible" tabindex="0">
<table class="header">
<colgroup span="8">
<col style="width: 24.056189640035118%; ">
<col style="width: 34.06496927129061%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 6.935908691834943%; ">
<col style="width: 6.935908691834943%; ">
<col style="width: 6.935908691834943%; ">
</colgroup>
<tbody>
<tr>
<th class="0-column sortable"><div>Name</div></th>
<th class="1-column sortable"><div>Value</div></th>
<th class="2-column sortable"><div>Domain</div></th>
<th class="3-column sortable"><div>Path</div></th>
<th class="4-column sortable"><div>Expires</div></th>
<th class="5-column sortable"><div>Size</div></th>
<th class="6-column sortable"><div>HTTP</div></th>
<th class="7-column sortable"><div>Secure</div></th>
<th class="corner"></th>
</tr>
</tbody>
</table>
<div class="data-container">
<table class="data">
<colgroup span="8">
<col style="width: 24.056189640035118%; ">
<col style="width: 34.06496927129061%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 7.023705004389816%; ">
<col style="width: 6.935908691834943%; ">
<col style="width: 6.935908691834943%; ">
<col style="width: 6.935908691834943%; ">
</colgroup>
<tbody>
<tr class="request revealed row-group parent expanded">
<td class="0-column disclosure"><div>Request Cookies</div></td>
<td class="1-column"><div></div></td>
<td class="2-column"><div></div></td>
<td class="3-column"><div></div></td>
<td class="4-column"><div></div></td>
<td class="5-column right"><div></div></td>
<td class="6-column centered"><div></div></td>
<td class="7-column centered"><div></div></td>
</tr>
<tr class="revealed" ng-repeat="cookie in selectedEntry._entry.request.cookies">
<td class="0-column disclosure" style="padding-left: 15px; "><div>{{cookie.name}}</div></td>
<td class="1-column"><div>{{cookie.value}}</div></td>
<td class="2-column"><div>{{cookie.domain}}</div></td>
<td class="3-column"><div>{{cookie.path}}</div></td>
<td class="4-column"><div></div></td>
<td class="5-column right"><div></div></td>
<td class="6-column centered"><div></div></td>
<td class="7-column centered"><div></div></td>
</tr>
<tr class="response revealed row-group parent expanded">
<td class="0-column disclosure"><div>Response Cookies</div></td>
<td class="1-column"><div></div></td>
<td class="2-column"><div></div></td>
<td class="3-column"><div></div></td>
<td class="4-column"><div></div></td>
<td class="5-column right"><div></div></td>
<td class="6-column centered"><div></div></td>
<td class="7-column centered"><div></div></td>
</tr>
<tr class="revealed" ng-repeat="cookie in selectedEntry._entry.response.cookies">
<td class="0-column disclosure" style="padding-left: 15px; "><div>{{cookie.name}}</div></td>
<td class="1-column"><div>{{cookie.value}}</div></td>
<td class="2-column"><div>{{cookie.domain}}</div></td>
<td class="3-column"><div>{{cookie.path}}</div></td>
<td class="4-column"><div></div></td>
<td class="5-column right"><div></div></td>
<td class="6-column centered"><div></div></td>
<td class="7-column centered"><div></div></td>
</tr>
<tr class="filler">
<td class="0-column"></td>
<td class="1-column"></td>
<td class="2-column"></td>
<td class="3-column"></td>
<td class="4-column"></td>
<td class="5-column"></td>
<td class="6-column"></td>
<td class="7-column"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div ng-class="getVisibleTab(3)" class="resource-timing-view">
<table>
<tr>
<td>Waiting</td>
<td width="200px">
<div class="network-timing-row">
<span class="network-timing-bar-title">{{selectedEntry.wait | roundMS:-3}}</span>
</div>
</td>
</tr>
<tr>
<td>Receiving</td>
<td width="200px">
<div class="network-timing-row">
<span class="network-timing-bar-title">{{selectedEntry.receive | roundMS:-3}}</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="split-view-resizer"></div>
</div>
</div>
</div>
</div>
<div class="popover custom-popup-vertical-scroll custom-popup-horizontal-scroll hidden" style="left:500px; top: 197px; width: 315px; height: 132px;">
<div class="arrow"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script>window.angular || document.write('<script src="bower_components/angular/angular.min.js"><\/script>')</script>
<script src="js/scripts.min.js"></script>
<script src="js/controllers.js"></script>
<script>
var _gaq=[['_setAccount','UA-34376791-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>