DEV Community 👩‍💻👨‍💻

Marcin Wosinek
Marcin Wosinek

Posted on • Updated on • Originally published at how-to.dev

How to add source map to the esbuild configuration

In this article, I'll show you how to add a source map to the setup we developed so far in this series.

What is source map

As we introduce any bundling or compiling step to our application, we start to have a difference between what's in our source code & what's run on the browser. This is especially problematic in debugging, or error logs - the browser shows us the building code, while we try to fix the issue in the source. Source map allows the browser to map the code that it executes to the source.

Enabling source map

To enable the source map, we need to add to esbuild.config.js:

...

esbuildServe(
  {
    ...
    outfile: "www/main.js",
+   sourcemap: true,
  },
  { root: "www" }
);
Enter fullscreen mode Exit fullscreen mode

With this in place, after we restart the server we can see the source in the development tool in the browser. Here example from firefox:

source-map.png

Links

The repo, the branch.

You can check out my video course about esbuild.

Summary

We have seen how to add a source map to our setup. If you are interested in hearing when I have new esbuild content, you can sign up here.

Oldest comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.