"Build Your Own Devtools"
summary
Practical criteria and concrete outcomes: a Chrome extension adds a URL pretty printer that structures long app URLs so parameters are editable and time-travel diffs are visible, a Storybook demo and number-formatter UI give immediate feedback on config, a VS Code plugin adds a test runner code lens to run specs with one click, and an in-page Loop highlights component library usage and links to source. These tools are in use — dozens of engineers and thousands of invocations — and reduce friction in Datadog’s frontend workflow.
AI-written summary · about
chapters (13)
- 0:00Building your own Devtools
- 2:50Defining developer tools and their value
- 6:25Effective Devtools traits
- 9:54Build vs use trade-offs
- 11:59Devtool solution example
- 13:49Data formatting tools
- 15:57Component debugging tools
- 17:43VS Code test runner
- 20:17External time-saving tools
- 21:22Measuring Devtools success
- 23:09Devtool challenges
- 24:33Community engagement
- 25:57Conclusion
related talks
37mAll tooled up and nowhere to go?
30mAlternative Reality DevTools
35mOptimise your Web Development Workflow
31mDX to another level
20mGoing steady with the Chrome Dev Tools
28mA hero's guide to developing with Chrome Dev Tools
43mWork Smarter, not Harder with Chrome DevTools
28mWe have DevTools. What about DesignTools?