Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Debugging with Dev Tools

    Ben ClinkinbeardBen Clinkinbeard

    D3 debugging is fully supported within Chrome Dev Tools. This is extremely useful!



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Man 1: 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.

    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.

    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.

    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."

    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.

    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.