Firefox debugging support

[EricTill]

First of all, let me say that I mostly love what you guys have done with react so far.

Unfortunately, I have to use Firefox while I'm at work. Is there any plan to port the debugger to Firefox? Or any tips you have to at least get something workable? If not, I will have to abandon my project which will make me sad.

More info:

Basically, I'm loading my javascript as a type="text/jsx" file and parsing it with JSXtransformer, but when I encounter bugs in my program, the console points to lines that do not exist in my html file as the source of the error. I know that react does some complicated things behind the scenes with DOM manipulation and that's the reason for this, but it makes debugging my application virtually impossible. I'd appreciate any feedback on this issue.

Thanks,
-Eric

PS: Would precompiling my scripts eliminate this issue? I'd need to know for sure so that I can tell if it'd be worth the trouble of building node from source.

[sophiebits]

We already (try to) produce source maps in JSXTransformer since version 0.9 so you should be able to step through the original JSX code and have it open in the debugger when errors are thrown. You may have better luck compiling your JSX on the server (or otherwise precompiling it so Firefox just sees normal JS files). We've taken care to make it so that exception breakpoints do give a useful stack trace. (And if there's something we're not doing but should be, please let me know.)

[EricTill]

Thanks for your quick response, spicyj

I really hope it's me who is messing something up. I'm used to just loading up plain js files and running them normally, so please bear with me.

When I go to my developer tab and try to look at the source for my test js file (written using react) this is what I see:

Error loading source:
Could not load the source for http://www.myworkdomain/path/to/test.js.
Error: "test.js" is not in the SourceMap.
Stack: SourceMapConsumer_sourceContentFor@resource://gre/modules/devtools/SourceMap.jsm:391
SourceActor.prototype._getSourceText@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2452
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:118
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:43
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/core/promise.js:153
SourceActor.prototype.onSource@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js -> resource://gre/modules/devtools/server/actors/script.js:2471
DSC_onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1023
LDT_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:258
makeInfallible/<@resource://gre/modules/devtools/DevToolsUtils.jsm -> resource://gre/modules/devtools/DevToolsUtils.js:80
Line: 391, column: 6

Any clues to what is going on?

EDIT: Okay after researching the topic for a bit it seems that I need to provide my browser with the source map... and that it won't generate it automatically? Is this the case? Are you saying that running the precompiler would generate this .map file? Or is this completely wrong? Should using the JSXTransformer automatically generate a kind of local source map that Firefox ought to be able to see/read/use? Please forgive my ignorance and thanks for your help.

[sophiebits]

You shouldn't need to do anything special, this sounds like a bug in JSXTransformer. See also #1725 which was just filed.

[flying-sheep]

Unfortunately, I have to use Firefox while I'm at work

I hope you only mean “unfortunately i can’t use React devtools with the browser I use”. Because in this case, I’m with you: Firefox is so much less buggy than Chrome it’s not even funny (5 canvas and SVG related bugs in one single-page appliction). Therefore I prefer Firefox for development and would like devtools support there!

Generally browser state is:

1. Chrome is the fastest in implementing new features, but doesn’t care about edge cases. Longstanding bugs don’t get fixed and you have shit like SVG serialization always creating invalid SVG! Did anyone even try this once?
2. Firefox is a bit slower in implementing new features, but has more attention to details and you can be sure it’ll work and that serious, but rare bugs actually get fixed.
3. IE is slow as fuck in implementing new things, yes, even IE11+

[zpao]

This bug as filed was fixed a while ago and really had nothing to do with React devtools.