how do I debug on webpack with vs code on chrome browser? I am new to programming and the way i used to debug in browser doesn't work because webpack minifies it all to one line.
everything I found online seems irrelevant
The sourcemaps generation should be enabled, e.g. on Angular you can enable them on angular.json, setting sourceMap = true
When it is running on chrome, you can found them on top -> webpack:// -> . (yes the last folder is a point/dot).
On the next link is an image with the folder structure of the sources tab in dev tools.
Where to find the code with sourcemaps from webpack
Related
I'm current new to a project and I've realized that the javascript files that get edited in an IDE aren't readable in chrome. For example. the following is a code snippet that I have in Intellij.
This is in a file called MNV.js, however opening up the mnv.js file on chrome devtools shows this.
Is there something wrong with the configuration of chrome devtools or is this just how the program is supposed to work? Thanks!
EDIT
This project is also using VUE, so this is the vue configuration.
Webpack sometimes bundles code together in this format for debugging purposes, making the source code difficult to read. You can disable the parsing of the code as a string and the eval shenanegans by turning off devtool processing of the modules.
In your webpack config, add:
devtool: 'none'
I'm developing a webextension for Chrome. The code is written in typescript and then bundled with parcel.
The generated output looks correct to me, but chrome is unable to load the sourcemaps for a contentscript written in typescript. To let you reproduce the issue, I have set up this minimal sample:
https://github.com/lhk/chrome_ts_sourcemaps
git clone https://github.com/lhk/chrome_ts_sourcemaps
cd chrome_ts_sourcemaps
npm install
parcel build src/manifest.json
This creates a dist/ folder which can be loaded as an extension into chrome.
As you can see, the generated code contains sourcemaps:
console.log("I'm the contentscript");
},{}]},{},["rrAT"], null)
//# sourceMappingURL=/index.map
My example contains two scripts: A contentscript and a script included in the popup.html of a browseraction. They both print something to the console, which makes it easy to find them in chrome:
The console.log from the popup is already recognized as popup.ts:1. Chrome knows that this was a typescript file.
But the contentscript is not mapped to its original source. How can I make chrome use the sourcemap ?
The problem are the sourcemap paths. The leading / is incorrect for files within folders. These files need either their full path, including the parent folder, or just their name, without a slash.
For someone also using parcel, the correct behaviour can be switched on with an additional option:
--public-url ./
The related issue is:
https://github.com/parcel-bundler/parcel/issues/2209
I am new to webpack and angular-cli. My problem is that when I create an Angular 4 project using angular-cli, everything works fine with ng-serve but everything get bundled by default. Web pack bundling info:
I am not able to see the component.ts files in browser to debug. Is there any way to disable the bundling? angular-cli version details:
When you do ng serve with the CLI, it will create sourcemap files by default. That means, that although the source files are bundled together, you can view the original source files in the debugger and step through them.
You find them in the DevTools under the tab Sources, the folder webpack://
If you want to view your prod build like this, you can add the flag -sm for sourcemaps. In the prod build, there won't be sourcemaps by default.
ng serve --prod -sm
Yes also you can enable and disable this from the developer tool option
Go to setting (press F12 then F1 ). Under the source you can enable and disable to source mapping. In deploy time you not going to put the map file so this will not get downloaded.
Developer tool settings
Use following build command to hide your source code under Sources Tab
ng build --no-sourcemap ( Development environment )
ng build --env=prod --no-sourcemap (Production environment)
I'm beginner to use webpack though enjoying programming so long time.
I configure it,and make it to output bundle script transpiled to from typescript,coffee-script so on. But I have no knowledge to debug bundled script with chrome dev-tools.I tried to set breakpoint coffee-script mapped chrome dev-tools first,though I thought it might not work,and of course, it didn't work.
How debug ordinarily these script ? Welcome any help.
Edit:
I found why couldn't debug coffee in chrome dev-tools. Webpack loader didn't read all files because of failing preprocess javascript loading at browser. So runtime exits before reading file I want to debug. I can set breakpoint coffee map file. But, welcome any other tips.
New to WebStorm and trying to configure for an upcoming project. I want to exclude library files when debugging (Version 10).
I have the debugger connecting to the site running on chrome, as it is served by a local instance of nginx. I have used Settings >> Build, Execution and Deployment >> Debugger >> Stepping to set the paths of files I don't want to step into. I have tried relative paths, absolute paths and even the the http url paths. No matter what I try, the debugger always seems to step into library code.
Is there any trick to this? Can anyone at least confirm this feature is working for them?