Writing code has never been a problem; getting that code to work is.
New code becomes cheaper every day, but maintenance does not. Bugs are faster, subtler, and harder to catch, and dealing with them is increasingly difficult. This book will make it easier, showing you both useful (and underused) features of your browser's developer console and also ways of writing your code that makes it easier to test (and less likely to need debugging in the first place).
In just one week you'll master debugging skills that will save you hours every day.
Read stack traces as if they were a story, wrap risky code in bulletproof guardrails, and triage issues so that critical ones always get fixed first. Master root-cause analysis, design gracefully failing systems, trace data through tangled chains of callbacks and promises, and make resolving future problems easier for everyone with smart error monitoring. Surprise yourself by the power of familiar Chrome developer tools that have always been readily available to you.
Starting from a foundation of process methodologies and software design principles, you'll continue on through practical techniques like logging and interactive debugging before arriving at monitoring and debuggability. In the end, you'll have the knowledge you were missing and the skills you need to help you raise the quality bar and focus on what truly matters most: building exceptional web applications.
Happy debugging!
What You Need
A computer with a Chromium-based browser such as Chrome, Vivaldi, or Brave, and an IDE such as WebStorm or VSCode. Along the way, you'll be installing command-line tools, so be sure you have permission to do so.
Table of Contents:
- Acknowledgments
- Welcome
- Is This Book for Me?
- What’s in This Book?
- How to Read This Book
- Before We Begin
- Printing and Interpreting Errors
- Setting Up for the Book
- Getting Started with Debugging
- Fixing Common Errors
- Wrapping Up
- Setting Guardrails with Throw and Catch
- Fail-Fast and Fault-Tolerant Systems
- Advanced Logging
- Wrapping Up
- Prioritizing Bugs
- Estimating Bug Severity
- Estimating Bug Reach
- Estimating Bug Fix Time
- Prioritizing Bugs Using RICE
- Prioritizing Beyond Methodologies
- Wrapping Up
- Finding the Root Cause
- Finding the Reproduction Steps
- Using Systems of Root-Cause Analysis
- Using the Scientific Method
- Finding the Suspect Commit Using git bisect
- Wrapping Up
- Designing Software That Doesn’t Break
- Write Clean Code
- Let Your Computer Help You
- Assure Quality with Automated Testing
- Ship with Confidence
- Wrapping Up
- Following the Data Flow
- Defining What “Fixed” Means
- Overcoming Blank Console Paralysis
- Getting to Know the Sources Panel
- Navigating the Code
- Using Breakpoints
- Improving the Fix
- Using Source Maps
- Wrapping Up
- Bonus Exercise
- Debugging Asynchronous Operations
- Network Panel in Chrome Developer Tools
- Debug Parallel Operations
- Logging on a Web Page
- Wrapping Up
- Make Your Code Debuggable
- Setting Up Sentry
- Monitoring Errors
- Structured Logs
- Adding Performance Traces
- Wrapping Up
About the Author :
Andrey Ozornin is a tech lead at Framer who loves shipping meaningful products. With more than 12 years of experience at companies such as Miro, Booking.com, and Wrike, as well as smaller start-ups, he knows that the biggest obstacle to creating great products is software quality, and he wants to share battle-tested ways to improve it.
Review :
A calm, battle-tested guide to debugging modern TypeScript apps. Andrey Ozornin shows you how to make failures loud and fixes fast in the best possible way.
— Constant Druons, Product Engineer, Framer
