JS Map file debugging in chrome - javascript

is there a way how to debug source maps in chrome? At least to see where is what mapped?
My problem is that I am remapping ts generated file (using source-maps), for whatever reason, does not matter. When I remap them and use console.log or console.error the console correctly shows the line where the console.log or console.error was executed and I can even navigate to the line in the original ts source file. But when I try to set a break point in the .js file on the same line where the console.log is located the break point is set incorrectly to "previous" line (or other file, if there is no any statement in the .ts file)
So the question is, is there a way to tell to chrome to show me mapped relations for js and ts files? If no, is there any other tool, ideally friendly, where I can click on statement and see were is it mapped to? I am lazy to write one, especially in this case I am not sure what I am doing wrong.
Thanks
EDIT:
In between I have found this:
http://sokra.github.io/source-map-visualization/#
and this:
https://github.com/danvk/source-map-explorer
I could not find anything because I was asking google in a wrong way.
EDIT2:
My bundled and remapped files seems to be ok.
It seems to be a bug in chrome debuger itself. Because when I place a break point directly to the typescript file it stops correctly.
So it seems to me the chrome incorrectly maps only breakpoints set in the original (bundled) js file what is actually bundle of compiled typescipt files accompanied with remapped .js.map files to the .js.map bundle.

Related

How do I debug Chrome extension which is made of JavaScript code transformed into bunch of eval() statements?

I'm trying to build, load and debug Selenium IDE extension in Chrome. I got the source code from https://github.com/SeleniumHQ/selenium-ide then ran yarn build and now I have a folder
<repo-root>\\packages\\side-recorder\\build
which contains manifest.json and all .js files listed in the manifest.json are located properly in relation to manifest.json This includes background.js file.
So it looks like build ran okay. I switch Chrome into developer mode, go to chrome://extensions and click "load unpacked", then navigate to "build" folder. The extension is added, but when I click onto its toolbar icon there's an error message in Chrome console which says it cannot connect to engine.io server. I want to find the piece of code which tries to connect there so I decide what to do next.
The problem is original code from the repo which looked like typical JavaScript code is not present in the same form in the "build" folder. Instead it's present as a bunch of eval() statements in background.js file.
The original code would contain something like:
this.attachRecorderRequestHandler = this.attachRecorderRequestHandler.bind(
this
)
and I search for this code and I find this line in background.js instead... It starts like this...
eval("__webpack_require__.r(__webpack_exports__);
and it looks like all the code it just put into one line and somewhere in the middle it contains
this.attachRecorderRequestHandler=this.attachRecorderRequestHandler.bind(this);}
Even if I put a breakpoint onto eval and go back to
chrome://extensions/?id=someVeryLongLineHere
and reload the page then the breakpoint is not hit. Surely I cannot get anything debugged.
It looks like I'm doing something wrong because what I see doesn't match typical "hello world" debugging experience in the Chrome documentation.
How do I debug this? How do I get breakpoints working anywhere and actually debug the original code?

Breakpoints in WebStorm not hitting for JavaScript debugging

I have the following configuration setup in WebStorm:
When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the console.log() output in WebStorm.
I'm trying to navigate to the URL specified in the screenshot and have breakpoints in main.js get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific main.js file in the Remote URLs section, but that didn't help either.
For reference I run the application via bra run and npm run watch.
Quick Update
So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):
../public/app/core/routes/dashboard_loaders.ts allows me to stop at breakpoints, but ../public/dashboards doesn't.
When I navigate to http://localhost:3000/dashboard/script/main.js?orgId=1, it hits the route:
.when('/dashboard/:type/:slug', {
templateUrl: 'public/app/partials/dashboard.html',
controller : 'LoadDashboardCtrl',
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
Which ultimately does load the file ../public/dashboards/multi.js -- but no breakpoints are hit.
Further Updates
It looks like the script is served via the following command (in ../public/app/features/dashboard/dashboardLoaderSrv.js):
/*jshint -W054 */
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);
Where $routeParams are type:script and slug:main.js - If I step into this function, I get an anonymous(?) file that's identical to my actual main.js file, but the name is like 43550 instead of main.js -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)
Edit: I found this issue for using webstorm with grafana (second edit) looks like this is you.
I think what he linked solves it with declaring a sourceUrl then your file isn't "anonymous" or rather dynamic.
//# sourceURL=filename.js
I.E
//# sourceURL=main.js
Reference How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?
Here is the documentation and video on debugging in webstorm to make sure everything is setup properly. (I.E My default setting were to debug my index file instead of my project). Make sure you have their Chrome extension or Firefox Extension
General JS Debugging in Webstorm
Debugging for Chrome in Webstorm
Debugging for Firefox in Webstorm
Debugging Node.JS in Webstorm

WebStorm auto-indent inconsistent with indentation settings

I want to auto-indent an entire JavaScript file in WebStorm, and in my settings I have the following:
The problem is that when I use the menu Code -> Auto-Indent Lines or Code -> Reformat Code the indentation level remains at 2.
Is there a setting somewhere I am missing? I don't want to be inconsistent with the coding standards put in place.
The problem was with the .editorconfig file located in the root of the project directory. Although I can't recall receiving a warning, the settings in that file overwrote the Webstorm settings, and changing them to the desired indentations resulted in the desired result.

Out of range error in firebug console

I am trying to debug ext-all-debug-w-comments.js file. The file is pretty big and when the error occurs, it says "TypeError: all.item(...) is null (151559 out of range 149122)"
Basically the error occurs at line number 151559 but only 149122 files are shown in firebug. Since all the lines are not loaded I cannot debug in firebug.
Please see below image for more information
What should option I have here?
Thank you
Is there a browser specific issue involved?
If not, you could use Chrome, it can handle bigger scripts compared to Firefox.
Use ext-dev.js instead. The ext-all- files are compiled versions with all classes available in Ext JS; ext-dev.js will load every class you use in a separate file. Slows down the app loading considerably so it's only suitable for debugging, but it also makes Ext JS a lot easier to debug.
In order to use ext-dev.js you'll need to set the paths to Ext JS and your custom classes using Ext.Loader.setPath, before the first classes are required -- at the top of your app.js would probably be the best place.
Another (better) way to manage dependencies is to use Sencha Cmd.

WScript is undefined

I am trying to run a Javascript file locally, which is supposed to create a CSS image sprite using ImageMagick. It's part of the OpenID selector JS component: http://code.google.com/p/openid-selector/
The generate-sprite.js (http://code.google.com/p/openid-selector/source/browse/trunk/generate-sprite.js?r=140) file is supposed to create the image sprite automatically. However, whenever I run it in IE (the local version of the file, of course), I get the error SCRIPT5009: 'WScript' is undefined on line 19, character 1.
I have of course installed ImageMagick and updated the location in the js file. IE9 is letting the ActiveX execute.
Since I'm not familiar with WScript, I am completely lost. Googling didn't help, since this seems to be a very generic error.
Can somebody help diagnose this error please?
When you say you're "running" the JavaScript file locally, are you using Windows? If so, and double-clicking or typing the filename from the command line doesn't work, try:
wscript generate-sprite.js
...which explicitly invokes wscript.exe.
If you're not using Windows, you can't use that script — it relies on both Windows and Microsoft's JScript (which the wscript.exe program invokes).

Categories