Error on line 1, column 6532112 of bundle.js? Out of memory error trying to load a CPU profile into the Chrome debugger? Two minutes to see wait and see if a change you made fixed a bug?
While upgrading our complex web application from Webpack 3 to Webpack 4, we ran into these of challenges and more, that required adapting my use of debugging tools and techniques to deal with the scale of the problem.
As your codebase grows the debugging techniques you apply need to adapt – things you take for granted like setting a quick breakpoint, reproducing a bug in seconds, or loading a CPU profile into the Chrome Dev Tools start to break down.
This talk dives into the different issues we encountered, and how we debugged and fixed them – providing practical examples, and tips, for debugging JavaScript in the Browser and Node as your codebase grows, that provide a valuable addition to any developer’s toolbox.
What are the key takeaways from this talk?
Learn about more advanced debugging techniques like logpoints / conditional breakpoints, alternative tools for collecting and visualising CPU profiles, general debugging and creating minimal reproductions for use with tools like git bisect.
