Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Here is a screenshot from the d3.js tutorial webpage:

enter image description here

This way of inspection in safari is quite cool, is there a way to do this in firefox?


Let me make things clearer, I have a page with the following source:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
.text(function(d) {
    return "I can count up to " + d;
});
        </script>

    </body>
</html>

And it seems in safari, for each

element, it displays a property called __data__, which is what the d3.js script feeds into them.

enter image description here

share|improve this question

3 Answers 3

up vote 1 down vote accepted

You're not inspecting HTML. You're viewing the results of a JavaScript function call.

Firefox's console does a similar thing:

Screenshot

Note that smc's answer is the correct way to view HTML/the DOM.

Also, I'm still running one version older; the newer version looks even better (and is smart enough to link to the inspector, the place you should be inspecting the DOM).

share|improve this answer
    
you see the small triangle at the left side? it's not expandable in firefox, while it is in safari. –  qed May 9 at 9:07
    
I have added another screenshot into the question. –  qed May 9 at 9:14
1  
@qed You click on the underlined part to get it on the right hand side. It's not an exact clone, and it's not designed to be. It performs the same function. Also, FF Nightly (and possibly Beta/Aurora/29) will show some more detail on the left, but that's not the point. Your second screenshot shows nothing special: if a __data__ member exists, FF will show it. My example doesn't, because I can't be bothered testing your special case when the general works. Your d3 script has nothing to do with how the developer console works; it'll work the same regardless of the object you inspect. –  Bob May 9 at 11:38

Yes, you can simply right click and then select "Inspect Element (Q)"

enter image description here

Then you will get a very similar interface:

enter image description here

share|improve this answer
    
It's different, the screenshot shows inspection in the console, and it also show some 'hidden' attributes like proto and data –  qed May 8 at 21:36

That being said, there are numerous add-on/Extensions for Firefox which resemble what you are asking. A popular add-on is: FireBug which is part of the Web Developer. Which will breakdown and show in "real-time" which piece of html/javascript/css is being displayed. One of many suggestions...

Edit: There is the console based on the Web Developer. I stand corrected. Firebug extends the console functionality. Additional information on firebug is to graphically show where elements reside inside the page structure and how they interact. Inspect HTML and modify style and layout in real-time, accurately analyze network usage and performance, inspect and edit HTML code, visualize CSS metrics, debug and profile javascript, logging for javascript, and the features go on.

share|improve this answer
1  
Firefox has had a built-in developer console for many months. Actually, I'm pretty sure it's years now. This answer is wrong. –  Bob May 9 at 1:34
    
Despite the part of Firefox not having a built-in developer console (which is wrong), it would be preferable if you could point out if FireBug does what the OP wants. It certainly extends the built-in developer's tools, but to what extent? –  Doktoro Reichard May 9 at 2:02
    
Feels like Im in one those scientific journals... Very well, I dont actually answer questions on a regular basis. –  BlizzardsGambit May 9 at 14:02
    
@BlizzardsGambit Eh, we value correctness. Don't feel discouraged; just correct it, learn new things and move on. I apologise if I was a bit blunt in my original comment. Incidentally, most/all Firebug features are now part of the standard dev console, and the standard dev console tends to run faster - it's difficult to recommend Firebug nowadays. –  Bob Jun 15 at 9:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.