When styling the page, sometimes you need to tweak the rules like padding, margin or color a little to get the perfect appearance. You can modify the DOM hierarchy by selecting an element in the Elements panel and then dragging it to the desired location.You can edit the HTML and the HTML attributes of an element on the fly by double-clicking an element's attribute in the Elements panel or right-clicking the element and choosing " Add attribute", " Edit attribute" or " Edit as HTML" option from the context menu.Right-click on an element logged in the console and choose " Reveal in Elements panel.".Click the Inspect Element button ( Ctrl+ Shift+ C) on the top left corner of Chrome DevTools and hover over the control.That will open Chrome DevTools and highlight the element that you clicked on.
Right-click an element and select the Inspect Element from the context menu.There are a few possible approaches to check the rendering of a control: This can be done by inspecting the HTML using the Elements panel of Chrome DevTools. 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. Update: If you're looking for even more advanced tips and tricks, be sure to check out the second post in this series. Get IntelliSense for the Client-Side Object.Get the Client-Side Reference of a Control.Inspect the Generated HTML of a Control.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. 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. Check out our best practices and tips which will help you to deal with these struggles and boost your performance. If the answer to at least one of the questions is "yes," then this blog post is meant for you. 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? 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.