In this post we cover best practices and tips for using Chrome DevTools, which will help you solve your web application development struggles more easily.
Have you ever had trouble with incorrectly executed JavaScript? Have you ever struggled with fine-tuning the CSS of the elements on your web page? Are you annoyed every time you test your web page on multiple different mobile devices?
If the answer to at least one of the questions is "yes," then this blog post is meant for you. Check out our best practices and tips which will help you to deal with these struggles and boost your performance.
Using the Chrome DevTools, you can easily modify the appearance and functionality of the Telerik UI for ASP.NET AJAX components, or other UI framework components like Kendo UI widgets, on the fly. Most of the tips and tricks are applicable to other browsers developer tools too, and will be presented with the help of the RadGrid in Telerik UI for ASP.NET AJAX.
Update: If you're looking for even more advanced tips and tricks, be sure to check out the second post in this series.
When you are using prepared controls and components, sometimes you need to know the structure of the generated HTML to get familiar with its rendering so you can fine-tune it to blend in your project. This can be done by inspecting the HTML using the Elements panel of Chrome DevTools.
There are a few possible approaches to check the rendering of a control:
Figure 1. Inspect generated DOM elements
When styling the page, sometimes you need to tweak the rules like padding, margin or color a little to get the perfect appearance. The side bar of the Elements panel has the Styles and Computed tabs, which allow you to dynamically change the applied styles to the selected element in the Elements panel, and even find the origin of the style rule. It also allows you to filter the styles, force different states (:hov
) such as hovered
, active
, focused
, add/remove classes easily (:cls
). This is also useful in scenarios where the layout or appearance of the control is broken to find out which style is breaking the design.
Figure 2. See the styles applied to the DOM elements
The computed tab gives you visual representation of the size of the element along the borders, margins and paddings:
Getting a reference to the client-side object of a control is a powerful technique and can save you precious time, because it can reveal all currently available properties and methods on the fly.
Let's try it out by following the steps below:
class="RadGrid"
).$find()
method. The result of the $find()
method will give us a reference to the control's client object.
Figure 3. Get an object reference of a RadGrid client-side object
The article, Get Client-side Reference to a Control Object, demonstrates different approaches which we can use directly in the browser console.
$telerik.$(".RadGrid")[0].control
returns the client object reference of the first RadGrid on the page. The $telerik.$(".RadGrid")[0]
part returns the element we were looking for in order to get its ID.The result of the $find()
method is a RadGrid and now when we have a reference to the control, we can see its API using the autocomplete suggestions. To see the "IntelliSense", you should simply assign the result to a variable.
console.table(objectReference,['index'])
in the console lists all available properties and methods. In Google Chrome, you can skip the console.
and simply use, table(objectReference,['index'])
.
Figure 4. Show the API of the Grid client-side object and view auto-complete suggestions
When your page, functionality or component does not behave as expected, these debugging skills can help you investigate and understand what is going wrong and fix it.
There are a few different approaches to activate a debugger in a JavaScript function:
debugger;
statement in the function's declaration. Unfortunately, it is not that easy with built-in functions of prepared components, because you don't always have access to the source code.debug(functionReference)
in the console. This is equal to adding a debugger;
statement on the first line of the function declaration.
Figure 5. Adding Line of Code breakpoints
Do you know the struggle of changing various devices to check how your page will be rendered on a mobile device? The Device Mode functionality of Chrome DevTools, referred to also as "Mobile Mode" in the blog post, allows you to test your site's responsive design across multiple screen sizes and resolutions, as well as to accurately simulate mobile device input for touch events, device orientation and geolocation. As a bonus, it also changes the User agent string as if the request is from a mobile browser.
The best part of using the Device Mode is that you can use Chrome DevTools, so you can apply all your debugging skills as if it is a desktop site. And you don't even need to plug a single device to your development machine.
To activate the Mobile Mode, you can press the Toggle Device Mode button . Keep in mind that when toggling between the modes, you might need to refresh the page to activate it properly.
Figure 6. Browser appearance in Device Mode
Sometimes you need to check the parameters of the request to the server, or see what the content and the format of the response is. You can do that in the Network panel:
Figure 7. Inspect Network requestsYou can imitate a slow connection, which is a very nice way to emulate a mobile connection, by changing the option in the "Online" dropdown in the network tab:
Chrome DevTools is a powerful addition to the developer's bag of tricks. In this article, we examined different productivity and debugging techniques, and best practices which will allow you to better understand how your web apps and components work. We've covered how to troubleshoot, inspect and debug them, and how to modify their look and appearance on the fly directly in the browser.
However, that's only a small part of our dev arsenal. What other tools and tricks do you use? It would be great to hear you share your secrets from your own repertoire in the comments section below.
For more, keep reading our next blog post in this series for additional tips and tricks from our internal development practices.
Peter (@p_milchev) is a Tech Support Engineer working with the AJAX, MVC and Kendo UI components and developer tools. Apart from providing support services, he also enjoys helping the developer teams with bug fixes and improvements for the UI controls. In his free time, he likes practicing martial arts, playing football and snowboarding.