1

enter image description here

I'm using browserify -> babelify -> uglify2. And this react_app.jsx is actually loaded from the source map.

Further Experiment Edit:

  • plain js -> browserify: NO
  • jsx -> browserify with reactify: YES
  • jsx -> browserify with babelify: YES

So it's about jsx?

More Experiment

It's about the source map from jsx to js. I was using reactify 0.17 and it works well. But the reactify 1.0 hardcode the source map option to true. There is a pending issues for that.

The view in chrome of reactify 0.17 is like and without grey lines:

render: function () {
    return (
        React.createElement("div", {className: "tile"}, 
            React.createElement("div", {className: "chart"})
        )
    );
}

The view in chrome of reactify 1.0 is like and with grey lines, and break point sometimes doesn't work!:

render: function () {
    <div className="tile">
        <div className="chart" />
    </div>
}

I can reproduce the grey lines. But the nonworking break points are unpredictable. babelify by default has the source map "on", so it behaves like reactify 1.0.

I think @SteveB @AndersNS were right that it was chrome that made up those grey lines. And since they were not real lines, the break points behaves odd.

TL;DR;

reactify 1.0 implements source map from .jsx to .js. The chrome dev tools respect that source map but seems not fully compatible with it.

hbrls
  • 2,110
  • 5
  • 32
  • 53
  • Don't use these tools, but it seems to be blank lines, isn't it? Maybe this is blank lines generated to keep in sync source line number with genereated js file line number – Steve B Apr 15 '15 at 13:17
  • Grey lines indicate that they Chrome doesn't have source map information for those lines I believe. As to why the lines are there I'm not so sure, maybe because Chrome pretty prints the jsx somehow. – AndersNS Apr 15 '15 at 13:40

0 Answers0