Now it looks more like this:
Despite this, I still see developers writing things like
console.log(i + ‘ items’), and
console.log($(‘.some-element’).outerHeight()) — seemingly unaware of
the wondrous tools that come installed with the browsers they use every day.
Could you be using web inspector better?
If you find yourself doing any of these, it’s likely you could be using web inspect better:
console.log()ing variables ad nauseam.
- Guessing at variable and function names.
- Making lots of small code changes resulting in back and forth between browser and code until it’s right.
- Experimenting/playing in a text editor vs interactive console.
Using web inspector
Chrome DevTools is an amazingly powerful and in-depth piece of software, so I suggest you invest some time looking at the guide (it’s a really good guide!). Instead I’m going to talk about your new favourite statement:
Here’s how to use it:
- Stick that anywhere in your code where you want stuff to stop.
- Reload the page with web inspector open.
You’ll end up with a big panel of code in the middle of your screen. It isn’t there to look pretty - not only can you modify, save, and re-run the code; you can also evaluate any expression by highlighting, right-clicking, and selecting ‘evaluate in console’.
There’s some other panels too:
Call Stack - a list of functions inside the current stack that have been called up until your debugger statement. You can move around freely in your program by clicking these.
Scope Variables - variables that are available in the current scope. This allows you to see what data you’ve got at your disposal.
Console - you can also bring up an interactive console by hitting your
That’s it - a fully interactive environment to play/experiment/test with at your disposal. To take this to the next level, you can save all your changes locally when you setup workspaces.