Working With Chrome DevTools | Tiffany R. White Blog

Working With Chrome DevTools

Reading time: 2 mins

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.

[embed]https://i.imgur.com/5MJDBLd.gifv[/embed]

 

Maybe Some More DevTools Content?

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

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.

[embed]https://i.imgur.com/5MJDBLd.gifv[/embed]

 

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

  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.  2

  3. And watched countless tutorials…  2

  4. It’s really a ridiculous class: page-id? I was stumped while making the gif. Ha.  2



No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.