Top 9 most useful web developer tools for Opera


Originally posted in my old blog at My Opera

Firefox has some tools for web developers, such as the excellent Firebug. But what does Opera have? Here is a list of top 9 developer tools for Opera – I bet you can’t find these from Firefox.

These are not in any particular order.

  • URL bar search: Not exactly a developer tool, but this is definitely useful. For example, if I need to look up a PHP function, I can simply type “php functionname”, because I added the PHP manual search as a URL bar search. It’s easy to create your own searches: Just go to the website which has the searchbox you want to generate a URL bar search for, right click the box and choose Create Search.
  • Opera Developer Tools: Not as complete package as Firebug, but does its job quite well. Developer tools can be found from Tools-Advanced-Opera Developer Tools
  • On-the-fly source editing: If you view the source of a page, Opera lets you edit it and refresh it, so that it changes the page on the fly. Very useful for testing form validation stuff – just disable client-side validation with the source editor and you can submit any kind of data you want to test if the server handles them properly. Just right click the page you want to edit, choose “view source”, do your edits and then click on “Refresh” in the source viewer.
  • Error console: Opera’s error console gives probably the most detailed error messages of all browsers. It displays CSS problems, JavaScript errors and exceptions amongst other things. You can access the error console from Tools-Advanced-Error Console
  • CSS panel: Gives you a complete quick list of anything CSS. The specs are just a click away. Very useful when working with CSS as I often tend to forget the order of things in the properties. You can find the CSS panel from Opera Panels by the name of CSS 21
  • JavaScript reference panel: Quick reference for JavaScript, again seated in the panels in Opera. Nice for looking up something quickly. This can be found from Opera Panels as well, by name JS 1.5.
  • Info panel: This one is a built in panel in Opera. It displays information about the current page, such as which mime-type headers the server sent and which content encoding is used. Very useful for figuring out why your site’s special characters such as scandinavian letters are displaying wrong, which is often caused by bad content encoding headers.
  • Small screen rendering: Want to see how your page looks like in a mobile phone or other device with a small screen? No problem, just go to the View menu and tick “Small screen” to see how the page you have open could look like in a small screened device.

Armed with tools like this, web development and finding problems in CSS and such is simplified a lot. If you think there’s some tool I forgot to mention, please post it to the comments.