A Tour of the Developer Tools
  • Introduction and Syllabus
  • Three ways to open Chrome Developer Tools
  • Console Commands and Multiline Statements
  • Sources, Network, and Other Panels
  • Inspect and Style a Page Live
  • How to View Your Changes
Setting Up a Local Server
  • Static Python SimpleServer
  • Windows Server Setup
Snippets & Alternate Ways to Understand Your Changes
  • Introducing Snippets
  • Applying Changes
  • CSS History
  • Experimental Chrome Features & Workspaces
GUI Style Editors
  • The Various Style Editors
  • Animations Editor
Basic Javascript Debugging
  • Using the Debugger in the Sources Panel
  • Keyboard Shortcuts for Debugging
  • The Call Stack
Navigating & Applications Tab
  • Finding Stuff
  • Cookies and Local Storage with the Application Tab
Console API & Shortcuts
  • Console Multiline and Asserts
  • Miscellaneous Console Functions
  • Console Profile & Dollar Shortcuts
  • Console Styling
Breakpoints
  • Types of Breakpoints
  • Line of Code Breakpoints
  • Conditional Breakpoints
  • DOM and Network Breakpoints
  • Event and Exception Breakpoints
Network, Page Speed and Security
  • Downloading From Codepen.io
  • The Network Panel
  • Hacking Reservations on Yelp
  • Improve page load speed with Audits & Lighthouse
  • Security and HTTPS with NGrok
Client Side Performance Monitoring
  • Introducing a Client Performance Example
  • Task Manager, FPS meter, and Rendering Tab
  • Performance / Timeline Tab
  • Detecting Memory Leaks
Other Browsers and Some FAQ's
  • Other Browsers, VM's and BrowserStack
  • A Thank You and Common Questions