Directory of RSS feeds

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Pump skills debugging with Chrome developer tools (part 2)

Css-live - Severstal your world! 10.11.2018 at 13:45

Community that speaks the languages of HTML, CSS and JavaScript

Translation of the article Improve Your Skills Debugging with Chrome DevTools (Part 2) from the website for the author — Peter Milchev

In this article we will discuss the advanced features of the Chrome debugger, securing the skills learned in the first part.

You learned how to test the generated HTML and applied styles? Safely can debug JavaScript in the browser? I hope this series will look at advanced features of the Chrome debugger, securing the skills learned in the first part.

having Mastered new skills, we will experiment with basic examples of Kendo UI, and at the end of the article let's take a real example jQuery Grid to hone in on this newly acquired knowledge.

In this article: Smart auto-completion for Easy reference to the selected elements and calculated expressions View pop-up tips and elements that are automatically hidden Advanced debugging with the Chrome debugger, the execution Contexts in the Chrome debugger Example: jQuery Grid component of Kendo UI Smart autocompletion

Intelligent auto-completion — known function in the IDE that help to write more efficient code. In Chrome DevTools 68 developers have included similar functions in the console. Namely: proactive computing, after completion of function execution and prompts for arguments.

Let's examine these capabilities in the following functions:

function test(yourValue) {

return {

value: yourValue,

multiplied: yourValue * 3



write-Ahead computation

this is what will appear in the console of Chrome debugger enabled preemptive calculation:

Thus it is possible to evaluate expressions in your code in the console, if these expressions have no side effects (when run the code not only returns the value but doing something else). Read more about the side effects you can learn from the question "JavaScript closures and side effects in simple language?" on StackOverflow

tip: the same calculation happens when you open the tab "Source" (Source) in debug mode and aim at the expression or select it.

after Completion of execution of the function

This ability depends on the proactive computation, so it has the same limitation — autocompletion available if the function has any side effects.

tip: save the function result in a variable (see "auto-Completion IntelliSense for objects on the client side") and to check the result of execute the function in the console.

Then use the API console and save the expression in a variable like var lastEvaluatedExpression = $_;.

Prompts for arguments

This option provides a pop-up window displaying the appropriate arguments that can be passed when you write code to call the function in the console or open her brackets or hover on them with your mouse pointer.

Easy treatment to selected objects and performed expressions

In the previous section I explained that makes the $ _ variable. It's not magic, but part of the built-in API command line. The Chrome debugger assigns objects and expressions to a list of predefined variables. For example, evaluating the expression 40+2 will 42. And, let's say, I'm too lazy to remember what the name of the variable or what it was for the expression, and especially to wait 7.5 million years, while the computer calculates the answer. With the Chrome debugger now enough the $_variable.

API command line in the Chrome debugger saves the objects and the results of the expression predefined variables. The console also provides the following useful reduction: $0, $1, $2, $3 and $4. $0 refers to the last selected item in the panel "Elements", $1—, and so on. This can be useful when you need to get a reference to the DOM element that exposes the component or widget, and you need to test it available part.

Let's practice this on the example for the Kendo UI PanelBar, where we refer to the first element, hide it and then show again.

tip: the Chrome debugger can tell you how to optimize HTML and the DOM changes that occur in your application (see "Lightning fast list display in Angular")

Viewing tooltips and elements that are automatically hidden

to View a tooltip can be difficult because they disappear after some time. With other auto-hidden elements — such as those that appear in the interaction with the user (for example, click the mouse or drag and drop) — same story. In order to catch them, I often resorted to all sorts of tricks, coming up with terrible code that refer to them. Meet the setTimeout() and debugger.

setTimeout() needed to execute specific logic after a specified time. He also changes the order of execution of functions. This is useful when the function is executed after the quick animation (see "Why is setTimeout(fn, 0) sometimes useful?")

to Understand how it works setTimeout(), we can combine its power with the operator of the debugger, and then you can activate the debug mode when auto-hidden element visible, and not be afraid that he will disappear.

the animation below illustrates how you can view a tooltip by invoking setTimeout(function(){debugger; }, 3000) console:

the illustration above shows the drawing API and widget jQuery Tooltip from Kendo UI

tip: to display log items that are currently switched focus, paste the following code in the console: window.focusedelement; setInterval(function(){ if(window.focusedElement != document.activeElement){window.focusedElement = document.activeElement; console.log(document.activeElement)}})

To cancel the repeat interval to reload the page or use clearInterval():

Advanced debugging with the Chrome debugger

Let's look at other ways to interrupt the execution of the script on the page and check the current values of variables.

breakpoints on change of the DOM

They interrupt the script execution if the selected element in the DOM changes in the structure, attribute, or it is removed with JavaScript. To enable/disable this feature, right-click on item in the panel "Elements", point to "Stop" (Break) in the context menu and select "subtree modification" (subtree modifications), the "modification" attribute (attribute modifications) or "delete node" (node removal).

the point of stop for XHR/Fetch

They interrupt the script execution if the address of the requested resource contains a string, which is configured breakpoint. To enable/disable this possibility: expand the "breakpoints XHR" (XHR Breakpoints) in the "Source", click on "Add a breakpoint" (Add breakpoint), and type in the part of the URL.

the breakpoints to event handlers

They interrupt the execution of the script when triggered, mouse events, keyboard, device, animations, and so on. To enable/disable this possibility: expand the "breakpoints to event handlers" (Event Listeners Breakpoints) in the tab "Source" and check the desired categories (categories) of the event.

the breakpoint for exceptions

They interrupt the execution of a script that are thrown when handled or unhandled exceptions. To enable/disable: click "Pause when the exception" (Pause on Exception) in the tab "Sources"; when this button is enabled, there is an added option "Pause on handled exceptions" (Pause on caught exceptions).

When the breakpoint will be for you a routine, you will begin to put them a lot, and at some point it may be that most of placed points you miss. In this case, to continue execution of the script on the page can use one of the following:

Click on the "Continue" (Continue) to show the drop-down list, and select "Continue without interruption" (Continue without interruption). Press F12 to quickly close the Chrome debugger.

In the tab "Source" is worth mentioning a few areas.

Tab of the "to track" (Watch expressions): allows you to monitor the values of variables and expressions at different points in time. Section of call Stack (Call Stack) shows the execution path that caused the code to the breakpoint in reverse chronological order. Panel "Scope" (Scope): indicates which local and global variables are defined at the moment. The execution contexts in the debugger Chrome

have You ever encounter an error ReferenceError (saying function not defined) when you try to execute the already declared function in the browser console? You are not alone, it is often the case.

For example, such an error can be caught when the page with the script zagruzhatsya in , so is in a different execution context. In short, the execution context similar to a scope, and each page or browser extensions has its own execution context. Between different contexts can be switched using the drop-down list in the console:

some considerations about the execution context:

When you are viewing any element as the execution context is automatically selected from the page containing this element is to obtain the logs of all contexts in the console, uncheck "Only selected context" (Selected context only) in your console settings. On the right side there is a link to the file that performed the function that is responsible for the entry in the log.

These contexts are clearly visible in the "sandbox" on Kendo UI, we now get the treatment the above tips.

Example: jQuery Grid component of Kendo UI

Well, you were only waiting for this until I read it, yeah? Here's an example task, which will involve most of our svezhepoymannyh skills

Task: use JavaScript to change the background of a floating element created when you drag a header in this example from the sandbox based on the demo jQuery Grid component of Kendo UI.

Try to do it yourself, but if that fails, use the following tips:

you Need to change the context to the example: the execution Contexts in the Chrome debugger In the right context stop executing the script on the page after the appearance of the item: Viewing tooltips and elements that are automatically hidden View of a floating element: viewing the generated HTML-code element, the Access element in the console: Easy to handle to the selected elements and calculated expressions Use the functionality of auto-completion to find the right style properties of the item: Smart autocompletion

At this point you should be already on "you" with the debugger in Chrome is no magic CLI, automatically hiding elements or complex debug scenarios I can't stop you. We had mastered it all and has overcome the dark side. Joking aside, I hope that this article has been helpful and has answered at least one difficult question — just let me know. What about your tips and techniques? Please share them (because you care) in the comments below.