Getting Started with Dev Tools

March 2017

http://bit.ly/tf-dev-tools

About me

• Jasjit Singh

• Self-taught developer

• Worked in finance & tech

• Co-Founder Hotspot

• Thinkful General Manager

About us

Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs

About you

• A lot of experience

• A little experience

• No experience

Key Topics

• HTML/CSS Live Editing

• Mobile & responsive testing

• Editing with “Sources”

• Using the console

• Javascript Debugging

• Network performance

Setup — Download Chrome

• Standard for developers (Google!)

• Simple & polished

• Mobile & Desktop

• Firefox & Safari are OK

• Avoid Internet Explorer!

What are DevTools?

How do I open DevTools?

• Go to a page in Chrome

• Right Click => Inspect

• Also — Cmd + Shift + I

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

Why live editing for HTML/CSS?

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?

Workflow with DevTools

• This style (or code) isn’t working!

• Open DevTools (“Inspect”)

• Make change

• Did it work?

What am I looking at?

DOM Styles

Live Editing HTML

• Inspect element

• Expand/Collapse

• Edit HTML

• Add attributes

• Click & drag

• Delete

Challenge

• Go to facebook.com

• Change your name to a friend’s name

• Try and change picture

Live Editing CSS

• See computed CSS styles

• CSS for states

• Add CSS properties

• Modify CSS properties

• Remove CSS properties

• Links to CSS source files

Challenge

• Change background to your favorite color

• Add a fun border to the post button

• Delete Newsfeed (advanced)

Sources Features

• Prettify

• Persistent changes

• Local modifications

• Revert

• Save As

Mobile Demo

• Responsive sizes

• Device

• Frame

• Media queries

• Rotate

Console Features

• Interact with page in real-time using Javascript

Console Demo

• Basic JS commands

• Grab/manipulate element

• Quick scrape

Challenge

• Go to https://dream-walker.herokuapp.com/

• Change the title using Javascript in the console

Javascript Debugging is Pain

Debugging Features

• See where Javascript is failing

• Inspect variables

• Step through code slowly

Debugging Demo

• http://samplerdj.com

• Add breakpoint (+ step through)

• Inspect variables

• Pause on caught & uncaught exceptions

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%

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!

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?

Advanced Topics

• CPU profiling

• Memory profiling

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

•We only make money when you get a job

Our Program

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

Our Mentors

Mentors have, on average, 10+ years of experience

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

October 2015

Questions? jas@thinkful.com

schedule a call through thinkful.com