Home » /Home » Working With Chrome DevTools

Working With Chrome DevTools

1 min read

After working with web dev technologies for the past two years, I am finally beginning to understand the virtues of developer tools, specifically Chrome DevTools 1.

Intimidated by the ‘Tools

For a while now I had been intimidated by all the tabs and functions of the Chrome DevTools 2. But as I became a better developer 3 I began to use DevTools to debug my apps. The more I worked with them, the more fearless I became.

Some Interesting, Basic Things You Can Do with the ‘Tools

Playing with the HTML

The nice thing about DevTools is that whatever you play with inside of them, it really doesn’t affect the site you’re playing with.

Here I can add a class on an element 4 and hit return. It adds the class.

https://i.imgur.com/DZMZiDR.gifv

Changing Styles

Here you can just play around with the styles on the site. Here, I change the color of the text on Packt Pub to a color called Disco.

https://i.imgur.com/5MJDBLd.gifv

 

Maybe Some More DevTools Content?

I think I will make a series out of this. What do you think?


  1. I can definitely argue they are the best around. Safari, on the Mac is probably the worst, but then, Apple has no incentive to give web developers tools because it won’t help their bottom line, i.e. App Store. 
  2. Hackers hack: I spent my late teens and early twenties just playing around with Windows, not being scared of breaking things. Not sure why I didn’t just play around with the tools. 
  3. And watched countless tutorials… 
  4. It’s really a ridiculous class: page-id? I was stumped while making the gif. Ha. 

CC BY-SA 4.0 Working With Chrome DevTools by Tiffany White is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.