Chrome DevTools

761 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
761
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chrome DevTools

  1. 1. 0
  2. 2. Chrome DevToolsby Juan Obando
  3. 3. Our staff
  4. 4. About me Juan Obando Software Engineer from Universidad del Valle
  5. 5. Experience PHP, Ruby MySQL, PostgreSQL Git HTML, CSS, JavaScript Server administration: Linux & Windows
  6. 6. Interests
  7. 7. AgendaBasic tips and tricks Using the Console API Network timeline Mobile emulation Terminal on DevTools
  8. 8. Basic tips and tricks
  9. 9. Use Chrome Canary!
  10. 10. Useful Settings Disable cache Log XMLHttpRequests Color format as authored Enable DevTools experiments:  #enable-devtools-experiments
  11. 11. Ctrl (⌘ for Mac) + Shift + C to inspect Drag and drop elements Force element state “Break on...” and breaking points
  12. 12. Using the Console API
  13. 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. 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. 15. Measuring how long something takes console.time("Measuring"); //yourcodehere console.timeEnd("Measuring");
  16. 16. Network timeline
  17. 17. Size/Content column Time/Lantency column Initiator column HAR format: HTTP Archive Format
  18. 18. Mobile emulation
  19. 19. Terminal on DevTools
  20. 20. 1. Install chrome extension 2. Install 3. Installdevtools-terminalpackage 4. Run devtools-terminaltool Devtools Terminal node.js npminstall-gdevtools-terminal
  21. 21. Questions?
  22. 22. Thank you!

×