As you begin to develop apps, chrome developer tools will quickly become your best friend!  Chrome lets you to inspect any front end code that's running on your browser.  This is super helpful for developing and troubleshooting your own sites, as well as figuring out how other sites work.

Prerequisites

  • Download Google Chrome if you haven't already.
  • You'll want some basic knowledge of html, css, and javascript.  Try freeCodeCamp or Udemy to learn more.

Hacking The HTML

Open Chrome and navigate to any website.  For this example, I'm headed to Apple's website.

Once there highlight some text and right click, then press inspect.

A bottom panel will open on your browser.  The left side displays the html code that makes up that page.  The right side shows all of the css that makes up the page.

Now let's have some fun.  From the HTML panel, find the text that you have highlighted (in the example above, it was "iPhone X").  You may have to click a few of the dropdown triangles to the right of the HTML lines to find this text.

Once found, double click the text to edit it, and change it to whatever you want. Here I've changed it to "Motorola Flip Phone" ? (please don't hurt me Mr. Cook, just a bit of innocent nerd humor... ?).

Congrats, you've made your first HTML browser hack.  ?

Hacking The CSS

Now let's do some CSS hacking to really make this POP!  On the right side, you'll find the CSS for this site.  Let's change this text to crimson.

In the HTML panel, click to highlight the span element just above the text.  The style for this text is shown in the CSS panel to the right.  Let's add our style to the main class (Note: You can add to whatever class you like).  Double click inside the .main area and add your style - color: crimson.

The text on your browser should now be bright red!  Cool, now this title really stands out. ?

Hacking The JavaScript

Guess what, you can also add javascript!  To do so, click the Console tab.  The console tab is great because it also logs out all of the errors with your javascript code, hence this is an essential developer tool.  For fun, let's add a simple javascript alert.

Click on the Console tab. This is where javascript commands can be executed, and any console or error messages are displayed.

Next, we'll add a javascript browser alert with custom message.  Enter the following command to create an alert window (Note: You can add whatever message you like):

alert("Message from Steve Jobs: This page is ?")
`

With this command, an alert message should appear in your browser to give you a shaming for your flip phone.  ?

Testing Mobile Views

Another very useful tool in the developer console is the ability to get a sense of how things look on a tablet or smart phone.  This is very handy as you begin developing and need to make sure everything look good on all devices.

Click the tab to the left, that looks like a phone & tablet:

In the above example, the browser will give you an iPhone sized preview.  You can view other device types from the dropdown in the navbar above.

To go back to the regular view, simply click the phone & tablet icon again to un-toggle.

Final Thoughts

Chrome Developer Tools are a nice and powerful feature to get you coding more effectively.  

Just to clarify, the above examples are not actually hacking into a website.  You're just able to see and modify what's displaying locally on your own computer.  As google once said, Don't be evil! ?

You should instead be using these tools to help you develop your front end.  Quickly play around with your HTML and CSS to get that look you want.  Review your JavaScript console for troubleshooting errors and testing code.

The above tutorial is a brief intro to some of the most useful features for developers. This tutorial just scratches the surface of all that these tools can do!  Feel free to google around for more depth on these tools, or visit the Chrome website.

Next Up

Next we'll provide an overview of the popular code editor VS Code.

This article is part of an ongoing series.  Subscribe below if this content helps you!