Directory of RSS feeds
Statistics

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Pump skills debugging with Chrome developer tools (part 1)

Css-live - Severstal your world! 21.10.2018 at 12:54

Community that speaks the languages of HTML, CSS and JavaScript

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.

did you Ever have trouble with the wrong JavaScript performance? If you've ever had to fight to fit the styles of the elements on the page? Do you hate when the page every time you need to test on different devices?

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.

In this article: viewing the generated HTML source code View the styles that are applied the Reference to a control on the client side Autocompletion IntelliSense for objects on the client side JavaScript Debugging Emulation display on the mobile device Viewing network requests

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")[0].control returns a reference to the client object's first component RadGrid on the page. $Telerik.$(".RadGrid")[0] 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

JavaScript Debugging

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

Small tweaks JavaScript Error logged in the console. To catch such errors is always a good solution as it can degrade the performance of the page, and then to smash the interaction or functionality of the application. To see in the "Source" file with the function and highlight the line with her announcement, we can derive a function in the console and click on it with the left mouse button. The same thing happens when you click the right mouse button on the displayed function and select "Show function definition" (Show function definition) from the context menu. Use the hotkey F8 (resume), F10 (step over) and F11 (login) when debugging. Just right click the line of code and select "Continue to here" (Continue to here) — it's like that to insert a breakpoint, resume debugging and immediately delete the breakpoint when it resolves, Click the right mouse button on the expression or selected text to open a context menu with the items "Calculate console" (Evaluate in console) and "Add the selected text to the tracked object" (Add selected text to watch). Click {} to format code in the source file.

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".

Conclusion

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.