You can save a huge amount of time simply by learning to use the development tools (all modern browsers have them). Below I’m demonstrating some nice tricks that I’m sure will help you. Keep in mind that the browser I use for development is Chrome (Chromium to be precise), so some tips might not work if you use the dev tools of another browser.
Select element(s) without jQuery
You can select any element by using the dollar sign selector (
$('a') ) even if you don’t have jQuery available on the document! This convention is using the
document.querySelector under the hood (for example
document.querySelector('a')), so it returns only the first matched element.
If you want to select multiple elements you can use the double dollar sign selector ( $$(‘a’) ) which returns an array of matched elements. The specific convention is using the
document.querySelectorAll (for example
Keep in mind that you can use any valid selectors like #ids, .classes, etc., depending your browser’s CSS selectors capabilities.
It’s a bit frustrating when you try to log an object, only to get the already useless output [object Object]. Well, try using a comma (,) instead of the plus sign (+). You can also log multiple items if you like…
Console.log the event listeners of an element
This function will save you tons of working hours! Just pass the element you want to check at the
getEventListeners() function, and voila, the console logs all the events of the element.
Monitor every single event fired on an element
A very similar method that logs every single event triggered is the
monitorEvents() function. It works just like the above function, simply pass the element you want to track and you are ready to go! If this function is driving you crazy (as I explained, it logs everything), you can limit the events you log by passing a string or an array of strings with the events you want to log. Don’t forget to run the
unmonitorEvents() function to stop the logging otherwise the browser will continue logging your events!
Log arrays in beautiful tables using the console.table
If you want to log arrays in a more beautiful and useful way, then simply try the
Log all properties of an element
By passing an element to the
dir() function you can log all the properties of that element (identical to the view that you would see in the DOM panel).