In this article, I have outlined a few tips on client-side debugging that you may not know about and could be a game changer in your developer career!
The browsers’ Developer Tools provide various information the developers can use to analyze and troubleshoot web applications. That includes inspecting the rendered HTML; viewing informational or error logs; and examining network-related information such as types of connections and their status, loaded resources and more. Today most browsers have the DevTools embedded.
Depending on the information you would like to review, the DevTools have them grouped in different tabs:
The DevTools contain many more tools you could use to troubleshoot your website and monitor its performance/health. However, in this article I will mainly focus on the Console and teach you some tricks to debug applications on client-side.
One of the many benefits of an IDE application is the IntelliSense (code completion) functionality that we depend on every day. It helps us avoid making mistakes in typing/character casing of variables or functions. The best part of it is that we can see methods/properties available in a certain class or object.
Today, the browsers’ DevTools can make this happen. How cool is that?
Ever wonder why nothing happens upon interacting with the controls on the Page? Open the DevTools and monitor the Console Tab to find out whether the app is generating an error.
Similarly to .NET Framework’s Debug.WriteLine(), the DevTools Console also has its own function to print information, the console.log() method. It is commonly used to print out variables and results returned by functions, and also handle exceptions silently without crashing the entire application.
Many developers, including us, are working with elements every day, trying to find ways to manipulate the HTML DOM and bend it to our needs. By using the Console, we can easily determine which of our methods will succeed before even writing the code in the production.
Here&srquo;s an example for visually manipulating HTML elements. Although this is just a temporary change, the code, if proven to be working, can be added to the page and executed each time it is necessary.
Working with Telerik RadGrid isn’t more complicated. With its rich Client-Side APIs, you can have significant control over it.
For more information check out the Get Client-side Reference to a Control Object documentation article.
Here is an example of getting a reference to RadGrid using a few common approaches:
Once you have reference to the Grid, you can start using the Object properties and methods to manipulate it.
Here is an example of changing the Current Page Index using the set_currentPageIndex() method.
Let’s imagine you were to understand what happens with the Grid upon clicking on the Sort button, expand, filter, etc. You could simply attach the OnCommand client-side event to the Grid, and use the debugger statement.
The execution of the function will stop exactly at the “debugger” statement, and you will be able to inspect the arguments that are supplied to this function. Use the Console tab and inspect the arguments.
You can’t escape bugs no matter how fast you run, so picking a debugging technique that works best for you is vital. In this article, I have covered a few client-side debugging tips and tools, which, when combined, can make your life easier and help you improve your development workflow.
If you’re interested to learn more, I would recommend checking out these useful resources:
What’s your preferred debugging technique? If you’d like more advanced debugging tips and tricks, share your feedback, requests and ideas in the comments section below.
Attila is a Senior Technical Support Engineer at Progress working with the Telerik AJAX, MVC and Kendo UI components. Prior to Progress, he worked as a Technical Trainer. Driven by his passion for technologies, he has experience with multiple scripting languages, but his main focus is on web development. In his free time he loves to hike, travel and do sport activities.
Subscribe to be the first to get our expert-written articles and tutorials for developers!