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]
Comments