This course is a simple introduction to the Google Chrome Developer Tools. In this course we'll cover the basics of devtools which are absolutely essential to productive web development.
And pssst... The course has a humourous twist--your instructor will teach you about amazing colors like blanchedalmond and cornflowerblue!
When you're finished you'll be able to:
This is a free course meant to cover the absolute basics. After completing this, you'll have to tools and knowhow to become a DevTools wizard with my followup class, DevTools 2017: Beginner to Expert with Google Chrome Developer tools.
An introduction to the types of things we'll learn in the class, and also five things about me, your instructor!
Tweak HTML tags and styling with the elements panel.
An exercise to get you more familiar with the Elements Panel.
Run through each of the tabs in DevTools and understand the basics about what each of them does.
A few questions after your tour of the devtools about where certain items exist.
Learn the basics of adding breakpoints to stop and step through your code. Also known as debugging!
A few questions about basic breakpoints and debugging
Learn how to test out larger chunks of code in the snippets panel.
Inspect and modify cookies and localstorage using the application tab.
A look at the network calls from the yelp reservation page.
Understand how to review page load issue with the Audits panel. And a note about the IRS.
A quick dive into the more advanced panels in devtools: Performance / Timeline, Memory, and Security.
A look at the keyboard shortcuts that I find most useful for navigating around in Chrome Devtools.
A lecture from my followup course that takes a deeper dive into how to use the different styling tools available in DevTools.
Where to go for other documentation, and a preview of my complete course: DevTools 2017 Beginner To Expert w/ Google Chrome Developer Tools. Code: TENBUCKS
Rocco is founder of Simmer Industries, a place for developers to share their WebGL content. WebGL is an open standard on the web that enables 3D graphics in the web browser.
Previously, Rocco was a Senior Developer at TINT where he focussed on frontend development and user experience. He has 15+ years of development experience and has shipped dozens commercial video games and web applications over his career.
He taught Computer Science II and was a teacher's assistant for Java Enterprise Programming at Rensselaer Polytechnic Institute, and occasionally speaks at industry events such as ForwardJS, HTMLDevConf and Unity Unite.
He's a volunteer mentor at MissionBit in San Francisco where he teaches public high school students how to begin web programming.
When he's not writing code or teaching, he enjoys skiing, bike riding and traveling.