Can anyone suggest some good browser add-on tools/extensions to help with development? I have firebug installed in Firefox which is great for dealing with CSS, HTML and javascript; any other suggestions?
+2
A:
The other must-have for Firefox is Chris Pederick's Web Developer Toolbar.
John Topley
2008-08-20 08:11:36
+1
A:
Developer Console and DOM Snapshot for Opera:
Awesomeness is that these are bookmarklets implemented with JS. Suckiness is that they require the Internetz.
Ishmaeel
2008-08-20 08:13:09
+8
A:
For Firefox:
Firebug is awesome for investigation and development.
Web Developer Toolbar is good also. Really helps with CSS and page layout stuff as well as much more.
I also use Live HTTP Headers (I think it is called, but it is on my work machine, so can't find the link now). Which has helped us out with caching issues and the like.
I do a lot of mobile phone development, so I also use UserAgent Switcher. Very helpful for pretending to be different mobile phones.
I tend to only use Firefox for development, and just test in other browsers as most do not have the extensive range of plugins to aid development that Firefox does.
Xetius
2008-08-20 08:22:05
+2
A:
You should definitely install Safari. It has a number of tools built-in. I use it in combination with other browsers all the time.
- Network Timeline
- Error Console
- Web Inspector
- Snippet Editor
Plus it lets you set the user agent for your requests.
Consider this, it has a separate top-level menu called Develop.
Vaibhav
2008-08-20 08:36:19
+5
A:
Firefox:
- Inspect This if you use the DOM Inspector at all
- Measure It for telling you pixel distances (if you need that)
- IE View or Safari View for ease of testing in other browsers
- HTML Validator if you care about validation
- Console2 to improve your js error console
- The Javascript Shell bookmarklet is also handy (and look at the others there as well)
Edit: This is in addition to the Web Development Toolbar mentioned by others
Cebjyre
2008-08-20 08:46:13
+2
A:
In case of IE, next tools can be useful
- Microsoft Developer Toolbar - dom|styles viewer
- Fiddler HTTP Debugger - http monitor
- Instant source - dom|styles viewer
- IE DOM inspector - dom|style viewer, http monitor
- Companion.JS - dom|styles viewer, extended error console
The "uber" extension for IE - "Developer Tools", provided as a part of IE8
Aquatic
2008-08-20 08:49:14
+1
A:
Firefox:
Inspect This if you use the DOM Inspector at all
Measure It for telling you pixel distances (if you need that)
IE View or Safari View for ease of testing in other browsers
HTML Validator if you care about validation
Console2 to improve your js error console
The Javascript Shell bookmarklet is also handy (and look at the others there as well)
This is in addition to the Web Development Toolbar mentioned by others
This list by Cebjyre is nearly complete (since FireBug was already mentioned in the question). I would only add Tamperdata. From time to time it is very useful.
Mo
2008-08-20 09:28:33
+2
A:
Opera has:
Dragonfly (tools -> advanced -> developer tools)
UserJS methods for intercepting things
opera:config#CompatMode%20Override for forcing quirks or standards mode
You can view source of files, edit them, apply changes and reload from cache.
Shadow2531
2008-08-20 09:49:29
A:
Other than the excellent tools already mentioned, I find Charles to be extremely useful. Especially since I do alot of work with Flash Remoting which it handles excellently.
Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.
It's crossplatform, costs $50, but there's a "30 minute per session"-evaluation you can download.
grapefrukt
2008-08-20 11:20:14
A:
Here's what I use:
Firefox:
- DOM Inspector: I use this more than anything else for web development
- Launchy: for opening sites in other browsers/apps
- Tamper Data: this can be helpful for debugging GET/POST requests
- Web Developer Toolbar: this has so many handy features for debugging: the W3C validation tools, built-in ruler, resizing tools, source manipulation, easy cache/css/script tools
IE:
- Internet Explorer Developer Toolbar: nowhere near as handy as the Firefox one, but at least it gives you a decent DOM Inspector
Misc:
- Jesse's handy bookmarklets: the shell bookmarklet is especially handy
- I also install Safari and Opera, but mostly just use them for testing and benchmarking since their dev tools aren't as robust as Firefox, and they aren't as buggy as IE.
- Lynx: I use this to make sure that any JS-heavy sites still work so that I'm sure they'll look OK to google, screen readers, and any other bot-like app.
travis
2008-08-24 16:43:05