This document provides an overview of Google Chrome DevTools for developers. It discusses how to open DevTools, the benefits of using it such as inspecting and editing HTML/CSS in real-time, debugging JavaScript, and measuring performance. Live demonstrations are provided of editing HTML/CSS, using the console to run JavaScript commands, debugging JavaScript code, and analyzing network performance. The document also briefly describes Thinkful's web development program which provides mentorship and career preparation.

1. Getting Started with Dev Tools
May 2017

2. About us
We train developers and data
scientists through 1-on-1
mentorship and career prep

3. About me
• Anna Mendoza
• Designer + Developer
• Work in Design + Digital
Services as a hybrid
• Co-Founder Curve Design
• Thinkful teacher FEWD + UX
+ Backend ( full stack! )

4. Thank you for joining us
HI EVERYBODY!
let’s talk about you first

5. What’s your programming background?
• Is this your first time writing code?
• Been self teaching for 1-3 months?
• Been at this for a couple of years?
• Been at this since you were a kid? ( secret ninja )
Let’s see a show of hands!

6. Key Topics
• HTML/CSS Live Editing
• Mobile & responsive testing
• Editing with “Sources”
• Using the console
• Javascript Debugging
• Network performance

7. Setup — Download Chrome
• Standard for developers (Google!)
• Simple & polished
• Mobile & Desktop
• Firefox & Safari are OK
• Avoid Internet Explorer!

8. What are DevTools?

9. How do I open DevTools?
• Go to a page in Chrome
• Right Click => Inspect
• Also — Cmd + Shift + I

10. What are the benefits?
• Inspect Document Object Model (DOM)
• Update HTML/CSS in real-time
• Test responsive and mobile friendliness
• Run Javascript in console
• Test & debug Javascript
• Measure & improve performance

11. Why live editing for HTML/CSS?

12. Typical Workflow
• This style (or code) isn’t working!
• Open HTML/CSS/Javascript
• Guess where the problem is
• Make change
• Save change
• Refresh page
• Did it work?

13. Workflow with DevTools
• This style (or code) isn’t working!
• Open DevTools (“Inspect”)
• Make change
• Did it work?

14. What am I looking at?
DOM Styles

15. Live Editing HTML
• Inspect element
• Expand/Collapse
• Edit HTML
• Add attributes
• Click & drag
• Delete

16. Challenge
• Change your name to a friend’s name
• Try and change picture (advanced)
• Take a picture of their page
• Send to friend & say you hacked their account

17. Live Editing CSS
• See computed CSS styles
• CSS for states
• Add CSS properties
• Modify CSS properties
• Remove CSS properties
• Links to CSS source files

18. Challenge
• Change background to your favorite color
• Add a fun border to the post button
• Delete Newsfeed (advanced)

19. Sources Features
• Prettify
• Persistent changes
• Local modifications
• Revert
• Save As

20. Mobile Demo
• Responsive sizes
• Device
• Frame
• Media queries
• Rotate

21. Console Features
• Interact with page in real-time using Javascript
• https://googlechrome.github.io/devtools-
samples/debug-js/get-started

22. Console Demo
• Basic JS commands
• Grab/manipulate element
• Quick scrape

23. Challenge
• Go to https://dream-walker.herokuapp.com/
• Change the title using Javascript in the console

24. Javascript Debugging is Pain

25. Debugging Features
• See where Javascript is failing
• Inspect variables
• Step through code slowly

26. Debugging Demo
• http://samplerdj.com
• Add breakpoint (+ step through)
• Inspect variables
• Pause on caught & uncaught exceptions

27. Load times are important!
• Yahoo: reducing page load by .4 seconds increased
traffic by 9%
• Google: increasing page load times from .4 to .9
seconds decreased traffic by 20%
• Amazon: every .1 second increase in load time
decreases sales by 1%

28. Network Features
• Test load times
• Throttle to different speeds
• See which files are cached or not
• See which files are causing slowdowns
• See file download sequence
• Google PageSpeed!

29. Network Challenge
• Go to https://dream-walker.herokuapp.com/
• What is page load time?
• What files are causing slowdowns?
• What do you recommend as a fix?

30. Advanced Topics
• CPU profiling
• Memory profiling

31. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime

32. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor

33. Our Mentors
Mentors have, on average, 10+ years of experience

34. Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Frontend “Frameworks” (React.js)
• Backend Development (Node.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep

35. Try us out!
Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
noel@thinkful.com)

36. October 2015
Questions?
Email Noel at noel@thinkful.com