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.
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
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-coveragebefore debugging.
For example, the same code with
debugger statements placed at the right points look like the following
The use of
debuggerhas the same effect as setting a breakpoint in code. We get to see the value of all variables at that point of execution.
console.logrequires us to explicitly mention the variables that we want to inspect and the complexity of doing that increases several folds in complex app development.
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
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 loggingout 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.
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.