Chrome源面板中的这些灰线是什么？

Question

我正在使用browserify -> babelify -> uglify2。而react_app.jsx实际上是从源地图加载的。{/ p>

进一步的实验编辑：

• plain js - ＆gt; browserify：否
• jsx - ＆gt; browserify with reactify：是
• jsx - ＆gt;使用babelify进行浏览：是

所以关于jsx？

更多实验

关于从jsx到js的源地图。我使用的是reactify 0.17，效果很好。但reactify 1.0将源地图选项硬编码为true。对此有一个pending issues。

reactify 0.17的chrome中的视图类似于没有灰线：

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

reactify 1.0的镶边视图与灰色线条相似，断点有时无效！：

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

我可以重现灰线。但非工作断点是不可预测的。默认情况下，babelify具有源地图＆＃34; on＆＃34;，因此其行为类似于reactify 1.0。

我认为@SteveB @AndersNS是正确的，它构成了那些灰色的线条。而且因为它们不是真正的线条，所以断点表现得很奇怪。

TL; DR;

reactify 1.0实现了从.jsx到.js的源地图。 chrome dev工具尊重源地图，但似乎与它不完全兼容。