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
},
Related
I'm updating an old extension, passing from the old XUL code to html/css "chrome" code.
I have an issue with the "options_ui" tag in my .json file... if i load the extension using the current firefox version (46.0.1) i can't see the "options" button of the extension (as shown in about:addons).
But if i load it using the current developer version (48.0a2) it shows and works as espected.
Any suggestion of how can i fix this?, there must be a way to show the options button without using XUL code.
This is the section of options_ui in my json file:
"options_ui": {
"page": "html/options.htm" },
I have the same problem, here's what I found https://blog.mozilla.org/addons/2016/04/29/webextensions-in-firefox-48/ .
Seems that Firefox WebExtensions will be fully functional from v.48, that's why the Options button is so far only visible in the developer version of Firefox.
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.
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/
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.
Is there a way to beautify JavaScript and CSS in Firebug?
I'd like to be able to view formatted JavaScript code instead of the compressed version :).
There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.
Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.
https://addons.mozilla.org/en-US/firefox/addon/247565/
CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.
JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .
However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)
Firefox Developer Tools has:
"Prettify Source" button: braces {} icon on bottom left
"Auto Prettify Minified Sources" setting: turns Prettify Source on by default.
To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.
Tested on Firefox 42.