什么是在Chrome的源面板，这些灰线？(What are these grey lines in

我使用browserify -> babelify -> uglify2 。 这react_app.jsx实际上是从源地图加载。

进一步的实验编辑：

• 平原JS - > browserify：否
• JSX - > browserify与reactify：YES
• JSX - > browserify与babelify：YES

所以，它是关于JSX？

更多实验

这是关于JSX源地图的js。 我是用reactify 0.17和它工作得很好。 但reactify 1.0硬编码源地图选项true 。 还有一个悬而未决的问题为。

在铬的视图reactify 0.17像和不灰线：

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默认有“上”源映射，所以它的行为就像reactify 1.0 。

我认为@SteveB @AndersNS是正确的，这是铬是由那些灰线。 而且，由于他们不是真正的线，在破发点的行为古怪。

TL; DR;

reactify 1.0实现从源映射.jsx到.js 。 铬开发工具尊重源地图，但似乎并不完全与之兼容。

文章来源: What are these grey lines in the Chrome sources panel?