Do you want to become an expert web developer?
I've worked with tons of different platforms from PC to Playstation, and nothing beats the power of Google Chrome Developer Tools. Let's take advantage of that.
This course is the comprehensive guide to DevTools. We start with simple styling examples, and use tools like the colorpicker and box shadow editor to design our pages. But we move quickly to advanced topics like using the Audits panel to understand slow page performance, and the memory panel to understand why our app might be leaking memory.
Here's a sample of what you'll be able to achieve after taking this class:
Every minute of this course provides valuable information and there is minimal repetition and typing. The course was built in 2017 with a prerelease version of Chrome and even demonstrates the use of experimental features such as Workspaces 2.0.
For the beginners, I start slow, but work quickly towards advanced usage, and for the experts, I've made sure to sprinkle in original techniques to improve your web pages that can't be found anywhere else.
An introduction to why Chrome Devtools are so important, and the different topics that we'll cover in the class.
Learn the three ways to open Chrome Developer Tools, and get an introduction to your instructor.
A brief overview of:
Use the inspector to preview live styling changes on a webapp called TodoMVC.
Get before and after snapshots of your page edits. Understand where your changes were made on the page with the Meld diff tool.
Download a webapp, and run it on a simple server using python, with specific instructions for Mac.
Get the tools to run a BASH terminal with Python support on windows and start a simple static server.
Copy changes from the inspector to your hosted webpage.
Learn how to find and enable experimental Devtools features, and use Workspaces with persistence 2.0 to automatically save code to your hard drive from Devtools.
Use the color picker, shadow editors and transition editor.
Use the animations editor to modify animation timing, and use the cssanimate tool to develop keyframe CSS animations.
Stop code with breakpoints in the debugger, and step through that code to understand how it works.
Learn the important keyboard shortcuts for debugging and fix some problems with Mac shortcuts.
Understand the call stack and use the async button to debug event driven code.
Use keyboard shortcuts to jump around in your code and in the devtools panels.
Use multiline console statements, and understand where to find info about the Console API.
Learn various console functions like dir, dirxml, group, warn and time.
Add styling and images to your console messages!
Review of how to stop your code with line-of-code breakpoints and the debugger statement.
Stop your code only when a certain condition is met.
Stop your code when the DOM changes or when an AJAX / XHR request is made.
Stop code when an event occurs or an error is thrown.
Download content from Codepen to run it locally.
Use the network panel to understand real-world network requests, and hack the calls made to a live API.
Understand where to find problems with page load and an intro to Lighthouse for advanced performance checking.
Learn how to look at HTTPS issues with devtools, and a solution for delivering your own development HTTPS server.
Introduce an example which shows CPU, memory and rendering slowness.
Use the Task Manager, frames per second meter, and rendering tab to detect memory and performance problems on your site.
A real world memory leak and how to diagnose similar problems with the memory tab.
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.