Generate Source Maps through webpack for a Better Debugging Experience with source-map
A potential downside to all the transformations our tools perform on our code is that when you need to debug your application, the code being served isn’t the code you wrote. This is where source maps save the day. We can serve transformed and bundled code, then debug in DevTools against our source code right in the browser. In this lesson we’ll take a look at the default debug experience without source maps, then we’ll configure webpack to generate source maps and look at the enhanced experience.
Instructor: [00:00] I'm running my app through webpack-dev-server on port 9,000. Let's say I need to debug this application. To keep it simple, let's just add a debugger statement into the render method of this app component.
[00:11] We'll come in here to render. We'll just write debugger. I'll hit save. Our app will reload. I'm going to open up the dev tools in the browser, and I'm going to reload this again. We'll see that it's paused in the debugger, and when it brings this up, the code that we're looking at is generated code.
[00:40] It's inside this createClass, with a key of render, with this value function, where we're returning React, webpack, imported module zero, default, createElement. None of this is code that I wrote. That's going to make it a little hard to debug if it's more complicated than a simple rendering of an h1.
[01:01] Let's go ahead and let that go, and let's see how we can solve this with source maps. Source maps do exactly what the name implies. They're going to map our source code to the code that's actually running in the browser.
[01:13] When we're in the browser, we want this generated -- and for a production build, optimized -- code running. When we need to do things like debug our code, it's really nice to have that mapping back to our original source code.
[01:25] We're going to add that through webpack. I'm going to come into the terminal, and I'm just going to hit Ctrl+C. Then in my webpack.config.dev file, I'm going to add a new top-level key. This one's called devtool, all lowercase.
[01:40] We're going to give it a value of source-map. I'm going to save this, and then back in the terminal, I'm going to do an npm run dev. That's going to open a new tab in my browser, so I can close the previous one. Our app will load.
[02:01] In the browser, I'll open up the dev tools. My debug statement is still in app.js, so let's go ahead and refresh to see if we can hit the debugger. We'll see that we're paused in the debugger again. This time, when we look at the code that we need to debug, we're actually seeing our source code. It's mapping the code that's running in the browser back to our source to make things like debugging easier.
[02:27] Now I can come in here, and I can step over the next function call. I can step into code. I can step out of code. I can do everything that I would normally do in the debugger, but it's going to happen against my source code, rather than the generated code. I'll just resume the script to let that run, and then I can come back into the code.
[02:46] I can take out that debugger statement, but now, anytime I'm working in dev mode, I'm going to get this source map output.