Chrome DevTools are a developer’s best friend. With the explosion of Javascript frameworks, it’s more important than ever that you have the ability to work with your code live in the browser. Though DevTools are incredibly powerful, we’re only going to cover a small subset of their abilities in this post.
DISCLAIMER: In order to get the most out of this blog post, you should be using Chrome.
The DevTools panel allows you to interact with the HTML, CSS, and Javascript running on just about any page on the internet. They’re great for messing around, but their real purpose is to save developers time and mental anguish. DevTools save you time by allowing you to manipulate your code in the browser, allowing you to quickly debug styling issues and play with different ideas.
In order to use DevTools, you’ll need to right click somewhere on the page and select “inspect element”. This will bring up an entirely new pane in your browser showing all the assets used on that page.
*When you open dev tools, if the pane shows up on the bottom half of the screen, click the button to the left of the “X” in the top right to move the panel to the right side of the screen.
Upon closer inspection you’ll see three windows inside that pane:
- The upper window contains the HTML for the page you’re on
- The lower left window will show the CSS styles applied to that page
- The lower right window will show the CSS Box Model to help you quickly identify what you’re looking at.
Now that you know how to access DevTools it’s time to have a little fun and find out what they can do. Navigate over to everyone’s favorite fake news site, The Onion. Find an article you like and then follow these directions! I chose this article, I guess it speaks to me:
Precisely because this article reminds my of my own life and because I’m a narcissist, I’m going to actually make this article about me. First thing I have to do is open Chrome DevTools, but to make my life easier, I’m first going to highlight one of the words in the articles title.
Once the text is selected I’m going to right click and select “inspect element”, this will not only open DevTools but it will open on the html that I specified by highlighting.
Now comes the best part. In the html panel on the right you can double click on the text of the headline and edit it to say whatever you want! In this screenshot you can see that I’ve edited the text in the DevTools panel but the changes won’t take effect on the page until I hit enter.
Now that I’ve hit enter the changes take effect on the page! If I now close the DevTools window by pressing the “X” button in the top right corner of the window the changes remain and we are ready to take a screenshot to show the world we made it into the onion!
Here is the final product, an article about how I, Graham McBain, won’t let my toothbrush die. I think it’s time you try giving this a shot, cruise over to your favorite website and find an article you would like to insert yourself into.
To learn more tips and tricks about Javascript and web applications, apply for our Software Engineering bootcamp.
