Web Directions Year round learning for product, design and engineering professionals

JavaScript debugging the hard way

Marcin Szczepanski, Principal Developer Atlassian

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.

About Marcin Szczepanski

A developer for over twenty years, Marcin has worked with the web as it evolved from static pages to the rich JavaScript applications we see today. Starting in the corporate world, and later a digital agency, Marcin is currently a Principal Front-end Developer at Atlassian.

As a member of the Jira Cloud Front-end Platform team, Marcin helps to ensure that Jira Cloud’s customers have the best front-end experience possible.