I wrote a web page using Angular 2 and Typescript. When I opened Firefox Web Console, and I tried to find the .ts file in order to debug it, all I found is the Javascript file that was 'transpiled' from the original .ts file.
In Chrome, it's possible to see the Typescript file in the Developer Tools and debug it. Is it also possible in FF ?
Yes. You need to create the .map files when transpiling from TypeScript to Javascript.
Just include the property "sourceMap": true in the compilerOptions in your tsconfig.json and you're done!
Related
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.
We use this setting in development:
we develop our angular project in typescript using IntelliJ IDEA
transpile our typescript code to javascript with grunt-ts
concatenate all transpiled javascript files to one singe all.js file using grunt-contrib-concat
all.js file is referenced in html
The problem is that we run our app from concatenated all.js file so we can't debug it.
Any ideas on how can we debug our source code in typescript?
Is there any development-wise solution or advice to this?
I'm injecting a css file from my chrome extension using the manifest.json (full source):
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
In Chrome Dev Tools, if I inspect an element which is affected by the injected css, the rules are visible, but in the upper right where the source filename would normally be, it just says "injected stylesheet." I'd like to view ALL of the rules being injected, even those that affect elements which do not currently exist in the DOM.
I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.
Is there a way to view the .css file through dev tools? If not, please explain why there isn't.
Edit: I've just found that this question also appears as a "sub-question" of this one, however no one over there has attempted to answer it, even though there is an accepted answer.
Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070
When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master
For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.
Go to Sources and then Content Scripts. You have to go to the extension name and then you'll see the injected files.
Use the Chrome App and Extensions Developer Tool on an extension which injects CSS, such as Bootstrap Grid Overlay:
the injected URL can be used on the console tab on the app to get the runtime URL using the getURL method:
chrome.runtime.getURL("src/grid.css")
and produce the source:
References
Content Scripts - Google Chrome
chrome.runtime - Google Chrome
Firefox - How to enable an HTML file to save itself locally?
I use Firefox to open and edit TiddlyWiki.html files.
https://github.com/Jermolene/TiddlyWiki5
These are HTML with a Javascript app packaged together in one file.
They also have this Firefox extension called TiddlyFox that can enable the TiddlyWiki.html file to save itself locally in the file you just opened. It first asks if you want the this ability to be enabled on that particular file and if you click Yes it works.
I was wondering how this behavior is achieved via the Firefox Extension? (ex source code here: https://github.com/TiddlyWiki/TiddlyFox )
Google Chrome has the filesystem api, i dont know if this is how Tiddly does it but this topic solution shows how to do it in chrome:
http://stackoverflow.com/a/13779352/1828637
Noitidart comment Feb 10 '15 at 3:38
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
},