In a recent version of Chrome, they've redesigned the Developer Tools, including the Network tab:

It'd be neat if chromeHAR could start using those styles. I'd be willing to bet the styles would work better in Firefox too. It may not be a worthwhile enhancement, but it's worth considering.

If angular doesn't load (or is still loading), it's possible to see a flicker of the template content:

This ends up rendering the time & Latency useless as it's hard to read.

It would be nice to add support for multiple pages in one HAR, like in this example: http://www.softwareishard.com/har/viewer/?path=examples/softwareishard.com.har

Mostly so we can maintain a version without the GitHub banner and Google Analytics, but it would also be helpful given how hardwired 'master' is when typing Git commands.

Please consider simplifying dependencies or providing a distributable package. Forcing plain users (who do not want to test, just run) to install dependencies likes bower, phantomjs, VCBuild.exe (!!!) is a limit in use and applicability. Thanks.

npm http 304 https://registry.npmjs.org/underscore

[email protected] postinstall c:\dev\src\chromeHAR\node_modules\grunt-contrib
-imagemin\node_modules\jpegtran-bin
node index.js

‼ pre-build test failed, compiling from source...
‼ pre-build test failed, compiling from source...
x { [Error: getaddrinfo ENOTFOUND] code: 'ENOTFOUND', errno: 'ENOTFOUND', syscal
l: 'getaddrinfo' }
√ jpegtran built successfully!
x { [Error: getaddrinfo ENOTFOUND] code: 'ENOTFOUND', errno: 'ENOTFOUND', syscal
l: 'getaddrinfo' }
√ jpegtran built successfully!

[email protected] postinstall c:\dev\src\chromeHAR\node_modules\grunt-contrib
-imagemin\node_modules\optipng-bin
node index.js

‼ pre-build test failed, compiling from source...
x { [Error: getaddrinfo ENOTFOUND] code: 'ENOTFOUND', errno: 'ENOTFOUND', syscal
l: 'getaddrinfo' }
√ optipng built successfully!

[email protected] postinstall c:\dev\src\chromeHAR\node_modules\grunt-contrib-ima
gemin\node_modules\gifsicle
node index.js

‼ pre-build test failed, compiling from source...
x { [Error: getaddrinfo ENOTFOUND] code: 'ENOTFOUND', errno: 'ENOTFOUND', syscal
l: 'getaddrinfo' }
√ gifsicle built successfully!

[email protected] postinstall c:\dev\src\chromeHAR\node_modules\grunt-contrib
-imagemin\node_modules\pngquant-bin
node index.js

? getaddrinfo ENOTFOUND

[email protected] install c:\dev\src\chromeHAR\node_modules\karma\node_modules\socket.
io\node_modules\socket.io-client\node_modules\ws
(node-gyp rebuild 2> builderror.log) || (exit 0)

c:\dev\src\chromeHAR\node_modules\karma\node_modules\socket.io\node_modules\sock
et.io-client\node_modules\ws>node "c:\Program Files\nodejs\node_modules\npm\bin
node-gyp-bin....\node_modules\node-gyp\bin\node-gyp.js" rebuild
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe".
To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visua
l Studio 2005 or 3) add the location of the component to the system path if it
is installed elsewhere. [c:\dev\src\chromeHAR\node_modules\karma\node_modules
socket.io\node_modules\socket.io-client\node_modules\ws\build\binding.sln]
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe".
To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visua
l Studio 2005 or 3) add the location of the component to the system path if it
is installed elsewhere. [c:\dev\src\chromeHAR\node_modules\karma\node_modules
socket.io\node_modules\socket.io-client\node_modules\ws\build\binding.sln]

-Image resources should show preview image.
-Should have "Preview" tab with

Using Ubuntu and chromium I can't drag and drop.

Any idea ? Can you add an import button instead

You can see the empty space between the bottom info bar and the bottom action bar.

App is completely broken in Safari

/var/www/bot/node_modules/mysql/lib/protocol/Parser.js:82
throw err;
^
TypeError: Cannot read property 'starttime' of undefined
at Query._callback (/var/www/bot/sell.js:258:44)
at Query.Sequence.end (/var/www/bot/node_modules/mysql/lib/protocol/sequences/Sequence.js:96:24)
at Query._handleFinalResultPacket (/var/www/bot/node_modules/mysql/lib/protocol/sequences/Query.js:144:8)
at Query.EofPacket (/var/www/bot/node_modules/mysql/lib/protocol/sequences/Query.js:128:8)
at Protocol._parsePacket (/var/www/bot/node_modules/mysql/lib/protocol/Protocol.js:271:23)
at Parser.write (/var/www/bot/node_modules/mysql/lib/protocol/Parser.js:77:12)
at Protocol.write (/var/www/bot/node_modules/mysql/lib/protocol/Protocol.js:39:16)
at Socket. (/var/www/bot/node_modules/mysql/lib/Connection.js:96:28)
at Socket.emit (events.js:107:17)
at readableAddChunk (_stream_readable.js:163:16)

anyone know what could happen? Bot was working fine and this happend today :(

Hey @cvan,

I went ahead and added you as a contributor.

Also I appreciate all the work you've done on the project. Figure I'll open an issue just so I'll have somewhere to communicate this with you.

I guess you can now close this ticket when ever.

Ha also no pressure. But you have been reviewing PRs so you should also be able to merge them 😉

Thanks.

To smooth and encourage contributions, can the license of the project be stated and provenance of code confirmed? i.e. which bits come from Chrome and other places.

Some recording proxies, e.g. browsermob, omit the timings object for entries which have encountered certain failure modes. (reading the spec, this is ambiguous behaviour, HAR tools may be at liberty to omit this...open to debate IMO)

chromeHAR could be more lenient with this behaviour in mind.

Suggesting that we go for the default of 0 in this case for receive, for a HAREntry.

It'd be nice to load an external HAR resource (assuming it's CORS'd or on the same origin), for example: http://localhost:9000/?url=http://localhost:9000/sample.har

Sometimes I want to find non cdn cache hits and it's a bit of a hassle to see the response header for each request.

We still have the preference cog in there, that might be a good place to have a simple "highlight none cache hits" checkbox which for now just highlights all request without an one of the CDN/Reverse Proxy headers: (X-Cache, X-Cache-Hits, X-Age, X-Varnish, etc..)

View URL Encoded & Decode URL

It'd be nice if the table columns were resizable, like in the Chrome Dev Tools.

which would be useful

"Use -1 if the timing does not apply to the current request."

Har file with -1 http://httparchive.org/viewsite.php?pageid=11358518#waterfallf

When there's no lastComponentPath (i.e., for resources at the origin's root), the "Name" for the resource is blank:

It would be helpful if we could remove entries from the HAR file and then export the HAR file

I like to through har files on my pastebin account; it would be nice if they could be loaded directly.

It would be really handy if you could share a HAR with a link like this: http://ericduran.github.io/chromeHAR/http%3A%2F%2Fpastebin.com%2Fxxxxxxx

Or maybe just give the option to paste json into a textarea?

Edit Found that cvan already added this feature but it doesn't look like I can use pastebin because of cross site stuff. My Attempt to use pastebin

I uploaded a HAR with content (created in Chrome via save as HAR with content).
The content (responses of the requests) is not shown however.

Compare:

All

Scripts

Very minor, but Chrome doesn't show the charsets:

chromeHAR does:

They sum to 100.9719495091164070%, just not giving 110% ;-)

This means that it makes certain alignment problems impossible when extending the code.

Cookies Request/Response pane is not collapsible.

When I Sort by size, units are ignored : 1MKB < 24KB

Right now most of yeoman/grunt isn't really being used. All this site needs is basic minification.

Gulp is simpler solution for this.

Right now most of the code assumes it's only going to be one page.

We should support multiple pages.

May 15th 2013 - Mac OS X - Version 26.0.1410.65

I'm guessing Chrome has been updated to a different version of HAR ?

TypeError: Cannot read property 'startedDateTime' of undefined
    at Object.HAREntry (http://ericduran.github.io/chromeHAR/js/libs/HAREntry.js:49:50)
    at Object.<anonymous> (http://ericduran.github.io/chromeHAR/js/controllers.js:22:20)
    at Function.x.extend.each (http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js:4:4572)
    at Object.$scope.updateHar (http://ericduran.github.io/chromeHAR/js/controllers.js:21:7)
    at http://ericduran.github.io/chromeHAR/js/controllers.js:122:18
    at Object.e.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js:88:272)
    at Object.e.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js:88:379)
    at FileReader.reader.onload (http://ericduran.github.io/chromeHAR/js/controllers.js:121:16) angular.min.js:62

while loading HAR file:

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.31"
    },
    "pages": [],
    "entries": [
      {
        "startedDateTime": "2013-05-14T07:31:55.685Z",
        "time": 223,
        "request": {
          "method": "POST",
          "url": "http://REDACTED",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Cookie",
              "value": "REDACTED"
            },
            {
              "name": "Origin",
              "value": "http://REDACTED"
            },
            {
              "name": "Accept-Encoding",
              "value": "gzip,deflate,sdch"
            },
            {
              "name": "Accept-Language",
              "value": "en-US,en;q=0.8"
            },
            {
              "name": "X-Requested-With",
              "value": "XMLHttpRequest"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            },
            {
              "name": "Content-Length",
              "value": "1566"
            },
            {
              "name": "Pragma",
              "value": "no-cache"
            },
            {
              "name": "Accept-Charset",
              "value": "ISO-8859-1,utf-8;q=0.7,*;q=0.3"
            },
            {
              "name": "Host",
              "value": "REDACTED"
            },
            {
              "name": "User-Agent",
              "value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31"
            },
            {
              "name": "Content-Type",
              "value": "application/x-www-form-urlencoded; charset=UTF-8"
            },
            {
              "name": "Accept",
              "value": "*/*"
            },
            {
              "name": "Cache-Control",
              "value": "no-cache"
            },
            {
              "name": "Referer",
              "value": "http://REDACTED/"
            },
            {
              "name": "DNT",
              "value": "1"
            }
          ],
          "queryString": [],
          "cookies": [
            {
              "name": "session_start_time",
              "value": "1362528704786",
              "expires": null,
              "httpOnly": false,
              "secure": false
            },
            {
              "name": "k_visit",
              "value": "1",
              "expires": null,
              "httpOnly": false,
              "secure": false
            },
            {
              "name": "__utma",
              "value": "228920153.132626423.1364164193.1364164193.1364447815.2",
              "expires": null,
              "httpOnly": false,
              "secure": false
            },
            {
              "name": "__utmc",
              "value": "228920153",
              "expires": null,
              "httpOnly": false,
              "secure": false
            },
            {
              "name": "_ga",
              "value": "1.4.132626423.1364164193",
              "expires": null,
              "httpOnly": false,
              "secure": false
            }
          ],
          "headersSize": 915,
          "bodySize": 1566,
          "postData": {
            "mimeType": "application/x-www-form-urlencoded; charset=UTF-8",
            "text":"{ REDACTED}",
            "params": [
              {
                "name": "{ REDACTED }",
                "value": ""
              }
            ]
          }
        },
        "response": {
          "status": 400,
          "statusText": "Bad Request",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Pragma",
              "value": "no-cache"
            },
            {
              "name": "Date",
              "value": "Tue, 14 May 2013 23:51:27 GMT"
            },
            {
              "name": "X-Error-Message",
              "value": "There was an error with the data of the request"
            },
            {
              "name": "Server",
              "value": "nginx/1.1.19"
            },
            {
              "name": "X-Powered-By",
              "value": "PHP/5.3.10-1ubuntu3.5"
            },
            {
              "name": "Transfer-Encoding",
              "value": "chunked"
            },
            {
              "name": "Access-Control-Allow-Methods",
              "value": "OPTIONS, DELETE, GET, POST, PUT, HEAD"
            },
            {
              "name": "Content-Type",
              "value": "text/html"
            },
            {
              "name": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "name": "Cache-Control",
              "value": "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
            },
            {
              "name": "Access-Control-Allow-Credentials",
              "value": "true"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            },
            {
              "name": "X-Error-Code",
              "value": "MALFORMED_REQUEST"
            },
            {
              "name": "Access-Control-Allow-Headers",
              "value": "Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Origin, Authorization, Accept"
            },
            {
              "name": "Expires",
              "value": "Thu, 19 Nov 1981 08:52:00 GMT"
            }
          ],
          "cookies": [],
          "content": {
            "size": 123,
            "mimeType": "text/html",
            "compression": -11,
            "text": "[{\"message\":\"Did you complete your Highest commenced educational qualification\",\"fields\":\"ishighestQualificationComplete\"}]"
          },
          "redirectURL": "",
          "headersSize": 750,
          "bodySize": 134
        },
        "cache": {},
        "timings": {
          "blocked": 0,
          "dns": -1,
          "connect": -1,
          "send": 0,
          "wait": 221,
          "receive": 1,
          "ssl": -1
        }
      }
    ]
  }
}

Happens with chromium Version 36.0.1985.125 Ubuntu 14.04 (283153)

console:
TypeError: Cannot read property 'startTime' of undefined
at Object. (http://ericduran.github.io/chromeHAR/js/controllers.js:110:47)
at Function.x.extend.each (http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:4575)
at Object.$scope.updateHar (http://ericduran.github.io/chromeHAR/js/controllers.js:108:9)
at http://ericduran.github.io/chromeHAR/js/controllers.js:247:22
at Object.g.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:104:502)
at Object.g.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:105:102)
at FileReader.reader.onload (http://ericduran.github.io/chromeHAR/js/controllers.js:246:20)

Thanks!

When I filter the requests and click on an entry on the left side, wrong details are shown on the right side. It looks like the index of the clicked item is used on the non-filtered list.

Chrome shows the query string.

Hi!

ChromeHAR exhibits many problems in Firefox. The layout is mangled and some elements are missing. See the following screenshot:

When I debug an android device remotely the HAR file is not working in your viewer. In the console, I can see the following error:

TypeError: Cannot read property 'startedDateTime' of undefined
    at Object.<anonymous> (http://ericduran.github.io/chromeHAR/js/controllers.js:99:73)
    at Function.x.extend.each (http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:4575)
    at Object.$scope.updateHar (http://ericduran.github.io/chromeHAR/js/controllers.js:97:9)
    at http://ericduran.github.io/chromeHAR/js/controllers.js:271:20
    at Object.g.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:104:502)
    at Object.g.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:105:102)
    at FileReader.reader.onload (http://ericduran.github.io/chromeHAR/js/controllers.js:270:18) 

So I had a look into the code in line 99 of controllers.js and it is calling:

pages[0].startedDateTime

I had a look into the HAR file then and I've seen that the pages are an empty array:

"pages": [],

I could reproduce it on some different devices. Maybe it's not empty for all devices, but it was for the devices I tested.