RSS feeds in the directory: 374
Added today: 0
Added yesterday: 0
Translation of the article Improve Your Skills Debugging with Chrome DevTools from the site telerik.com for css-live.ru the author — Peter Milchev
In this article, we discuss useful tricks and tips for using the debugger in Chrome that will help to deal with any hiccups in the development of web applications.
If you answered "Yes" to even one question, then this article is for you. Here are our useful tricks and tips that will help you all to overcome this and increase your productivity.
With the debugger in Chrome it's easy on the fly to change the appearance and functionality of AJAX components Telerik UI for ASP.NET components or other UI frameworks like Kendo UI widgets. Most of the tips and techniques suited to other browser debuggers, and we will consider them on the example component library RadGrid from Telerik UI for ASP.NET AJAX.
Update: if you are looking for more advanced tips and tricks, be sure to read the second article of this series.
Viewing the generated HTML-code element
Sometimes when you are using prefabricated elements and components need to know the structure of the generated HTML to understand the device and with minimal editing to fit it perfectly to your project. This can be done by looking at the HTML in the panel "Elements" in Chrome debugger.
to See the element structure in several ways:
Click the right mouse button on the element and select from context menu "Inspect element" (Inspect Element). Open the Chrome debugger, where is highlighted the selected item. Click on "Inspect element" (Ctrl+Shift+C) with a check icon in the upper left corner of the Chrome debugger and hover the mouse on the element. Click the right mouse button on an item displayed in the console, and choose "Show in Toolbox" (Reveal in Elements panel).
figure 1. To check the generated DOM elements
Small tweaks on the fly Can edit the HTML and HTML attributes double click on an attribute element in the "Elements" (Elements) or right-click the mouse on the element, selecting from a context menu item "Add attribute" (Add attribute), "Edit attribute" (Edit attribute) or "Edit as HTML" (Edit as HTML). You can change the hierarchy of the DOM by selecting the element in the "Elements" and then dragging it to the right place. Viewing of the applied styles
Sometimes, to get the flawless look of the page, sometimes I just need to adjust CSS rules like indenting or color. In the "Elements" side is the tab "Styles" (Styles) and "Calculated" (Computed) allows you to dynamically change the styles applied to the selected element in the panel "Elements", and even to find the source of the style rules. This also makes it easy to filter the styles, add/remove classes (tab ":cls"), to enforce condition (tab ":hov"), for example, hover, active state and focus state. Still this is useful if you want to understand which styles messed up the layout, look and design in General.
figure 2. See what styles are applied to DOM elements
Small tweaks Can use the keyboard arrows to increase/decrease numeric values. Can use the "eyedropper" when setting color values in some properties.
Tab with the calculated values provides a visual representation of the element size for boundaries, outer and inner margins.
a Reference to the control on the client side
get a reference to your component in the browser — a powerful tool that helps you to save a lot of time identifying all the currently available properties and methods on the fly.
Try to do this:
Check the output HTML code of the component based on previously acquired experience, obtained when validating the generated HTML component RadGrid Get value of ID attribute of the element whose class is named after the component (i.e. class="RadGrid") Use the resulting ID value as a parameter to the method $find(). The $find() will return a reference to a component object on the client.
figure 3. The object reference of the component RadGrid
In the article "object Reference to the control on the client side" shows the different approaches that you can use directly in browser console.
Small tweaks $telerik.$(".RadGrid").control returns a reference to the client object's first component RadGrid on the page. $Telerik.$(".RadGrid") returns the element that we were looking for to get its ID. Autocompletion / IntelliSense for objects on the client side
the result of the method $find() will be the object of RadGrid, and now, having reference to the component, you can see its API using hint completion. To see "IntelliSense", you just need to assign the result to a variable.
the Little tricks of ↑ and ↓ in the console show the previous/next command Ctrl+Space opens a menu with tips console.table(objectReference,['index']) in the console lists all available properties and methods. In Google Chrome you can not write console., and just use table(objectReference,['index']).
figure 4. Show Api component object Grid and see the prompt auto-completion
When the behavior of a page, function or feature seems strange, these skills debugging help to study and understand what went wrong and fix it.
There are several different approaches for activating the debugger from [removed]
to Add the statement debugger; in the function Declaration. Unfortunately, this is more complicated with built-in features ready-made components, because they do not always have access to the source code. Call debug(silcenafil) in the console. This is equivalent to adding the statement debugger; in the first line of the function Declaration. Add a breakpoint on the row number, which offers the Chrome debugger. For this, you can go to the code in the "Sources" (Sources) and click on the line number. Mouse left click will add a breakpoint and right will allow you to set a breakpoint conditionally (only works if the expression will be set to true). A breakpoint condition is very useful for debugging loops.
figure 5. Add a breakpoint at line number
the Emulation display on the mobile device
have you suffering with too much of different devices for testing display your page on a mobile device? The functionality of the "Mode of device" (Device Mode, aka the "Mobile mode") allows you to test responsive design website on different sizes and screen resolutions and also to accurately simulate the input of a mobile device to touch events, device orientation and geolocation. In addition it still changes the string "User-agent", simulating a query from a mobile browser.
the point here is that all this can be easily done in Chrome debugger, so use the skills of debugging, as to the site on the computer. And no devices connected to the computer is not required.
to activate the mobile mode, you can press the button "Incl./off. mode devices". Note that when switching between modes, you may need to refresh the page.
Figure 6. Browser mode devices
Small tweaks You can choose which side to pin the developer tools when emulating a mobile device in portrait mode to the right or left. In the drop-down list on the emulator there is a ready set of popular devices which can be used to simulate different sizes of mobile screens. Viewing network requests
Sometimes you need to check the request parameters to the server, or see what and in which format comes the answer. For this use the Network panel (Network).
figure 7. Viewing network requests
Small tweaks Enable logging of XHR requests in the console. This XHR request in console will become more noticeable, and by right-clicking the mouse on the result you can immediately switch to this request on the panel "Network". Note: do not click "Hide network" (Hide network), Select the check box "Disable cache" (Disable the cache). Now files with queries will not be cached, which will save you from problems and save time if done on the server, the changes will not apply on the client. Another way of clearing the cache — refresh the page with Ctrl+F5 instead of F5.
you Can simulate a slow connection that emulates the good work of the mobile Internet, selecting a different item in the drop-down list of "Online" (Online) in tab "Network".
Debugger Chrome is another powerful tool in the Arsenal of the developer. In this article, we met with a lot of useful debugging techniques that will increase your productivity and allow you to better understand the behavior of your web applications and components. We have learned to see them to debug and troubleshoot, as well as change their appearance on the fly right in the browser.
However, this is only a small part of the Arsenal of the developer. What tools and techniques do you use? It would be great if you share secrets from their own repertoire in the comments below.
Read our next article in this series to learn even more tricks and techniques of our own development practices.
Why don't we add in a HTML element ? 11.10.2018 at 12:56
"The dispute over empty space" and the change in selectors level 4 04.10.2018 at 10:40
The first (and strange) the public draft of CSS module scrollbar 28.09.2018 at 13:39
Why semantic HTML is important, and how TypeScript helps to understand it 24.09.2018 at 10:15
Nobody knows the CSS: specificity — not cascade 13.09.2018 at 13:02
New candidates the W3C: CSS Display and CSS Cascading 3 and 4 28.08.2018 at 14:03
Solved with CSS! Logical pastiche based on the number of elements 25.08.2018 at 09:44
The first public draft of module quantities and units CSS level 4 15.08.2018 at 15:51