Chrome Developer ToolsCool and useful features

Made by +MariaClaraSantana1Alpha release

</about-me>

<about-me>

Maria Clara Santana● Computer Engineering student at UFAL;● FrontEnd Developer at Clip;● GDG Maceió co-organizer;● Material Design and Polymer lover;

Agenda

DOM Breakpoints;Console API;Audits Panel;Asynchronous Call Stacks;Device Mode;

DOM Breakpoints

● Subtree modifications;● Attributes modifications;● Node removal;

Console API

//accepts a lot of different methods

● console.assert(expression, object);● console.count(label);● console.dir(object);● console.error(object [, object, ...]);

console.assert(expression, object);

var list = document.querySelector('#myList');console.assert(list.childNodes.length

< 10, "List item count is >= 10");

console.count(label);

function login(user) { console.count("Login called"); //

login() code...}

console.dir(object);

console.dir(document.body);

console.error(object [, object, ...]);

function connectToServer() { var errorCode = 1; if (errorCode) {

console.error("Error: %s (%i)", "Server is not responding", 500); }}

connectToServer();

Debugger Mode

Audits Panel

Before:

After:

Asynchronous Call Stacks

(Source: http://bit.ly/1fKG4wT)

(Source: http://bit.ly/1fKG4wT)

Device Mode

Learn more:

“Segredos do Chrome DevTools”by Zeno Rocha

Available on: http://bit.ly/1Jxtg9j

Chrome DevTools Official Pageby Chrome Developers

Available on: http://bit.ly/1AReIZG

<contact-me>

</contact-me>

+MariaClaraSantana1;@olarclaraclaarasantana@gmail.com;

</thank-you>