I wrote a sibling comment about some web app fundamentals posts I've put together, but fwiw I've also got some resources on debugging as well. This is another topic that seems to be rarely taught, and people just have to pick it up through hard-earned experience.
I did a presentation last year that provided some general guidelines and suggested approaches to debugging, as well as specific info on the standard controls used in GUI debuggers and tips for debugging React and Redux:
You mentioned "trace", and I'm not sure if you're referring to "trace a request as it gets passed through multiple services", or just "trace data flow on the client side".
The other resource I can point you to: a couple months ago I joined https://replay.io , and we're building a time-traveling debugger for JavaScript apps.
The basic idea of Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code while debugging the recording, and it will show you what it would have printed every time that line of code ran!
We're working on additional features to help with debugging apps - we already have the React DevTools integrated into our debugger, so you can inspect the component tree at any pause point, and over the last couple weeks I got the initial alpha implementation of Redux DevTools integration working as well. (Long-term, we'd like to integrate _all_ major framework-specific DevTools as well.)
Beyond that, we also spend a bunch of time helping teach people how to debug in general, specifically _because_ that's a thing that is so rarely taught.
If you've got questions about Replay, or just want to chat about debugging approaches, come by our Discord at https://replay.io/discord and say hi - we'd love to offer suggestions!
No offense but this seems like a bunch of blogspam with some basic slides about basic debugging, and then an advertisement for your startup. Hardly comprehensive or insightful.
Sure, I'm mentioning the company I work for intentionally, but that's specifically because we make a tool that is designed to help make debugging easier :) And the slideset also seemed like it matched what you were asking for.
FWIW, given the number of presentations I've put together and articles I've written [0], and the amount of effort I've put into all that material over the years, I don't think my work qualifies as "blogspam".
But, if you feel the material in that slideset is too basic, I'm genuinely curious: what info about "debugging modern web apps" _are_ you looking for, in that case? If there's some particular topics or ideas that aren't well covered, I might be able to put together something that would help fill that gap.
I did a presentation last year that provided some general guidelines and suggested approaches to debugging, as well as specific info on the standard controls used in GUI debuggers and tips for debugging React and Redux:
https://blog.isquaredsoftware.com/2021/06/presentations-debu...
I also have a prior post where I gave some general debugging tips, and wrote up several "war stories" of weird and difficult problems I've debugged:
https://blog.isquaredsoftware.com/2019/01/blogged-answers-de...
You mentioned "trace", and I'm not sure if you're referring to "trace a request as it gets passed through multiple services", or just "trace data flow on the client side".
The other resource I can point you to: a couple months ago I joined https://replay.io , and we're building a time-traveling debugger for JavaScript apps.
The basic idea of Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code while debugging the recording, and it will show you what it would have printed every time that line of code ran!
See https://replay.io/record-bugs for the getting started steps to use Replay, and https://docs.replay.io/docs/examples-d25ae319114e4d109022458... for some videos and examples of using Replay to solve problems.
We're working on additional features to help with debugging apps - we already have the React DevTools integrated into our debugger, so you can inspect the component tree at any pause point, and over the last couple weeks I got the initial alpha implementation of Redux DevTools integration working as well. (Long-term, we'd like to integrate _all_ major framework-specific DevTools as well.)
Beyond that, we also spend a bunch of time helping teach people how to debug in general, specifically _because_ that's a thing that is so rarely taught.
If you've got questions about Replay, or just want to chat about debugging approaches, come by our Discord at https://replay.io/discord and say hi - we'd love to offer suggestions!