Handy JavaScript Console Commands For Web Developers

In web development, it’s not always easy to keep up-to-date with all the fancy debugging features of modern browsers. That said, a strong command of your browser’s development console can take you a long way, if you’re sharp with JavaScript.

Web coder Swagat Kumar Swain has put together a handy list of commands you can use with Chrome’s developer console, though there’s nothing stopping you from using them with your browser of choice (verbatim or with a few tweaks).

Perhaps the most useful is live page editing using document.body.contentEditable=true. Other useful tips include event monitoring and even timing the execution of your code:

The JavaScript console has an essential function called console.time(‘labelName’) which takes a label name as an argument, then starts the timer. There’s another essential function called console.timeEnd(‘labelName’) which also takes a label name and ends the timer associated with that particular label.

One piece advice I’ll likely use in the future is selecting DOM elements via the console. This can certainly be the easier option than inspecting via right-click for hidden or otherwise obscured components.

Things you probably didn’t know you could do with Chrome’s Developer Console [FreeCodeCamp]

The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.