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!

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

  • 3 years ago

This tutorial will teach you how to create signup and login functionality on an …

  • 3 years ago

An example for how to create custom theme color pallets in Bootstrap 5 …

  • 2 years ago

After a month of coding on my new Pixelbook, I'm ready to share how this …

  • 3 years ago

Proper logout using PassportJs and Express-Session for single page …

  • 3 years ago

After a month of coding on my new Pixelbook, I'm ready to share how this …

  • 3 years ago

A deep dive into Mongoose populate, to help avoid some pitfalls that you may …

  • 2 years ago

How to fix a "Permission Denied (publickey)" error for Digital Ocean, by …

  • 3 years ago

My UX/UI thoughts on selecting the right navbar icon (hamburger vs dots …

❯

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

G

Join the discussion…

Comment

Log in with
or sign up with Disqus or pick a name

Disqus is a discussion network

  • Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

  • Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
  • Contact me or enable others to contact me by email with offers for goods or services
  • Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Share

H

Dev Tools Is Not Privacy

see more

Show more replies

S

bread I leraned how to hak ogoole search bar and get into dep web tanks very muchs

see more

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

  • Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

  • Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Initial Apps](/content/site-root.html)

—

Teach Yourself To Code Part 3 - Hacking Your Browser With Chrome Developer Tools

Share this