Enter Inspector Inception: Let's See How Browser Developer Tools Work!
summary
Developer tools are actual web apps built with HTML, CSS, and JS; code lives in Gecko and Chromium front-end repos; Firefox’s browser toolbox lets the tools inspect and debug themselves; a demo adds a breakpoint to the addBreakpoint function and successfully pauses the debugger; Chrome’s front end runs locally via a remote-debugging port; a new Debugger.html is on GitHub and uses React and Redux, hot-reloads with Storybook, runs integration tests with Cypress, and the Firefox team is about 20–30 people with one designer each.
AI-written summary · about
chapters (40)
- 0:00Introduction
- 1:53Jason Laster
- 2:15Project Overview
- 2:40Firefox Team
- 3:08IRC Room
- 3:25Bugzilla
- 3:51Docs
- 4:11What about the future
- 4:36Dev Tools can get much better
- 4:57How to involve the community
- 5:40Examples
- 6:22Mozilla
- 7:08Het
- 7:25MVC
- 7:47Browser Tool Box
- 9:03Browser Dev Tools
- 10:20Gecko Search
- 11:07Add Breakpoint
- 11:35Improve debugger
- 12:06Chrome
- 13:37Debugging with Chrome
- 13:50Inspecting a web app
- 14:43What do I want to add
- 15:05Adding a screensaver
- 15:35Contributing to devtools
- 16:04Editing as HTML
- 16:30Elementary Element
- 16:57Note Object
- 18:21The Element
- 19:44NPM
- 22:34Scopes
- 24:03Unit Tests
- 24:40Scopes Pain
- 24:58Scopes Code
- 25:42Save Values
- 25:57Objects
- 26:32Call to Action
- 26:57Integration Tests
- 27:21ToDo
- 28:19Call Stack
related talks
26mDebugging the Debugger
26mDebugging the Debugger
25mDevTools Deep Dive
31mDebugging Your Debugger
25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!
37mAll tooled up and nowhere to go?
43mModern web debugging with devtools