Debugging Front-end apps using Chrome DevTools

Wiki Handbooks
, ,
1

App development workflow naturally requires debugging and testing. As you might already be aware, the Freshworks Developer Kit (FDK) provides dedicated testing pages for Installation Pages and Serverless Events. This can be leveraged for simulating & testing Installation and Product event triggers.

One can also take advantage of the browser’s Developer Tools to debug apps while coding. This will not only speed up the development but also ensures best-practices are taken care of by default.

Using the debugger

Let us see how we can leverage DevTools to enhance our debugging. Often, we can find ourselves using console.log to debug our application. However, as the name implies, it is well-suited for logging and is not the best choice for debugging.

For example, one might naturally add console statements to debug what happens inside Promise.all

Code Outcome
728x800,35% 1178x724,35%

Instead, debugger statements can be added. This will freeze code execution and lets us examine the state of code apart from the result.

Note: Make sure you run the app using fdk run --skip-coverage before debugging.

For example, the same code with debugger statements placed at the right points look like the following

Code Outcome
750x794,35% 1784x1534,35%

  • The use of debugger has the same effect as setting a breakpoint in code. We get to see the value of all variables at that point of execution. console.log requires us to explicitly mention the variables that we want to inspect and the complexity of doing that increases several folds in complex app development.
    image

  • This method also helps to identify logical errors by systematically stepping into code paths. One can also track how the value of a particular variable changes over time using Watch Expressions.
    image

Note: Feel free to Blackbox scripts other than your app’s. This keeps the call stack readable.

Note: This doesn’t mean one has to throw console logging out of the window. It has to be used for logging errors and information that aid troubleshooting in front-end apps. However, using it as a debugging alternative and leaving it as such for production apps alters its purpose & introduces potential security concerns.

Snippets

Sometimes you may want to try out a platform API or feature without touching your app code. In that case, snippets can be handy. By default, snippets have access to the page’s Javascript context and you can run them on any page from the DevTools.

Network Tab

While making use of Request methods, one can also monitor the request-responses via the Network tab. This also makes it easy to measure response times & figure-out payload parsing mistakes that happen.

References:
1.https://www.developers.freshworks.com/docs
2.Chrome DevTools  |  Chrome for Developers

4 Likes