Front-end Debugging Skills

Hello Friends, I would like to share some popular debugging ways I have learnt over the time inside the browser.

Debugger: We open any file that is rendering in your web app in the Chrome browser. After that one can place the debugger at a particular line and the code rendering will stop at that line. You can also right click on that break-point and edit the condition for it to stop at that condition.

if (jobFields && jobFields.length) {
  for (let i = 0; i < jobFields.length; i++) {
    reqObj.outputFields.push(jobFields[i].name);
    if (jobFields[i].name.startsWith("pjf") && jobFields[i].settings) {
      reqObj.outputFields.push(jobFields[i].settings.jobTagValue);
    }
  }
}

For the above code, you can add a breakpoint like,

jobFields.length === 5

So the breakpoint will stop only when the above condition satisfies.

You can select an HTML Element in the DOM and check at Attribute modification/ sub-tree modifications/ node removal. Right click on the HTML element in the DOM and you can see those options there.

Call Stack: You can check the flow of execution of code in the browser’s call stack. We can investigate as to where the current flow of code is and from where the current function call is happening.

Network tab: We can see all kind of files loaded in the page here. Be it Javascript/ Fetch Calls/ CSS, etc. For any API, we can see the initiator of that API, Payload, Cookies consumed. This helps debugging if you want to know where this API is getting initiated from. We can also see the time an API took to resolve and the response size- over the network and actual resource size.

Storage- We can track the Local Storage, Session Storage and Cookies in the browser via this space. If some functionality depends on these memories, we can check them here.

Console: All time favorite of developers, helps in getting to know any console errors. We also can see from where this error is coming from. Also, best practice to raise console.error() in case of try catch block written in the code.

Scopes: Every function in Javascript has scope of variables attached to it.
Local Scope: Local Variables of that function and it’s values.
Global Scope: Window level scope of vars and functions.
Closure: Function along with lexical scope of it’s parent.

Event listeners: Consider a scenario where a popup has to be opened on click of a button. But it is not happening right now. You may check that the click event listener has to be attached to that button and place a debugger in the function which should be triggered on the click of that button.

That’s it. I will come up with more in future. Thanks for reading till here.
<></>