Technically speaking, all these debugging-oriented actions are performed in a source panel. I would rather suggest you to get into the nitty-gritty of principles and features of the source panel. Some tricks I like in source panel include:
From this point on, I will use DevTools to mean Chrome DevTools for brevity. Now there are a couple of things one must consider before debugging with DevTools.
#1 Canary build- Staying long on the bleeding edge of chrome and devtools is not so easy. In prior it is always advisable to check out the canary build of Chrome and even make it your default dev browser. Now for those who don’t have any idea regarding what canary build in chrome exactly means is a developer build that gets frequent updates for early adopters. However, there are times when it may have broken build but most of the time it’s completely okay as long as you get to dabble with the latest and greatest of Chrome and devtools.
#2 Developer tools — Next in line is the step where you get to experiment on all the developer tools. So what needs to be done is go to chrome: //flags and making sure Developer Tools experiments flag is turned on. As soon as you enable it, you can go to your settings and click on the experiments tab. If some of the features that I show here are not available in your devtools, you probably need to enable that feature in this experiments tab.
#3 Use Super experimental features- Scroll through all the available features, and in case, you don’t find any feature in particular. You simply require to check WIP features that might be hidden away in the devtools. While on the experiments tab, hit the shift key 6 times to show the WIP experiments on devtools.
The big Question: how to debug with the Chrome DevTools?
#1 Create a simple To-do List App- Before you even start debugging it is very important to know that you need something to debug. Now here we will be creating a simple To-do list app. For that:
This is how the HTML page will look like.
While as for the browser, things seem like this:
As simple as that! Did you find any complications? Certainly not! Just make sure your HTML file comprises of five key elements such as:
To search through our code while it’s running, we need to set breakpoints in our code. With the breakpoints in place, any time the site uses that line of code, the Chrome DevTools will pause execution of the code and allow us to start debugging.
#3 Creating Breakpoints- It’s time to set breakpoint. And trust me this one is easy, remember the way you do with any other IDE.
#4 Use console- By now, I am pretty sure you must have spent loads and loads of time in debugging the code. Time to stop and pull up the console.
As soon as you type values in the console, you will find your bugs. Moreover, the console can also run functions alongside with printing variables.
#5 Applying the Fix- And you are almost done! Time for applying the fix to the script.
With that, our web app works like we expect it to! Great work!
Biography: Charles Richard possesses over 10 years of experience in the business analysis profession. He also enjoys mentoring BA professionals, and his well-rounded knowledge base in engineering concepts provides an easy way to make non-technical people understand basic theories. Currently, he works at TatvaSoft UK a leading PHP web development company based in London. To know more about his company, please visit https://www.tatvasoft.co.uk/