EDIT: Source Map works in Firefox, but not in Chrome or Edge.
When I'm debugging warnings/errors, I click on the TSX file and it pulls up an obfuscated version of the .ts/tsx file. The following screenshots will help clarify my issue...
When I get a React error like this
I click on the /components/AddObject/index.tsx link and it opens the file in the console, but it looks like this
Here's what my webpack config looks like (using devTool: 'eval-source-map')
Any thoughts as to why my source-map file is behaving this way?
Related
I'm maintaining a Vue2 project in which I've recently upgraded #vue/cli-service to version 5.0.4 (from 4.5.0).
Now I've noticed that I can't use my browser devtools to debug the app anymore. Specifically, when I open the devtools and press CTRL+P and type App.vue, the browser opens a compiled version of that file. Previously, it would open the original source file and allow me to place working breakpoints in that file.
This problem occurs in Chrome, Edge, and Firefox.
This problem even happens to the default project scaffold generated by the latest #vue/cli (version 5.0.4 also), with typescript and babel disabled (eg the project generated using vue create testProject).
As a matter of fact, this problem even happens to the default Vue3/Vite project scaffold generated by npm init vue#latest. With or without typescript. I have no idea how anyone in the Vue ecosystem are debugging their projects anymore.
I've already tried setting configureWebpack.devtool = 'source-map' - that hasn't had any effect.
Am I doing something wrong?
This is working for me. I tried to reproduce (npm init vue#latest). When I hit ctrl-p, the first App.vue that's suggested is, as you say, a compiled version. But if you keep hunting down the list, look for the App.vue that has a directory path after it, and you should see your source and be able to put breakpoints. I also like to open my source directory in the filesystem sub-tab of the sources tab in devtools, and this works fine as well, breakpoints included.
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 created a small project using scrimba.com. It works fine on scrimba's browser, but when I downloaded it and tried to open it on Chrome it doesn't work (or Firefox or GitHub Pages).
The error goes as follows: .../script.pack.js net::ERR_FILE_NOT_FOUND, so I figured it has to do with my script src="script.pack.js", but can't make it work nor did I found a solution. I am new to coding and would appreciate a hand. Below are screenshots of the following files:
index.html
package.json
webpack.conf.js
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
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.