All modern desktop web browsers have a set of tools that allow a person to examine the inner gears of browser requests and responses. We are going to use google Chrome Developer Tools to see HTTP in action within the browser.
After you have downloaded chrome from chrome.com,
On mac, press these keys simultaneously
“command – option – I”
while on a webpage of your choosing. For this lesson I am using google.com.
Element Tab
The Element Tab shows and allows you to make read only changes to css styles. This is really useful because it allows you to preview in realtime css edits that can be copied into permanent css files.
Console Tab
The console tab allows you to make run and test javascript. Very useful in debugging JS code.
The Sources Tab
The sources tab allows a quick tree like folder view of the pages html, JS or css source code and the domains they are being served from. You can also test and save code snippets for later use via the Snippets sub tab..
The Network Tab
The network tab displays the request and response headers as well as the response code, and server ip address. Similar to Telnet on the command line but easier to read. Toggle between parsed and raw source view.
