Intro to some basic and advance tricks for awesome Chrome DevTools

1. Chrome
DevToolsby Juan Obando
0

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

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

4. Interests

5. https://github.com/juanchopx2/chrome-devtools-slides.git

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

7. Basic tips and
tricks

8. Use Chrome Canary!

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

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

11. Using the
Console API

12. 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();

13. 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);

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

15. Network timeline

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

17. Mobile emulation

18. Terminal on
DevTools

19. 1. Install chrome extension
2. Install
3. Install devtools-terminal package
4. Run devtools-terminal tool
Devtools Terminal
node.js
npminstall-gdevtools-terminal

20. Questions?

21. Thank you!