tags:

views:

166

answers:

9

What's the best free IDE/Editor for working with CSS and HTML which has thousands of divs and its really hard to see which div is connected to what? Such as if it could highlight the corresponding divs, or show a +/- sign next to them to expand/collapse them?

A: 

I would suggest the Eclipse IDE with the Aptana Studio plugin. Nice highlighting for matched tags, tag insight, etc.

Steve -Cutter- Blades
Also if you're using Eclipse you can, select all, right click and select source->correct indentation. It will probably help a lot to see the correct indentation.
Cameron
+1  A: 

vim with "%" when highlighting a <div> or </div> does easy matching. There is probably a plugin for code folding as well. It is also fast, which is helpful for monstrous text files.

Ben Hughes
+7  A: 

I like to use firebug in firefox for identifying issues such as the one you are describing. Then I can see clearly what the browser is rendering and click directly to the code that is causing the rendering. A must have (with so many other features).

I agree with @scunliffe though : "thousands of divs" scares me!

Andrew Siemer
+1  A: 

Just download a cracked copy of Dreamweaver CS4 like the rest of us.

@Cameron - ctrl + Shift + f

amischiefr
But Dreamweaver's probably what got him in this bind in the first place!!!
jacobangel
True, so very true.
amischiefr
no, its hand written code i believe
Click Upvote
A: 

A lot of free IDEs will do that. I know for a fact that Komodo Edit does exactly what you describe right out of the box.

jacobangel
+5  A: 

Notepad++ or Eclipse can do the highlighting/collapsing you mentioned. Firebug can show you which ones are which in a more interactive manner. A quick run through the W3C validator would ensure there aren't any mismatched tags in it, too. Couldn't hurt.

Overall though, that's just an "ouch" situation. If you have any connection to the people that created that mess please encourage them to clean it up ASAP. It'll make everyone happier and their page load faster.

Gabriel Hurley
A: 

NuSphere PhpEd has code folding for HTML.

Eli
A: 

oXygen's xhtml support does this sort of thing. Specifically, it provides code folding and also parses the xhtml code to provide features like highlighting matching divs. You can also run ad-hoc XPath statements against your source as a form of regexp grep better suited to XML documents. I've also found that their code-completion is very smart.

Harold L
A: 

Apart of collapsing the div, you may find interes in a beautify tool like this shareware, open-source C program named "Tidy" which lives at the venerable W3C, at http://www.w3.org/People/Raggett/tidy/

Elzo Valugi