Full Page History:
Oldest known version of this page was edited on 2007-07-19 11:05:23 by Gt500? [Fixed broken link to W3-Dev Menu.]
Page view:
Web Developer Toolbar & Menu for Opera
The web developer toolbar is a menu and toolbar setup for Opera which brings together functions related to web development, validation services and links to standards and other documentation. It integrates parts of Toby's W3-dev Menu, MooseCSS's menu, and countless BookMarklets taken from various places (Jesse, Aleto, SlayerOffice, Tarquin and others).
The current public version (V1.2/V1.5) has been developed for Opera V8.0 Final or later (you must install the menu file; the toolbar is recommended though if you use Pick'n'Mix below you can customise your own buttons):
You can also try a more extreme micro version (everything on one toolbar moved above the tabs, lots of changes made, and a menu dropdown to allow turning off the menu bar): Install Web Developer Micro Toolbar.
Instructions for Use:
Simply click the links above to auto-install the toolbar and menu. The visibility of the toolbar is toggled by the view bar toggle button present on the far-right of the default address bar:
If you don't have that button in your customised setup, drag this one to a toolbar: View).
To uninstall/deactivate: simply go to Preferences » Advanced » Toolbars and select your old toolbar and menu files. You can delete the files to remove them completely.
To see customised toolbar images, you need to use the following skins: any BreezeSkin, any TTT Skin, KDE HighCrystal, Tango CL, I-Silver, Expedition or Opera Standard Compact.
Important: Many toolbar functions are powered by javascript. They will temporarily affect the display of the active page. To reset these temporary effects, use the "Reset Page" button on the far-left of the toolbar (which is a 'refesh display' in Opera speak).
Pick'n'Mix
Opera allows CustomButtons to be dragged from a page to your user interface. If you would rather have the chance to select which buttons you want, drag the following buttons to a toolbar (my toolbar uses the View toolbar as it is easy to toggle on/off, but you can use another if you prefer):
- All the functions in a single menu: Dev
- Page Info functions: Page Info
- Forms function: Forms
- Utility Functions: Utils
- Validation Functions: Validate
- Specs Links: Specs
Included functions:
Here are some of the functions currently available (any bookmarklets not attributed to an author are probably from Jesse's site):
Styles
Opera has very powerful User Style functionality. You can remix any site and add useful debug displays. Please make sure you set your CSS modes to:
- Shows the UserCSS menu already built into Opera — this includes many useful debugging functions for developers.
- Toggle a variety of style systems on and off. You can toggle between author/user; toggle user applied styles no matter what mode you are in and toggle form styling.
- View Computed CSS for Elements - see computed styles of any page element by hovering over it, and the HTML source by clicking it (author: aleto).
- Add new CSS styles to a page dynamically - brings up a new window to allow you to enter new CSS for the active page (author: aleto).
- View specific screen resolutions - you need to unmaximise the page first.
- Change font/size temporarily to see how the page looks with new fonts/font sizes.
Page Info
- See Internal/External links - changes colour of internal and external links.
- DOM/CSS Inspector - uses an external script so you will need to wait to see it's effect (author: aleto).
- View Page HTTP header - adds a layer at the top of the document with the HTTP header, uses an external javascript so wait a second to see the result (author: Slayeroffice)
- Get Page Meta Data.
- Reveal Hidden Named Anchors.
- See ancestors - hover over page elements to see their ancestors in the status bar.
- Check Quirks Mode.
- See Generated Source - Very useful to see the result of a javascript manipulation of a page (author: aleto).
- HTML Tree w. Attributes.
- HTML Attribute Viewer. Overlays the page with a list of all elements with attributes (author: Slayeroffice)
- See HTML Comments.
- See Element Nesting - shows the different levels of nested elements in a page with progressively different shades of grey.
- See Object Dimensions.
- List Frames.
- View cookies and set their expiration
Utilities
- Highlight Text (using a RegExp).
- Mark Different Text on a Page (currently broken)
- Convert Links to footnote's (for printing).
- Simple Calculator - (author: aleto).
- Javascript Shell - Allows entering of javascript and seeing currently set variables (author: aleto)
- ASCII Table - generated using javascript.
- Escape a text string.
- Character Map - For windows only, links to the charmap.exe.
- The Data:URI Kitchen - A very useful resource to encode content as embeddable URIs.
- Tidy HTML An online version of HTML-Tidy.
Forms
- Convert forms between GET and POST - allows POST forms to convert to using GET and vice-versa.
- Show form info for all forms on a page - rewrites page to display info for each form.
- Show hidden form elements - Shows hidden form elements on a page.
- View passwords hidden behind *'s in form fields.
- Modify hidden form elements - (author: Slayeroffice)
- Add a character counter to text area's.
- Convert between dropdowns and lists.
- Toggle checkboxes.
Images
- Click on an image to generate a HTML link to that image.
- Show all images in a new page.
- View all ALT attributes as TITLE.
Standards
There are copious links to most relevant standards and also links to tutorials and web developer sites etc. (thanks to Toby's and MooseCSS's great work).
Validation
Links to most of the current validation and web developer services are available.
OTHER TOOLS FOR DEVELOPERS:
HTTP Headers:
An invaluable tool for web developers is a HTTP header viewer. One of the most powerful HTTP header viewer around is TheProxomitron, a (rewriting) web proxy. It allows you to view all HTTP headers sent between server and browser (including POST data), even if the content is encrypted or compressed. Additionally it can rewrite ingoing and outgoing headers on-the-fly using a specialised RegExp language, allowing fast debugging of HTTP.
Another great choice is FiddlerTool?, a rewriting web proxy from Microsoft. It is very powerful, thogh you need the .NET framework installed.
If the actual packets are needed, Ethereal is an excellent multi-platform packet capturing application.
Developer Panels:
- CSS 2.1 Spec Panel
- HTML 4.01 Spec Panel
- XHTML1.1 DTD Panel
- Unicode Panel
- HTML Entities
- Javascript Console - Info on modifying and integrating JS console as a panel.
Other Tools:
- Aleto (who has made several of the above functions) has some more amazing advanced developer bookmarks available: DOMConsole, InnerHTML Viewer, Computed Styles viewer and others.
- Guille has made a colourblind test-suite modification for this menu: Get it here...
- DocInspector?, a UserJS based JavaScript inspector, DOM Inspector, and (limited) debugger: Get it here...
- Opera have now developed their own DOM/JS/CSS/HTML/HEAD Inspector. It is available from http://dev.opera.com/tools/ and should work from v9.0 onwards.
MISC TIPS:
Remember you can use "See HTML" in Opera, then edit it, and switch back to Opera and click reset display to see your changes locally. CSS is the same, although you must manually "View Source" to edit it first. There is a function in the display menu to open up all linked stylesheets.
For V7.5, you can use the older V0.9: Toolbar & Menu
Rough Changelog:
0.2:
- Added reload to document popup
- Fixed browser menu
- Added aleto's excellent computed styles JS
- Other small fixes
0.3:
- Added Aleto's latest computed styles doodaa.
- Had to remove the javascript shell due to Opera bug.
- Added RSS validator and Cynthia says.
- Marked broken tools.
- Added a MICRO version of the toolbar, and a power menu with everything in one menu/button.
- Other small fixes.
0.4:
- Changed the CSS adder to Aletos new style that is similar to the JS console
- Rearranged the Customise Toolbar custom buttons.
- Added Nested view - http://www.make-believe.org/posts/04/04/01/0
0.5
- Updated for Opera V7.5BETA1.
- CSS3 Menu from Moose Updated.
- Added Open in External viewer for images - you'll need to change the path to your image viewer.
- Added the proxomitron menu, disabled by default.
- Other little things.
0.6
- Updated to Toby's 1.21 release
- Compatible with 7.5 Final
0.7
- Removed the panel header bar on MICRO, and moved the maximise/close icons to the panel toolbar.
- Made the 'maximis'e panel button actually minimise the panel so the management page that pops up takes full width.
- Added elapsed time to Full toolbar and added icons if skin is compliant.
- Reduced text length on MICRO to fit better with non-compliant skins.
- Rejigged the Custom buttons dialog contents.
- Other little bits.
0.8
- added a copy URL to clipboard entry to inactive tabs.
- Updated to Toby's V1.22 menu. http://tobyinkster.co.uk/opera
- Added Aleto's amazing DOM/CSS console http://aleto.ch/webTools/webBMs.html
- Changed generated source viewer to aleto's faster one. http://aleto.ch/webTools/webBMs.html
- Changed default of URL toolbar position to Address bar as more compatible with unregistered users; you can turn off address and on main to get back.
0.9
- Added some more skin colouring options
- Added a view button back to history - why it was removed by Opera is a mystery...
- Added slayeroffice page statistics function
- Added Execute HTML function - select HTML code on a page and 'execute it' - from http://subsimple.com/bookmarklets/collection_developer.asp
- Added Show HTML comments
- Added reveal real URL's
1.0
- Added remove children from slayeroffice
- Fixed See generated source - Aleto's data:uri method was breaking on some pages so reverted to squarefree version
- Finally decided to add to the main menu bar.
- Fixed the Size menu to work even on maximised pages.
- Synched with Toby's V1.30 menu and Moose's new setup.
- Added LuChio's multi-word highlight to utilities
- A myriad other little fixes
- Added http://www.prettyprinter.de/ to utilities
- Added a page font-changer menu.
1.11
- Readded Slayeroffice's moseover DOM inspector.
- Decided to add a PageRank? button.
1.2
- The toolbar now works irrespective of the "Reuse existing page" preference.
- Added a change page font menu in the display menu.
1.6
- Updated for compatibility with V9, and changed the toolbar so it only affects the Viewbar, nothing else.
- Updated several functions to latest versions.
1.61
- Fixed validation links
- New function - view javascript variable on page
- New function - Edit Existing CSS as we now have DOM2 Style support yay!
- DOM/JS menu taken from Toby's latest menu.
TO DO:
Any help appreciated!