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.

2017-01-26_23-34-09

2017-01-26_23-36-10

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.

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

©2020 RussellCoder

Log in with your credentials

or    

Forgot your details?

Create Account