Chrome Developer Tools

Chrome Dev Tools

A good grasp of how to use Chrome (or equiv­a­lent) Dev Tools are one of the most fun­da­men­tal skills a web de­vel­oper must have. From mon­i­tor­ing net­work calls to de­bug­ging Javascript to test­ing out CSS style changes, Dev Tools pro­vides a use­ful reper­toire of func­tions to help you de­velop, test, and op­ti­mize a web page.

Why Chrome?

There is not a par­tic­u­lar rea­son why I chose Chrome Dev Tools over other browsers, other than that I use Chrome and Chrome Dev Tools more than other browsers. Chrome Dev Tools does of­fer a lot of use­ful fea­tures, some of which may ap­ply to cut­ting-edge web de­vel­op­ment stan­dards, that may not be pre­sent on other browsers.

Opening Chrome Dev Tools

Windows: F12 or Ctrl+Shift+I Linux: Ctrl+Shift+I Mac: Cmd+Opt+I

CDT and the DOM

DOM stands for Document Object Model. It’s a con­ven­tion for rep­re­sent­ing and ma­nip­u­lat­ing ob­jects in HTML, XML, and XHTML doc­u­ments (characterized by the an­gle brack­ets).

What can I do?

  1. Inspect any el­e­ment
  2. View and change CSS rules
  3. View the el­e­men­t’s box model

Inspecting Elements

There are sev­eral ways to se­lect and in­spect a par­tic­u­lar el­e­ment. One can:

Click on the el­e­ment se­lec­tion tool, then click on an el­e­ment to jump to that po­si­tion in the doc­u­ment.

Click on a spe­cific el­e­ment in the Dev Tools Elements view.

What Can I Do With These Elements?

Now that you have se­lected an el­e­ment, you can right-click on the el­e­ment to see some of the ac­tions you can do:

Especially no­table is the abil­ity to tog­gle states such as ac­tive, hover, etc.

Styling

One of the most use­ful as­pects of Dev Tools is the abil­ity to change styles eas­ily.

With an el­e­ment se­lected, you can eas­ily view its styles.

The “Styles” tab con­tains all of the CSS rules that gov­ern the se­lected el­e­ment.

We can see that the se­lected el­e­ment has an id of “overlay”, and a class of “shell”, and that there are CSS rules de­fined for those se­lec­tors. The over­rid­den styles are struck through. You can also tog­gle el­e­ment state in this tab.

If you have an­i­ma­tions or tran­si­tions with a tim­ing func­tion de­fined, you can also use the cu­bic bezier ed­i­tor to help you with your an­i­ma­tions.

Box Model

The Computed Box Model pro­vides the fi­nal com­puted val­ues of mar­gin, padding, width, height, etc. This is par­tic­u­larly use­ful when cre­at­ing re­spon­sive lay­outs, or when there’s an awk­ward gap in your lay­out that you can’t find the source of. You can ac­cess this view by click­ing on the com­puted tab.

Network

Another very use­ful as­pect of Dev Tools is the Network tab. This al­lows you to view all re­quests made from this web­page. This in­cludes re­quests for im­ages, files, fonts, scripts, etc.

It also helps you de­ter­mine if there is a ma­jor bot­tle­neck to page load times. In this im­age, try to find at least one re­quest of each of the fol­low­ing types:

  1. HTML Document
  2. Font
  3. Stylesheet
  4. Javascript File
  5. Image

Example Case Study

Cubemania is a Rubik’s Cube tim­ing web­site that al­lows users to save their times. I use it a lot. Let’s an­a­lyze some of the re­quests it makes, specif­i­cally when a user logs in.

Cubemania Home Screen

Now let’s open up Chrome Dev Tools and switch over to the Network Tab.

Make sure that the red “record” but­ton in the top left is ac­tive.

Now I’ll click log in and see what re­quests are made.

We’re hit by a bar­rage of re­quests. Let’s look at the most in­ter­est­ing ones…

There’s a POST re­quest at the very top. Usually these are for form sub­mis­sions. Let’s click it open and take a more de­tailed look.

This a lot of in­for­ma­tion! We can de­duce some things about how Cubemania works on the server side! For ex­am­ple, we now know that this POST re­quest is mak­ing a call to the http://www.cubemania.org/session end­point, and that our ses­sion is stored in a _Cubemania_session cookie. We can also see all of our re­quest head­ers, which we might be able to use to recre­ate this re­quest man­u­ally. If we scroll fur­ther down, we see the re­ally in­ter­est­ing bit: the form data.

Now, I blacked out my pass­word, of course, but as you can see, we know ex­actly what fields are passed into the POST re­quest! Now, you might no­tice that there is also an authenticity_token field. This is gen­er­ated on the server side to try to make sure that you can­not spoof these re­quests. A bit of light Googling re­veals that this is com­mon in Ruby on Rails web apps. However, if we ac­cess the con­tents of the HTML first, we will be able to find the to­ken and pass it into the POST re­quest.

Resources Tab

The re­sources tab con­tains in­for­ma­tion on the ma­jor­ity of client-side stor­age op­tions. This in­cludes lo­cal stor­age and cook­ies.

Local Storage

If we click open the lo­cal stor­age sec­tion, we can find that Cubemania stores all of my times in the lo­cal stor­age.

Cookies

We can also view the cook­ies that Cubemania has stored. In here we do in­deed see the _Cubemania_session cookie we saw men­tioned pre­vi­ously.

Exercises

  1. Go on the Cubemania web­site and an­swer these ques­tions:
  • Click on the ‘Users’ tab. What type of CSS se­lec­tor is used to ap­ply the yel­low back­ground on hover ef­fect?
  • Search for “naitian” in the search box. Monitor the net­work traf­fic. What is/​are the query string pa­ra­me­ter(s) of the search query? What is/​are the value(s) of the pa­ra­me­ter? Is this re­quest a GET re­quest or POST re­quest? Why does that make sense?
  1. Visit this won­der­ful lawn care web­site: http://​kam­ron­sol­dozy.github.io
  • Look in the Console. What are some er­rors? Are any of these er­rors re­lated to each other?
  • Based on these er­rors, what part of the home page is bro­ken? What is it sup­posed to do?
  • How can we fix this?

Bonus) Solve a Rubik’s cube in un­der 30 sec­onds.

Further Reading

Chrome Developer Tools has a lot more to of­fer than just what we cov­ered here. If you’d like to find out more, here are some ma­te­ri­als to keep you oc­cu­pied.

Exercise Answers

1a.) #content a

1b.) Parameter: q, Value: naitian, GET re­quest, There is no need for a POST re­quest, since this value does not need to be kept con­fi­den­tial.

2a.) There are three er­rors. The fail­ure to load jquery.min.js is di­rectly tied to the Uncaught ReferenceError: $ not defined.

2b.) By view­ing the de­tails of the ReferenceError, we see that we need jQuery in im­age_s­lide.js, which is sup­posed to pro­vide an im­age slider.

2c.) If we load in jQuery, the im­age slider should no longer be bro­ken, and will al­ter­nate be­tween the 2 im­ages.