Helpful Tips and Tricks: Chrome DevTools
Upon my own personal journey to learn and become familiar with JavaScript I’ve found probably the Most helpful tool in refining my code is without a doubt Google Chrome’s DevTools.
Anyone who has “inspected” a webpage probably has some understanding of how truly powerful the DevTools are. They include a very helpful visualization of the DOM tree, a REPL console in which you can run JavaScript, a CSS reference where you can manipulate elements style responsively, and a Network reference where you can delve into the load time/order/etc. of any webpage just to name a few. Today however I’m just going to be focusing on the Console feature of DevTools, but will include 2 of my other favorite features at the end.
To begin:
Launch the DevTools while on any webpage by either left clicking and selecting “inspect”, using a keyboard shortcut Command+Option+C (Mac) / Control+Shift+C (Windows, Linux, Chrome OS) or simply selecting “Developer Tools” from the “More Tools” option of Chrome’s settings. From there the DevTools window should pop up. From the main nav bar select the option “console” to open the console REPL.
Here is where you have the ability to run stand alone code OR run JavaScript code that has been loaded with the webpage itself. You can use things that have already been declared such as global variables or functions.
Now there are quite a few built in methods that come with Console. The most useful of these when debugging your code is going to be console.log(). This prints the console whatever the evaluation of its block. For example: console.log('hello world') will return simple => hello world. Where as something like console.log(32-10) will return => 22. Using this you can sprinkle console.log’s throughout your javascript code to ensure that functions are returning what you expect them to, or variables values are manipulated how you wrote them.
Another equally as useful tool is console.dir(). This prints a JSON representation of the object passed it. So in the example after selecting the h2 from the DOM, by then using console.dir(), this prints to the the object which you can then uncollapse and inspect the object.
Another useful Console method is console.group(). This takes a label which will then log everything after it to this ‘group’ until console.groupEnd() is called. This is helpful for logging multiple values that are all associated with each other. For example if you were to log all of the attributes of a specific object.
A useful console method that help to evaluate website performance is console.time(). This starts a timer that will run until the code hits a console.timeEnd(). So if you were looking to test something like script load times by placing one at the beginning of your code and then an timeEnd at the end you’d be able to evaluate how long it took Chrome to load your script file.
Once you start getting into complex JavaScript patterns such as callbacks another useful Console method is console.trace() which will print out a stack trace.
These are quite a few other Console function that come with the DevTools which are absolutely worth looking more into and playing around with until you’re able to understand them. All of them will only continue to help you write better and cleaner code.
Another favorite feature of Console comes with its REPL abilities and how it can manipulate the DOM in real time. By running some simple JavaScript code you can then test and alter the DOM to suit your purpose.
There are many, many, MANY things you can do within the Console and these just scratch the surface. And Console is just ONE of the amazing tools that come with DevTools. Just really quickly I’ll talk about two of my other favorite features within DevTools that don’t deal with the Console.
The first one being the Mobile Simulation. By clicking the small icon in the top left of the DevTools window that looks like an phone/tablet, DevTools then pairs down your website into what would be rendered with the selected device. This allows you to really see how your CSS and JS need to behave when pushed to a smaller aspect ratio than a laptop or PC.
My second favorite feature is seeing how your DOM content loads. Within the DevTools by clicking the Network tab and then within Network Settings you can choose ‘Show Overview’ and ‘Capture Screenshots’. This will give you a step by step representation of how your DOM loads and may point you in the direction of how to fix a pesky Unable To Load Content error, or any number of errors that deal with order of load.
These are just a SMALL sample of the powerful tools that come with DevTools and I invite you to go out and explore the Powerrrrrrr!!
[1]: Chrome DevTools (https://developers.google.com/web/tools/chrome-devtools)
