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.
- Download Google Chrome if you haven't already.
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 -
The text on your browser should now be bright red! Cool, now this title really stands out. 👍
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.
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! 🙂
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.