, , Chrome DevTools.
.
1. .
DevTools .
2.
,
, , . material design.
3.
, , . ! document.designMode = 'on', document.body.contentEditable = true. .
4.
, . Computed , , font-family.
5.
DevTools , CSS, :hover :focus , . CSS.
6.
Shift + , : rgb, hsl hex.
7. .
DevTools (, animation-timing-function CSS ).
.
1. HTML JS
HTML, DOM-. JS ,
console.dir().
2.
.
console.group(), console.groupCollapsed() 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"});
3.1.
, .
console.table().
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);
3.2 keys(object) values(object)
Keys() .
Values() , .
4.
, . ?
console.time() console.timeEnd().
5.
, , .
console.profile();
// Some code to execute
console.profileEnd();
6.1. $(selector)
jQuery, $(.class) $(#id). . $ jQuery , , .
document.querySelector(), DOM CSS-. , jQuery, $ .
6.2. $$(selector)
, .
document.querySelectorAll().
7. clear(), copy(object) inspect(object/function)
Clear() .
Copy() .
Inspect() : Elements Profiles.
.
1.
( DevTools Google Chrome!)
( ) , :
2.
Chrome . Sources.
3. shadow DOM
, , . , Settings -> General Show user agent shadow DOM, Elements. .
4.
DOM, CSS, Network .. , , , . . , , . Ctrl + F.
5. Come to the Dark Side
(:
, , , . DevTools.
:
developers.google.com/web/tools/chrome-devtools
habrahabr.ru
SSul
10:03
