Recently I faced a very nasty problem with source mapping using grunt-contrib-concat. Grunt-contrib-concat concatenates several .js files into one and uses source-map module for source mapping.
So breakpoints in my code paused incorrectly both in Chrome and in VS Code. (You know what is it, if you faced the same problem).
My environment: Windows 10, VS Code with Debugger for Chrome extension, Chrome browser, Node.js project with grunt-contrib-concat dependency.
It is very unefficient to debug your client-side code without correct breakpoints.
I have spent several hours to clear the problem, and finally I have found the solution. Problem was in concatenate minified .js files. After these minified files line numbers in source map become wrong.
So the solution is to exclude minified files and use normal instead.
Related
Is there any way to convert webpack bundled js file into source code ts?
I have bundle.js file with me bundled with webpack. Unfortunately the source code files are deleted by a stupid accident. I want to reverse engineer my bundle.js file to get back my source code typescript files. Is there any possible way to achieve this?
Do you still have your source map files by any chance (e.g. main.bundle.js.map )? If so, you can run your app (ng serve), open the Chrome Dev Tools in your browser and you'll see your sources in TypeScript under the tab Sources -> webpack://
You may try using debundle node module.
Debundle
Am working on an existing codebase for a chrome extension, was wondering why each javascript file had a typescript duplicate that seemingly does the same thing. Not sure if any of the typescript functions are even being utilized. Is there a specific reason why the previous coder would have done this?
Check the tsconfig file to verify the output directory used by typescrpt compiler. Ideally output directory should be placed outside source files(typscript version)
In my company we recently adopted sourcemaps generation in our ts -> js -> minification flow.
Without those maps of course code is almost unreadable/untestable, but as far as I can see those maps don't give me the opportunity to live-edit the code and test it directly in chrome: i edit/save it, but the js interpreter run as if I don't.
This force me to have a local copy of the project and run it, instead of try a fix directly in remote.
Is possible in chrome to edit sourcemapped typescript and run it?
No, this isn't possible because Chrome doesn't have access to / knowledge of the specific TypeScript compiler / config used by your project.
Chrome Devtools does have Workspaces which allows you to map files to a local folder. This would mean that if you have a process watching the TypeScript files for changes, you can live-edit in Chrome which in turn triggers the local TypeScript compiler.
I'm new to JS development and experience issues with debugging JS code in Visual Studio 2013. JS part of our web app is bundled into a single app.bundle.js file by WebPack, this file is automatically updated everytime any js file changes (we use special watch script which uses npm).
I'm able to debug JS code using Chrome and debugger; derecitve. It shows correctly mapped file under such kind of paths "webpack:///./Scripts/". It means that WebPack creates mapping correctly. But I'd like to debug directly from VS using Call Stack, break points, etc.
Any ideas?
Thanks in advance!
There is a a series of ongoing issues with Debugging webpack bundles Visual Studio. Depending on your webpack configuration and your dependency versions, this Webpack plugin may work for you. Be sure to check out the issues where can you see the ongoing conversation. If you are doing anything with Babel / ES2015+, you probably will want to upgrade to Visual Studio 2015 for syntax support.
I was searching over the internet to find a good document about how to install Closure Compiler from google on my Debian Nginx server, and got nothing. all I got so far is Closure Compiler. I want to install this tool to compress and minify both css and js files independently so that these static files get lighter on page load when requested.
Is there any good source how to do that?
all I find is about Yui compressor which is not as good as Closure Compiler as I read.
any thoughts on that?
Closure Compiler does not minify CSS files, just JS files. For that you want: https://github.com/google/closure-stylesheets
Closure Compiler isn't a good choice if you want to minify arbitrary JS files without testing the result. It doesn't back off when faced with eval or with or IE's conditional code like some other compression tools do.
If you are using Apache perhaps you might like Google's PageSpeed module which is designed to work in the general case.