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?
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.
In my web app I was using RequireJS to asynchronously load my javascript files on demand. This worked well for dev - when debugging my app I could see which script is dependent on which and order in which they were loaded. This simplified debugging.
Later I switched to Webpack as it is much easier in configuration and easier to maintain. So Webpack now generates for me nice bundles containing my javascript code. This works perfectly well but what I'd like to have is an imitation of my previous RequireJS configuration for dev time.
When I am developing my app I want Webpack to generate some simple entry point (just like in RequireJS) which would load my javascript files one by one through their "require" references.
At the same time I still want that Webpack performed normal bundling when I deploy my app to a server.
Is this possible to achieve?
Enable Devtools in webpack.config.js to control and generate source maps (Source Maps enhance debugging process).
webpack.config.js
devtool: "#inline-source-map",
Chrome Debugger View
Nope, that's not possible. But have you tried the devtool-option? It maps back your original files in your devtools so you should see no difference whether the modules were in different files or just all in one.
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.
I want to work with Senach Ext Js in a Website project in VisualStudio 2013.
The problem: VisualStudio respectively WebEssentials throws warnings like:
JsHint (W117): 'Ext' is not defined.
Here is the situation as it looks today:
The project is exactly what Sencha Cmd produced for me.
At the moment I want only a Website project and no server sided code involved (therefore I did not make a MVC or Web API project).
I know that there is a way to define some global symbols in each JavaScript file for JsHint, but I want to get the intellisense working too. So I am looking for the correct configuration for both use cases: WebEssential JSHint Warnings and Intellisense.
Maybe both problems need to be addressed separately. That would be fine too.
Is my directory structure correct (just took what Sencha Cmd built for me)?
How to address the problem to make intellisense working?
(How to avoid Webessential JavaScript warnings (it seems most or all of them are JsHint)?)
Update: Related question:
Enabling JSHint Support for Ext.js in Intellij Idea
Update:
"An _references.js file in any other location than
“~/Scripts/_references.js” will be just like any other JS file and
won’t be used for global intellisense. Even putting the file in the
root of your web project will not work as well."
Source: http://gurustop.net/blog/2012/03/03/javascript-js-intellisense-auto_complete-in-visual-studio-11-beta-the-web-_references-js-file/
still not working when I have the _references in a new "Script" folder:
So it seems like the final answer was to add a file called ~/scripts/_reference.js and then include a line to reference Ext JS in there. This enables Visual Studio to index the Ext JS source for Intellisense. For example:
/// <reference path="../ext/ext-all-debug-full.js" />
More on the Intellisense and _reference.js:
http://msdn.microsoft.com/en-us/library/bb385682.aspx
Note that due to the size of the Ext JS codebase, Visual Studio might take a few minutes to complete the indexing process and for Intellisense to start working smoothly.