Chrome’s developer tools are located a couple different ways. One can either right click in the window of a webpage and click on “inspect,” or you can click on the “View” tab at the top of your screen and scroll down to “Developer” and then “javascript console.”
This is where you will find your ‘playground’ as a javascript developer. Here is where you can play around with code of any website and it won’t at all effect the original code of the page. However, you can play around and see what would happen to the site as the user sees it. The “DOM”, or “Document Object Model,” is the interface that represents how your HTML is read by the browser, and then displayed to a user. The JavaScript language can be used to manipulate the objects to change the structure and style of your webpage without changing the HTML or XML document in the original code of the site.
I typically have an issue staying focused on one train of thought learning anything new. Give me something like computer programming where there can be many different solutions to one problem? — I’ve been losing my mind! I kept changing my actual code while designing or figuring out the structure I wanted for my SPA (Single Page Application) project. I’d panic and get lost in multiple rabbit holes of different ways to attempt an idea, which would lead to restarting my project over and over.
My main message is: DON’T FORGET ABOUT YOUR DEVELOPER TOOLS IN CHROME!! This is a magical box attached to the way your HTML document appears in your browser as your code is. In the console is where you can change your code, try out new ideas to see how they work/look, you can add or remove HTML tags. You can clear out the entire DOM and start with a clean slate! You can inspect your event listeners, or try new ones! THE BEST PART: You can do all of these things without touching your ACTUAL code. As soon as you hit the refresh button, all will go right back to the way the browser reads the current HTML file.
The above img is from my SPA JavaScript project. As you can see, over in the developer tools, you can scroll over different elements in the current HTML and it will highlight where that specific tag is appearing in the browser.
In the image above I have shown a tiny example of what the developer tools can do for you. I changed the title of the page from “Underdog Rescue” to “Adopt Me!” I did this by manipulating the DOM using JavaScript, and not at all touching my actual HTML document. First I found the element where the websites title was being defined. In this case, it was in a div with an ID of “greeting.” You can then get access to that elements children, and play around with their content. Any code you like, you can simply copy and paste into your VS code and save! Happy Coding!!
