Debugging with Dev Tools

Man 1: [00:00] One of the nicest things about the fact that D3 uses web standards and SVG to draw the charts is how debuggable it is in something like Dev Tools. Here, if we inspect our scatter plot, we can actually use the Dev Tools Inspector to navigate our visualization.

[00:22] If we click on that, we then see the tag in the markup of the document. Then, of course, you can access the most recently selected item in the console with the "$0expression. What that gives us is, again, that element.

[00:40] One other thing to note is that D3 very handily provides this "data" object and attaches it to that DOM element. We can actually see the data object that is being represented by this DOM element.

[01:00] The other nice thing is that we now have a reference to this element. We can then go and actually tweak the styles of it. We can say, "Fill is red. Stroke is, I don't know, green."

[01:15] Not that you're going to use this for a lot of things, but you can use it to go in and tweak layout and appearance. Rather than having to go edit your code every time, rerun the visualization, you can just tweak it here, get the values you want, and then move back to your code.

[01:36] If you wanted to change the appearance of all of your items, you just change the style for the class that has been applied to all of the elements. You can inspect the data, inspect the appearance, change the appearance, change the data, everything that you need to debug those things in the browser.