This document discusses various tips and tricks for using Chrome DevTools. It covers using the console API to log messages, group output, and format strings. It also discusses the network timeline, mobile emulation features, and using a terminal directly in DevTools. The presentation provides an overview of basic DevTools functions and more advanced techniques for debugging websites and applications.

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!