An introductory presentation on chrome developer tools. It explores useful tools for fast iterations, debugging and profiling of web apps and mobile websites

1. Chrome
DevTools
Iterate, Debug, Profile

2. Tomiwa Ijaware
This page was intentionally left
blank...
Software Engineer

3. The Chrome DevTools are a
set of web authoring tools
built into chrome.
https://developers.google.com/web/tools/chrome-devtools

4. Ctrl/Cmd + Shift + i
Or right click and select inspect element

6. The Panels - aka tools
● Elements
● Sources
● Network
● Timeline
● Profiles
● Resources
● Device mode
● Remote Debugging
● Settings

7. Quick walk through

8. Iterate
Real time iterations
Test and tweak your site design and
content iteratively

9. Inspect and Edit
Page styles

10. Manage your
local Data
Resources

11. Simulate Mobile
Devices

12. Debug Find and fix errors in your code

13. Remote
Debugging

14. Using JavaScript
Snippets

15. Breakpoints and
the Console

16. Cool Tricks to gain an extra 2s

17. Aggregated
Timeline

18. Color
Palettes

19. Dedicated
Menu

20. Chrome
Dev Editor
Bonus :)

21. Questions
????