Comments (5)
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.)
from react-devtools.
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.
from react-devtools.
You shouldn't need to do anything special, this sounds like a bug in JSXTransformer. See also #1725 which was just filed.
from react-devtools.
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:
- 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?
- 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.
- IE is slow as fuck in implementing new things, yes, even IE11+
from react-devtools.
This bug as filed was fixed a while ago and really had nothing to do with React devtools.
from react-devtools.
Related Issues (20)
- Can't install in Firefox HOT 1
- Expand all elements using default browser hot keys HOT 1
- Security issues with React.Provider HOT 5
- Search input text colour HOT 4
- Is it unmaintainable? HOT 1
- React App not Functioning with Extension Enabled HOT 1
- Having the devtools extension enabled breaks Kibana HOT 3
- New devtools is not compatible with React 0.14 HOT 5
- New Devtools: Where is Highlight Updates? HOT 5
- New Devtools Broken on Firefox 68.0.2, Windows 10 HOT 1
- React Devtools - Component selection bug v4 HOT 1
- Remove emoji from browser devtools tabs HOT 2
- New Devtools: Update props does not rerender component HOT 2
- Inspector: clicking on element with style object value causes crash HOT 1
- Firefox Private Browser Support HOT 1
- Show component file path HOT 1
- Long interaction names cannot be seen HOT 1
- Getting maximum call stack exceeded on backend.js when rendering many elements. HOT 2
- Using react-devtools to inspect component that only appears on hover HOT 1
- React devtools 4.0.4 (8/18/2019) Expected to find root ID. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-devtools.