如何在JavaScript中调试库函数的重写代码？

Question

This is my code snippet. As you can see the drawNodes function is overridden from the dagre-d3.js library for drawing directed graphs. However, when I assign a breakpoint at the line which starts with 'renderer.drawNodes', and 'step into', the control goes inside the library. If I step over, however, it skips this function and goes to the next line after the end of the function.

var oldDrawNodes = renderer.drawNodes();
renderer.drawNodes(function(graph, root) {
  var svgNodes = oldDrawNodes(graph, root);
  svgNodes.each(function(u) { d3.select(this).classed(graph.node(u).nodeclass, true); });
  return svgNodes;
});

My purpose is to debug the overridden code, I would like to watch the expression value of var svgNodes and more functionality which I plan to write there.

How do I do this? Thanks.

Answer 1

Don't step into renderer.drawNodes() . Make sure that your code is broken up into enough separate lines so you can set your breakpoint exactly where you want it. Then set a breakpoint on the desired line line and let the debugger RUN until it hits that breakpoint (not stepping, but running).