Chrome DevTools
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Chrome DevTools

  • 342 views
Uploaded on

Basic tips and tricks ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
342
On Slideshare
326
From Embeds
16
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 16

http://inqbation.com 14
http://www.slideee.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!