WordPress.org

Ready to get started?Download WordPress

Forums

brilliant firefox extension! (9 posts)

  1. nakedape
    Member
    Posted 7 years ago #

    Hi everyone,

    This is not really wordpress-related, other than that when designing/modifying themes, the firefox extension below is abso-bloody-lutely fantastic. It shows the current page's markup in a clear and tidy display, with block-level elements nicely colour-coded so you can see what is where.

    Anyway, enough said, check out Jennifer Madden's 'view source chart' here: https://addons.mozilla.org/en-US/firefox/addon/655

    (more info and screenshots here: http://jennifermadden.com/scripts/ViewRenderedSource.html)

    enjoy!

    - John

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Neat, but I don't think it's quite as useful as the DOM Inspector. That gives you the same information in a more concise hierarchical list format.

  3. Observadora
    Member
    Posted 7 years ago #

    Otto42,
    exactly how does the DI give the info in a "more concise hierarchical list format"?

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Well, they appear to display the same basic information. Except the DI uses a hierarchical, expandable, list. So it doesn't have to space things out visually.

    If you have used the DI, you know what I'm talking about. It's extremely handy. When you select something in the DI, for example, that thing flashes on the webpage with a red border around it, telling you exactly where it is. And so on.

  5. Observadora
    Member
    Posted 7 years ago #

    The chart extension is also hierarchical, but starts out with all elements expanded, then allows you to collapse elements -at any place in the hierarchy- to drill down to the element you want to focus on. This is much more efficient than having to click every single parent element, one by one, starting with the opening HTML tag before I can even see the element I want to examine.

    Also, the chart's color coding tells you the exact type of element each containing element is, just by looking to the element's left. With DI, you're forced to follow one of many dashed gray lines up, usually while scrolling, in order to read the tag. Far too easy to lose your place. And you have to repeat this process for each and every containing element. Ridiculously cumbersome.

    In a chart, you can collapse any one of those containing elements from the same place in the viewport, no scrolling up to click on its tiny "-".

    While I agree the flashing border on the chosen element is a feature the chart doesn't have, I've never found it to be useful because you have to click the icon to activate that feature every time. There are several other extensions which do a much better job of providing that shortcut to an element's code equivalent. (firebug, aardvark, platypus, to name a few)

    There are a lot of requests for DI improvements and hopefully they will happen soon. Otherwise, I think users will keep abandoning it for more useful extensions.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    This is much more efficient than having to click every single parent element, one by one, starting with the opening HTML tag before I can even see the element I want to examine.

    I always just use the search functionality to go right to the element I want, but whatever works for you, I guess.

    Also, the chart's color coding tells you the exact type of element each containing element is, just by looking to the element's left. With DI, you're forced to follow one of many dashed gray lines up, usually while scrolling, in order to read the tag. Far too easy to lose your place. And you have to repeat this process for each and every containing element. Ridiculously cumbersome.

    I don't really understand this objection. Nesting is not difficult to see at a glance.

    In a chart, you can collapse any one of those containing elements from the same place in the viewport, no scrolling up to click on its tiny "-".

    I've never considered "clicking" to be extremely difficult.

    While I agree the flashing border on the chosen element is a feature the chart doesn't have, I've never found it to be useful because you have to click the icon to activate that feature every time.

    Ummm. It's a menu option, actually. And it's activated by default for me. I've never had to activate it manually.

    There are several other extensions which do a much better job of providing that shortcut to an element's code equivalent. (firebug, aardvark, platypus, to name a few)

    Good for them.

    There are a lot of requests for DI improvements and hopefully they will happen soon. Otherwise, I think users will keep abandoning it for more useful extensions.

    Hey, look pal, I wasn't trying to step on your favorite thing here. But I looked at this extension, and I like DI better. Perhaps you don't. There's room in the world for more than one thing, you don't need to get all defensive just because I don't like something that you do.

    Chill.

  7. whooami
    Member
    Posted 7 years ago #

    if i didn't know any better I would say that someone has a personal vested interest in what people think of that extension -- new poster, one thread. hmmm... :P

    at any rate, its nifty, I suppose, especially if you have trouble reading source, which judging by the vast majority of posts on this site, a good deal of ppl do.

    Personally, Im with otto, i prefer the dom inspector, or even the web-dev extension.

  8. Observadora
    Member
    Posted 7 years ago #

    Apologies, mate.
    I didn't mean to come across as combative, I'm just far too inquisitive to be satisfied with a blanket "It's better" statement.
    Sincerely, I enjoy learning and thought perhaps I'd missed something regarding my experience with DI, so that is why I enquired about your reasoning - it wasn't to question you personally. Likewise, I enjoy teaching others and thought I'd share my reasoning.

    Three cheers for DI!

  9. nakedape
    Member
    Posted 7 years ago #

    Thanks Obsevadora, Otto and Whooami for your insights (be they somewhat heated :P)!

    I've uninstalled and reinstalled firefox 2 to go with the custom install required (? i believe) to install the DI. I love that with ff2 the profile is not uninstalled! No more restoring add-ons and bookmarks.

    I've tried out the DI and at first glance it does seem more cumbersome to me, but I guess I'll have to give it some more time and delve a little deeper :)

    - John

Topic Closed

This topic has been closed to new replies.

About this Topic