podcast

S01E01 - Chrome Dev Tools

by ✨ Kevin B. Ridgway ✨

A short stroll through Chrome Dev Tools.

Show Notes

Dev Chrome Tools

Disclaimer: Chrome 58 is the version of Chrome/Dev Tools I used when doing this episode. If you are on the stable version of chrome - it’s updated roughly every two-three weeks for minor releases, and every 6 weeks for major releases. So ye be warned, what I may say, where things may be, etc, could change if you’re listening tooth’s in the future.

What is Chrome dev tools?

How do I access it?

  • Select More Tools > Developer Tools from Chrome’s Main Menu.
  • Right-click a page element and select Inspect.
  • Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Getting Started

Three dots vertically stacked on top of each other.

  • Click on this menu and hover over the three icons that are shown to the right of ‘Dock side’.
  • Choose your poison, personal preference
  • sometimes choose right side, when going into device emulating for example, some people choose the pop out window

Elements

Right click select ‘inspect’

  • Styles panel (double click, and change any value).
  • Computed panel, (double click on the box model picture where there are values, you can change these!)
    • First thing at the top is a visual representation of the box model of the element you selected.
    • You can edit all the values around the box model!
  • Below the box model visual, is a list of the actual computed CSS properties, meaning after all the applied styles, these are the ones that ‘won’, and are applied to the element after the cascade.
    • You can click the ‘Show all’ checkbox, and it will even show you the browser-specific styles applied to the element in question. Meaning you can see what you may need to override to get the styles you want for that element.

Console

  • You can just start typing JS functions, things in global scope are here, and can be called
  • If jQuery is on the page you’re inspecting, for example, you can type $(‘selector’) and it will show that element in the console
  • Hit enter to do command
  • Multi line script you’re typing in? Hit shift+enter to go down a line, but not execute what you already typed in.
  • You are running in the context of the page of you’re on.
    • Type ‘document.body’ hit enter…it’s the html of the page, hover over things here in the console, and see those highlighted on the page
    • You can do things to the webpage here
    • document.body.style = ‘background: yellow’; will show the background of the page you’re looking at with yellow
  • Refresh the page, things are lost, if you’re saving/running things here.

Sources

Where JavaScript can be debugged.

Command or Control P to open file. Any file loaded on the page, image, JS, font, video.

Left panel organized by domain, with the top one being the page you’re looking at in the browser.

  • Next things might be extensions you have loaded in chrome
  • The domain at the top is what your current page is, the other domains below are what assets that may have been included on this page from other domains such as google analytics for example.
  • Can click through folder/file hierarchy here.
  • You can edit this files in place (refresh will blow your changes away), and save them if you choose.

Find a CSS file, click on it. is it all on one line?

  • Click on the curly braces in the lower left hand corner, pretty formatted for you!

You should follow @theriseoffee on Twitter.
Download MP3 (14.6MB)