CODEWITHSUNDEEP
javascriptdebuggingwebpackwebpack-dev-serverwebpack-2
huguesvincent
huguesvincent

Reputation: 165

How to get javascript variables in a debugger when using webpack

I am developing a react application with the bundler Webpack. I would like to debug this application with a browser console (here i use chrome).

I have used source-maps and equivalent in my webpack config:

devtool = 'inline-source-map';

Now errors are displayed with the exact line of the original file. The problem is that i want to access to live variables with the console.

So far I found two ways to display them:

1- Add a library in webpack.config.js

output: {
    library: "lib"
},

export variable in the code export var foo = 34; and finally inside the browser console use lib.foo.

2- use breakpoint and access to variable set in the file

Is there another solution to access live variables?

Thanks

Upvotes: 4

Views: 2089

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

There are other solutions, but that means defining global variables and that should be avoided as it can have side effects in the code you're trying to debug, so you might run into problems that are not identical with and without exposing the variables, which makes your debugging experience very frustrating.

Using breakpoints is the best you can do for debugging purposes. The browser debuggers, especially the Chrome devtools, are extremely powerful and it's absolutely worth spending some time to get familiar with them.

Because pausing the app at every breakpoint you set for getting to a certain point can be tedious, you can use conditional breakpoints. One way is to use the debugger statement in your code, in that case you can guard it by any JavaScript you like, for instance this will only pause when the input to the function is 5:

function debug(input) {
  if (input === 5) {
    debugger;
  }
  // Other code
}

Another way is to add conditional breakpoints in the Chrome devtools. As you've configure source maps, you can set the breakpoints in the original source under Sources > top > webpack:// > .
To set a conditional breakpoint you simply right-click a line and choose Add conditional breakpoint... and enter the condition, e.g. input === 5. You can also Edit breakpoint... to change or add a condition to an existing breakpoint. For more information about breakpoints in Chrome see Pause Your Code With Breakpoints.

In the Sources tab you can also right click anywhere and Add folder to workspace so you can edit the sources directly and save the changes to disk (in older versions of Chrome it's a bit more complicated to add a folder to the workspace). To let Chrome know that the source maps of webpack correspond to your workspace, you can right-click any webpack source map and select Map to File System Resource... and you simply choose the correct file of the workspace. After that, all the sources of webpack should automatically be mapped to the correct files. Now you can set the breakpoints there and when you change something and save it (Ctrl + S or Cmd + S), webpack will recompile it. See also Set Up Persistence with DevTools Workspaces.

Sometimes setting a breakpoint might be too much effort for only getting values of variables. With just console.log you probably end up with a lot of different messages. To make it easier to find the messages you need, you can use console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed if you want the group to be collapsed initially.

Upvotes: 4

Related Questions