New to JavaScript? Meet your best friend- Chrome Developer Tools
My experience so far in coding bootcamp has taken me through two amazing modules; Mod 1 covering Ruby and Mod 2 getting into Rails, with the end of Mod 2 culminating in creating a fully functioning rails app from scratch. Pretty cool! But, with Mod 3 approaching, I new I had my work cut out for me taking on JavaScript.
Even though I’d had some JS experience working through the pre-bootcamp course, it had been a while, and I was a bit rusty. And, truthfully speaking, I don’t think I understood the functionality or power behind coding during that time, as I more so concerned with passing the provided tests. So, it’s been fun to come back and re-visit some topics now that I have a little experience under my belt.
Learning a new language is difficult. It might be hard to imagine reading one article on the Spanish language and then be entirely fluent. And if that’s you, you rock!
The same goes with coding! Learning a new language, in this case JavaScript, is learning a whole new language of syntax, rules, functions, and properties. There are a lot of great resources in code editor extensions and on the web. But, one is included in your very own browser!
Note: The following applies to using Google Chrome.
To find developer tools, navigate to the “View” header in your Chrome menu, click to dropdown, and move your mouse to the the “Developer” option. This will then display some options. For this blog, I’ll touch on “Inspect Elements” and “JavaScript Console”. However, I encourage you to check out all options. Don’t worry. You wont break anything!
Let’s check out elements! Go to your favorite website, navigate to the “Inspect Elements” option and click. You should see something like this:
What’s all of this?! In short, this a technical representation of what’s happening in your browser. It’s a fantastic resource for finding and selecting DOM nodes and elements. If you’re familiar with the DOM, great! If not, I recommend checking out Mozilla for some info. But, this will be a great friend and resource when needing to access and manipulate the DOM. Sweet!
Now, let’s take a look at JavaScript Console. Just as before, head to the proper drop down option and click. You should see something like this:
This will, most likely, be blank. However, depending on the site you’re on, it may display information about its cookies or other related items. But, again, should not contain much information. The JavaScript console is a great way to play with and test code when coding and developing programs.
For example, if you’re coding along and want to make sure that an element you’re trying to access is indeed the correct element, place a console.log with a congratulatory message to appear in your JavaScript Console to let you know you’re on the correct path.
Or, you can play around with existing code, so you know it works, before adding it to your code file.
In this example, I needed to add an additional user to my book1 array, but wanted to make sure the .push worked how I needed it to before writing it in my VS Code file.
Some of this might seem like magic, and it, indeed, may be! But, with a little research and lots of practice, learning how to use your Chrome Developer Tools will greatly enhance and strengthen your coding skills. Now go out there and code!
