How to debug multiple JavaScript files and modules in Chrome?

I am working through the JavaScript course and am working on the Restaurant Page project. This is the first time I’ve used import/export of modules, and using multiple JavaScript files at the same time.

I am running this function from “index.js” :
Capture

Which I want to call this module from my file “homeTab.js” :
image

When I load the page in Chrome, this is what my console log says:
image

My question is: Why does Chrome show an error at Line 1 in main.js? Is there a way to get Chrome to show what line the error is on in my homeTab.js file? And can I also get it to show where the error is in my index.js file?

I am more concerned about trying to figure out how the Chrome debugger works with multiple JavaScript files, than I am actually trying to debug this specific example.

Thanks in advance for your help!

PS. I am using Chrome, npm, webpack, and “npm webpack --watch”

If you click on that error in the console it will take you to the code, it says line 1 because when webpack compiles your program it doesn’t bother putting spaces in, it puts it all on one line.

Click on the error and you will see something like “pretty print” option in the browser click it and it will put spaces and make the code look a bit like you wrote it, then you can put break points there to debug it.

Thank you very much! That is very helpful.