Google
Raiting:
12

Tricks in Chrome DevTools


Let's move on to the most interesting - a selection of the most useful and interesting, in our opinion, tricks and hidden features of Chrome DevTools.
Layout
1. We inspect the animation
The animations in DevTools will allow you to slow down all the animations on the page or to move the "hands" animation.

image
2. Experiment with colors
When you experiment with colors, you can use the pipette to select any element on the page or select from the color palette that is already used on the page. Or choose one of the colors of the material design.

image
3. Editing any text on the page
Suppose you have a text block on the page and you want to know how it will look if the text in it changes. Switch the document to design mode! Type in the console document.designMode = 'on', similarly works document.body.contentEditable = true. After that you can edit all the elements with text content.

image
4. View rendered fonts
Sometimes it is very difficult to say which font was actually rendered. At the bottom of the Computed toolbar tab, you can see which font is used, even if its name is not in the font-family list.

image
5. Force pseudo-classes for elements
DevTools has a function that mimics the use of CSS pseudo-classes, such as: hover and: focus on elements, which simplifies their styling. It is available from the CSS editor.

image
6. Change the color format
Use Shift + Click on the color preview to change the format: rgb, hsl and hex.

image
7. Bezier curve editor for animation
You can easily change the time functions using DevTools (for example, the property value for animation-timing-function CSS properties).

image
Console features
1. Output an HTML element in the JS view of the
When reading HTML, the browser generates a DOM model. If you want to display an item as a JS object in the console, the easiest way to do this is to use the method console.dir ().

image
2. Grouping of messages
Sometimes it is useful to group logs to simplify the work with them and less clogging the console. To do this, there are methods console.group (), console.groupCollapsed () and console.groupEnd ().

function name(obj) {
console.group('name');
console.log('first: ', obj.first);
console.log('middle: ', obj.middle);
console.log('last: ', obj.last);
console.groupEnd();
}
name({"first":"Wile","middle":"E","last":"Coyote"});
image
3.1. Output of variable values ​​in the form of tables
Sometimes it is much more convenient and clearer to work with arrays or objects in the form of a table, and not as a standard hierarchical representation. To output data as a table, there is a console.table () method.

function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);
image
3.2 keys (object) and values ​​(object)
Keys () - Returns an array of object property names.
Values ​​() - returns an array containing the values ​​of all the properties of the specified object.

image
4. Logging code execution time
Imagine that you have two functions that do the same thing, but their implementation is different. How to understand which one works faster? You can use the methods console.time () and console.timeEnd ().

image
5. Profiling
In addition to measuring the time, you can profile your code and output a profiling stack, which shows in detail where and how much time the browser spent.

console.profile();
// Some code to execute
console.profileEnd();
image
6.1. $(selector)
If you are familiar with jQuery, you know about the possibility of constructions like $ ('. Class') and $ ('# id'). The developer console has similar functionality. Here, "$" does not have a relationship to jQuery, although it does, the same. This is a shortcut for the document.querySelector () function, returns a reference to the first DOM element with the specified CSS-selector. In this case, if jQuery is available in the document, its "$" will override the console functionality.
6.2. $$(selector)
Returns an array of elements that contain the specified selector. This command is equivalent to calling document.querySelectorAll () .

image
7. clear (), copy (object), and inspect (object / function)
Clear () - clear all records in the console.
Copy () - copy the string representation of the specified object to the clipboard.
Inspect () - opens and selects the specified item or object in the corresponding panel: Elements or Profiles.
Other
1. Advanced reset button
(Works only when DevTools is open and only in the Google Chrome browser!)
By long pressing on the button "Refresh page" (or right click) we open a special menu that gives us a choice:


Normal reboot (updates expired resources).
Hardware reboot (forced download of all resources of the site).
Clearing the cache and hardware reboot.

image
2. Formatting of minifitsources
The Chrome developer tools have a built-in "prider" of minimized source code to a readable view. The button is in the lower left corner of the currently open file in the Sources tab.

image
3. The shadow DOM
Elements such as input fields and buttons, browsers, create from other basic elements that are usually hidden. However, you can go to Settings -> General and enable Show user agent shadow DOM, to display these basic elements in the Elements tab. This will give you the opportunity to register them separately.

image
4. Filtering and searching
When working with DOM, CSS, the list of requests on the Network tab, etc. often we see before ourselves a large list of elements, selectors, properties, and so on, in which it is difficult to quickly find the value of interest to us. In such cases, do not forget about the use of filtering and searching which is present on all tabs. Thanks to the filtering, we will filter out all the options except those that match the conditions, and the search will allow you to quickly find what you need if you know the key "words" to search. Usually the search field is hidden and is called by the combination Ctrl + F.

image
5. Come to the Dark Side
Just because the dark side is steeper (:

But seriously, a dark theme will protect your eyes from unnecessary stress, if the main color of the page being developed or debugged is dark, as in my case. You can enable the DevTools settings page at the beginning.

image
Skull 12 october 2017, 15:04
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute