How to debug JS with Chrome tools using Laravel Mix

@apex1 thanks for coming back. I do not have the file structure in chrome you refer to.

I have:

**top**
		>KIdsclub.test
				>css
				>js
						>app.js
						>momentum.js

app.js is a compiled file where you can not see any of my own functions.js code.

Here is my webpack.mix.js I obviously have my personal functions.js file being compiled into app.js.

const mix = require('laravel-mix');

mix.js(["resources/js/app.js","resources/js/functions.js"], "public/js/app.js").vue()
    .sass("resources/sass/app.scss", "public/css")
    .css("resources/css/default.css", "public/css");

ps edit: I did not have to reinstall, I fixed my dev system.

@vincej you have to add .sourceMaps(); Something like

mix.js(...).sass(...).sourceMaps()

Houston, we have a problem ... trying to load sourceMap(); into webpack.mix.js and I am getting an error. I will need to investigate this :

Could not load content for http://kidsclub.test/js/popper.js.map: HTTP error: status code 404,

I can see that popper.js is in my package.json and inside my node modules and I have it my reources\... \boostrap.js

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

I can see a post on Laracasts that someone else had the same problem and fixed it with adding som lines to a file, but could no longer remember exactly where they were. I a going to have to hunt. https://laracasts.com/discuss/channels/elixir/popperjsmap-failed-to-load-resource-the-server-responded-with-a-status-of-404-not-found

@apex1 Yeah, got it working. Damned popper.js.map just refused to load. I tried reinstalling through npm and I could see it in the node_modules! Maybe I could delete the node_modules and reinstall ?? So in the end I just grabbed the js code of of Github and created a folder in public and linked to it in my master layout. Yes, a dirty solution, but now I have sourceMap and can see my uncompiled js. Thanks!

@vincej Nice, glad you got it working. Interesting though, I just tried with a fresh Laravel installation, installed bootstrap, jQuery, and popper.js, ran mix and got no errors and can see popper.js under resources in the Sources tab.

@apex1 There is something messed up in my dev system. If it were a bigger issue I would reinstall into a fresh copy, but it's only my dev system, and the production system works as it should. Thanks again, best reply award.