In this talk called "Chrome Developer Tools: cool and useful features" I show some things most developers don't know that are possible to do and some other features that can't be very helpful while developing responsible web pages.

1. Chrome Developer Tools
Cool and useful features
Made by +MariaClaraSantana1
Alpha release

2. </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;

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

4. DOM Breakpoints

5. ● Subtree modifications;
● Attributes modifications;
● Node removal;

6. Console API

7. //accepts a lot of different methods
● console.assert(expression, object);
● console.count(label);
● console.dir(object);
● console.error(object [, object, ...]);

8. console.assert(expression, object);
var list = document.querySelector('#myList');console.assert(list.childNodes.length
< 10, "List item count is >= 10");

9. console.count(label);
function login(user) { console.count("Login called"); //
login() code...}

10. console.dir(object);
console.dir(document.body);

11. console.error(object [, object, ...]);
function connectToServer() { var errorCode = 1; if (errorCode) {
console.error("Error: %s (%i)", "Server is not responding", 500); }}
connectToServer();

12. Debugger Mode

13. Audits Panel

14. Before:

15. After:

16. Asynchronous Call Stacks

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

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

19. Device Mode

21. Learn more:
“Segredos do Chrome DevTools”
by Zeno Rocha
Available on: http://bit.ly/1Jxtg9j
Chrome DevTools Official Page
by Chrome Developers
Available on: http://bit.ly/1AReIZG

22. <contact-me>
</contact-me>
+MariaClaraSantana1;
@olarclara
claarasantana@gmail.com;

23. </thank-you>