如何在方法链的中间设置断点

Question

例如，如何在debugger;之后放置.attr("class", "bar") 这样我就可以在断点处进行调试

由于

之前

svg.selectAll(".bar")
    .data(data)
  .enter()
    .append("rect")
    .attr("class", "bar")
    .style("fill", function(d) { return color(d.num); })
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())

我希望我可以像这样调试

svg.selectAll(".bar")
    .data(data)
  .enter()
    .append("rect")
    .attr("class", "bar")
    .debugger;
    .style("fill", function(d) { return color(d.num); })
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())

更新

我收到错误Uncaught TypeError: undefined is not a function

$.fn.debug = function() { debugger; return this; };

 group.selectAll("path") // bind data to empty collection as usual
        .data([data]) // what need another [] to bracket it ?
        .enter()
        .append("path")
        .debug()
        .attr("d", line)

Answer 1

您无法在链中间插入debugger。你必须采用KevinLabécot提出的方法。或者，如果你真的想要，你可以编写一个非常简单的jQuery插件并像这样使用它：

$.fn.debugger = function() { debugger; return this; }

svg.selectAll(".bar")
  .data(data)
  .enter()
    .append("rect")
    .attr("class", "bar")
    .debugger() // <--- debugger will stop here
    .style("fill", function(d) { return color(d.num); })
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())

Answer 2

那样的东西？

svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar");

debugger;

svg.selectAll(".bar")
    .style("fill", function(d) { return color(d.num); })
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())