Basic tips and tricks Using the Console API Network timeline Mobile emulation Terminal on DevTools

1. 0

2. Chrome
DevToolsby Juan Obando

3. Our staff

4. About me
Juan Obando
Software Engineer
from Universidad
del Valle

5. Experience
PHP, Ruby
MySQL, PostgreSQL
Git
HTML, CSS, JavaScript
Server administration: Linux &
Windows

6. Interests

7. AgendaBasic tips and tricks
Using the Console API
Network timeline
Mobile emulation
Terminal on DevTools

8. Basic tips and
tricks

9. Use Chrome Canary!

10. Useful Settings
Disable cache
Log XMLHttpRequests
Color format as authored
Enable DevTools experiments:
#enable-devtools-experiments

11. Ctrl (⌘ for Mac) + Shift + C to inspect
Drag and drop elements
Force element state
“Break on...” and breaking points

12. Using the
Console API

13. Writing to the console
console.log("Nothingnewsofar!:@");
Warning and Errors
console.warn("Thismightbenew!");
console.error("andmaybe,thisonetoo");
Grouping output
console.group("Justremindingsometipsaboutconsole");
console.log("Nothingnewsofar!:@");
console.warn("Thismightbenew!");
console.error("andmaybe,thisonetoo");
console.groupEnd();

14. String substitution and formatting
console.log("%s%ioftimes!","Nothingnew!Haveseenthis",1000);
Styling console output with CSS
console.log("%cStylishoutput","color:#ff0000;font-size:16px;");
Listing all element properties
console.dir(document.body);

15. Measuring how long something takes
console.time("Measuring");
//yourcodehere
console.timeEnd("Measuring");

16. Network timeline

17. Size/Content column
Time/Lantency column
Initiator column
HAR format: HTTP Archive Format

18. Mobile emulation

19. Terminal on
DevTools

20. 1. Install chrome extension
2. Install
3. Installdevtools-terminalpackage
4. Run devtools-terminaltool
Devtools Terminal
node.js
npminstall-gdevtools-terminal

21. Questions?

22. Thank you!