Is it possible to see TypeScript source maps in console?
I'm using Firefox Developer Edition and the Console is showing the .js line-numbers. I have a single .js file, compiled from multiple TypeScript files.
Chrome and Safari are showing the TypeScript sources correctly.
I have been trying to deal with this problem. I found an answer that works for me and have detailed it in an answer here Firefox isnt showing typescript ts source maps in the debugger
Your problem looks similar. Fundamentally it seems because FF does not handle relative paths to the .map files which are specified in your compiled javascript.
Related
I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
Reading minified js is very difficult. so I am using pretty-print tool on developer tool on the browser.
In Chrome developer tools, when js code have formatted, console.log link (this link indicate the points of console.log called, its link is there at the right side of console.log result) is refer to place in formatted source code.
However, In Firefox these links refer to minified source code even if the source code have already formatted.
Is there a way to change the reference of Firefox console.log link to indicate formatted source code?
This functionality was recently added to Firefox; you can read the implementing bug for details.
It is targeted at Firefox 58, so if you want this today, you'll have to run Nightly.
Note that this still does not work in all cases. For example, if you have a generated source-mapped file, and then open one of the corresponding original sources, pretty-printing the original source will not update the locations.
With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
Is there any instruction how to debug typescript in Firebug and/or built-in Firefox js-debugger?
Something like but for Firebug and/or Firefox
Firefox Developer Edition allows debugging of TypeScript code.
The only thing missing is syntax highlighting.
Chrome canary supports this:
http://www.aaron-powell.com/web/typescript-source-maps
Firebug is closely integrated with the Javascript execution engine of Firefox. As long as Firefox or Firebug have no support for Typescript I guess you are out of luck.
For Coffeescript, there is AceBug which offers debugging support for Coffeescript. It should be possible to extend this to TypeScript. However, the structure of the source Typescript and the compiled Javascript can be quite different so the compiler would need to insert debug symbols to link Javascript to Typescript.
Firebug version 3.0 is being designed to run on top of the built-in debugger in Firefox. This means it also leverages the support for source maps and so the .ts files are loaded correctly.
You can try out preview releases from http://getfirebug.com/releases/firebug/3.0/
Current version of Firebug (2.0.13 + FF43) seems to be debugging typescript just fine. At least it worked for me so far.
On the web page you add the "compiled" .js with a reference to the source map. I.e.
<script src="register.js"></script>
And Firebug will show you the register.ts file instead in the list of scripts instead.
Make sure you have the source map generation on in your tsconfig.json:
"compilerOptions": {
...
"sourceMap": true
},
i'm trying to debug an ExtJS application using IE8 but the file ext-all-debug.js it's too big for the internal IE8 debugger and takes ages to load the code, is there any faster Javascript debugger for IE8 ? Another solution that i came up with is to include every extjs file instead of the big ext-all-debug.js but i cant't find the full list (and order) of the files merged into ext-all-debug.js
Thanks for your help
i cant't find the full list (and order) of the files merged into ext-all-debug.js
Here you go: http://code.google.com/p/extjs-public/source/browse/extjs-3.x/include/ext.jsb2
Search for ext-all.js.
This file is actually part of the JSBuilder tool which helps you create a custom version of ext-all.js with just the files you need.
Edit: I generated a copy-and-paste list of the 3.2.1 includes
FireBug for FireFox. You don't have to really test your application in IE8 so I suggest FireBug. If you really want to, you can use FireBug Lite. JS Lint to detect syntax problems.