8th February 2012

OS X:Using Web Kit for HTTP, Website Analysis and Network Testing

Safari (or Webkit) has a neat debugging feature built in. It is available in both OS X and Windows versions. When testing performance of websites through application inspection on firewalls or load balancer it can be a useful tool to get visibility.
Step 1 – Open Safari (I recommend you use Webkit) and then open the Preferences Menu, Choose Advanced and tick the “Show Develop Menu in the menu bar”. Now you will see an extra Menu option in the toolbar “Develop”. See below:

webkit-analysis-5.jpg

Close the preferences windows.

Step 2 – open the web page that you want to analyse in the usual way. I recommend http://etherealmind.com :-)

Step 3 – Open the Develop menu, select “Disable Caches” (since local caching in the browser will interfere with accurate testing), and then select “Show Web Inspector”

webkit-analysis-6.jpg

This will open the Web Inspector is a separate Windows (if it is blank, you didn’t open a web page after enabling the Developers menu). It should look something like this:

webkit-analysis-7.jpg

In the bottom left hand corner, you will see square with a dark line at the bottom. Clicking this will anchor the Network timeline inside the web page:

webkit-analysis-3.jpg

Evaluating performance

By hovering over a single element you can see how long it took for your web server to establish the connection. In the picture below, it took 10.07s for the first connection (far too long) and 612 milliseconds to complete the HTTP request.

webkit-analysis-8.jpg

Selecting the element will show the contents of the request, and you can also look at the HTTP Header.

webkit-analysis-9.jpg

Some things that you should look for

Check the size of the TOTAL download and the check the different elements for size.. Sometimes developers use the wrong image and you can see a multi-megabit image that takes tens of seconds to download.

Check the elements as listed and make sure they are what you are expecting. Sometimes websites call external elements that are broken and can slow down the performance.

Check the latency of the connection request and the response. If the latency is high, think about whether that is packet delay or the firewall/load balancer causing that delay.

This post is copyright of Thropos Ltd ©2008-2011 at Etherealmind.com - contact | email: greg.ferro@packetpushers.net - twitter: @etherealmind | All rights reserved
About Greg Ferro

Greg Ferro is a Network Engineer/Architect, mostly focussed on Data Centre, Security Infrastructure, and recently Virtualization. He has over 20 years in IT, in wide range of employers working as a freelance consultant including Finance, Service Providers and Online Companies. He is CCIE#6920 and has a few ideas about the world, but not enough to really count.

He is a host on the Packet Pushers Podcast, blogger at EtherealMind.com and on Twitter @etherealmind and Google Plus