I just came across Opera's own collection of web development tools on the Opera Development Community site.  I'm really impressed with what they were able to achieve just using Javascript.  The current collection includes DOM Console, CSS Editor and DOM Snapshot. 

The DOM Console displays a cascading breakdown of the page a page and I expect it to be very useful to dig my way through the header section of a page and retrieve its link URLs or copy the title of a page without having to view the source of that page.  And clicking on a spot on a page will automatically highlight that section in the DOM Console.  Brilliant!

The CSS Editor will definitely be my favorite tool as it provides you with a way to identify, view and edit all CSS code for a site.  It even picks up when you've imported a style sheet and let's you view its code also.  Your edits are reflected immediately in the site.  You were always able to edit a sites CSS in Opera by viewing the source for the file and saving, but it was a significant chore to locate the CSS file you needed to edit.

And DOM Snapshot allows you to view the source for a page as it has been rendered by a browser.  This is handy to see the HTML that is being generated from a Javascript function when you would otherwise just see a function call.

One tool I felt for sometime was missing from Opera was the "View Selection Source" that Firefox has.  In Firefox this allows you to highlight a section of a page and view the HTML source for just that selection.  And fortunately someone else has written a Javascript function for Opera that does exactly that.

If you're serious about web development I highly recommend you try Opera with these tools.  Firefox has similar tools, but I definitely like the Opera versions better.