Продвинутая отладка javascript с помощью chrome dev tools
DESCRIPTION
Игорь Залуцкий «Продвинутая отладка JavaScript с помощью Chrome Dev Tools» Frontend Dev Conf'14 www.fdconf.byTRANSCRIPT
![Page 1: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/1.jpg)
Debugging JS with Chrome>The little power tools
by Igor Zalutsky
![Page 2: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/2.jpg)
Console API: the basicsvar obj = {
prop: 1, child: { prop: 2 }
};
console.log(obj);
console.log('%O\n%o', document.body, document.body);
console.warn('something unexpected happened');
console.error('something went wrong');
console.assert("str" instanceof String, 'gotcha!');
![Page 3: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/3.jpg)
Console API: time() and count()
function fibonacci(n) { return (n > 1) ? fibonacci(n - 2) + fibonacci(n - 1) : n;
}
console.time('fibonacci');
console.log(fibonacci(30));
console.timeEnd('fibonacci');
document.addEventListener('keydown', function(event) {
console.count(String.fromCharCode(event.keyCode));
});
![Page 4: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/4.jpg)
Console from the inside
console.dir(console);
?
![Page 5: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/5.jpg)
Console API: table()
var people = [ {
name: 'Hopper', surname: 'Herring'
}, {
name: 'Sampson', surname: 'Douglas'
}, {
name: 'Carmella', surname: 'Vincent'
}
];
console.table(people);
console.table(
document.querySelectorAll('a'),
['href', 'text']
);
![Page 6: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/6.jpg)
Console API: other methods
clear() remove all previous output
debug(), info() aliases for log()
group(), groupEnd() grouped output
profile(), profileEnd() last evaluated expression
timeStamp() marking the timeline
trace() stack trace
![Page 7: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/7.jpg)
Digging out Command Line API
(function() { debugger;
})();
var members = Object.keys(__commandLineAPI) .filter(function(key) {
return ! (key in console);
}).reduce(function(obj, key) {
obj[key] = __commandLineAPI[key];
return obj;
}, {});
console.dir(members);
![Page 8: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/8.jpg)
Command Line API: overview
![Page 9: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/9.jpg)
Command Line API: shortcuts
$(selector) document.querySelector()
$$(selector) document.querySelectorAll()
$_ last evaluated expression
$0 - $4 last 5 inspected DOM nodes or heap entries
$x(path) XPath query
![Page 10: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/10.jpg)
Command Line API: monitoring events
![Page 11: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/11.jpg)
Command Line API: hidden hooks
![Page 12: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/12.jpg)
Command Line API: other methods
copy(object) copies string representation to clipboard
inspect(object) shows object in DOM inspector or profiler
getEventListeners(object) returns hash of arrays of listeners
profile(), profileEnd() last evaluated expression
keys(object) same as Object.keys(object)
values(object) returns array of object’s values
![Page 13: Продвинутая отладка JavaScript с помощью Chrome Dev Tools](https://reader031.vdocuments.site/reader031/viewer/2022020713/5558391dd8b42acb078b4a66/html5/thumbnails/13.jpg)
The end Useful links
Google Chrome Console API docsGoogle Chrome Command Line API docs“Lesser-Known JavaScript Debugging Techniques” by Amjad Masad“Advanced JavaScript Debugging with console.table()” by Marius Schulz
Follow me!@igorzij
github.com/zijlinkedin.com/in/izalutsky