Панель инструментов веб-разработчика и меню для Оперы

Панель инструментов веб-разработчика - это меню и панель инструментов для Оперы, которая объединяет в себе функции веб-разработки, службы валидации и ссылки на веб-стандарты и другую документацию. Она интегрирует (включает в себя) части меню разработки w3c W3-dev Menu, MooseCSS's меню и бесчисленное количество участков кода, собранных из различных источников(Jesse, Aleto, SlayerOffice, Tarquin и другие).

toolbar screenshot

Текущая публичная версия (V1.2/V1.5) была разработана для Opera V8.0 Final или более поздней версии (вы должны установить файл меню; Также рекомендуется установить панель инструментов, однако если вы используете Pick'n'Mix, вы можете настроить свои кнопки):

Меню веб-разработчика (обязательно к установке)для Opera 8 | Opera 9 &
Панель инструментов веб-разработчика для Opera 8/9

Также вы можете испытать микроверсию панели иструментов(она располагается над вкладками и включает в себя выпадающее меню): Установить микро-панель инструментов веб-разработчика.

Инструкция по использованию:

Просто кликните по ссылкам, приведенным выше, для автоматической установки панели инструментов и меню. Отобразить панель инструментов можно с помощью кнопки, которая располагается справа от адресной строки :

toolbar screenshot

Если у вас нет такой кнопки, перетащите ее на панель инструментов из следующего места Инструменты - Оформление - вкладка Кнопки - пункт Браузер:просмотр: View).

Для удаления/отключения панели инструментов: перейдите к Инструменты » Настройки » Дополнительно » Панели и выберите вашу предыдущую панель инструментов и меню. Для полного удаления панели и меню вы можете удалить файлы.

Для настройки внешнего вида панели инструментов вы можете использовать следующие скины: BreezeSkin, TTT Skin, KDE HighCrystal, Tango CL, I-Silver, Expedition или Opera Standard Compact.

Внимание: Многие функции панели инструментов выполняются с помощью javascript. Они могут временно влиять на отображение текущей страницы. Для сброса этих временных эффектов, используйте кнопку обновить.


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):

Included functions:

Here are some of the functions currently available (any bookmarklets not attributed to an author are probably from Jesse's site):


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:

presentation modes

Page Info





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).


Links to most of the current validation and web developer services are available.


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:

  1. CSS 2.1 Spec Panel
  2. HTML 4.01 Spec Panel
  3. XHTML1.1 DTD Panel
  4. Unicode Panel
  5. HTML Entities
  6. Javascript Console - Info on modifying and integrating JS console as a panel.

Other Tools:

  1. 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.
  2. Guille has made a colourblind test-suite modification for this menu: Get it here... custom essay writing
  3. DocInspector?, a UserJS based JavaScript inspector, DOM Inspector, and (limited) debugger: Get it here... resume
  4. Opera have now developed their own DOM/JS/CSS/HTML/HEAD Inspector. It is available from http://dev.opera.com/tools/ custom writing company and should work from v9.0 onwards.


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:


  1. Added reload to document popup
  2. Fixed browser menu
  3. Added aleto's excellent computed styles JS
  4. Other small fixes


  1. Added Aleto's latest computed styles doodaa.
  2. Had to remove the javascript shell due to Opera bug.
  3. Added RSS validator and Cynthia says.
  4. Marked broken tools.
  5. Added a MICRO version of the toolbar, and a power menu with everything in one menu/button.
  6. Other small fixes.


  1. Changed the CSS adder to Aletos new style that is similar to the JS console
  2. Rearranged the Customise Toolbar custom buttons.
  3. Added Nested view - http://www.make-believe.org/posts/04/04/01/0


  1. Updated for Opera V7.5BETA1.
  2. CSS3 Menu from Moose Updated.
  3. Added Open in External viewer for images - you'll need to change the path to your image viewer.
  4. Added the proxomitron menu, disabled by default.
  5. Other little things.


  1. Updated to Toby's 1.21 release
  2. Compatible with 7.5 Final


  1. Removed the panel header bar on MICRO, and moved the maximise/close icons to the panel toolbar.
  2. Made the 'maximis'e panel button actually minimise the panel so the management page that pops up takes full width.
  3. Added elapsed time to Full toolbar and added icons if skin is compliant.
  4. Reduced text length help writing on MICRO to fit better with non-compliant skins.
  5. Rejigged the Custom buttons dialog contents.
  6. Other little bits.


  1. added a copy URL to clipboard entry to inactive tabs.
  2. Updated to Toby's V1.22 menu. http://tobyinkster.co.uk/opera
  3. Added Aleto's amazing DOM/CSS console http://aleto.ch/webTools/webBMs.html
  4. Changed generated source viewer to aleto's faster one. http://aleto.ch/webTools/webBMs.html
  5. 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.


  1. Added some more skin colouring options
  2. Added a view button back to history - why it was removed by Opera is a mystery...
  3. Added slayeroffice page statistics function
  4. Added Execute HTML function - select HTML code on a page and 'execute it' - from http://subsimple.com/bookmarklets/collection_developer.asp
  5. Added Show HTML comments
  6. Added reveal real URL's


  1. Added remove children from slayeroffice
  2. Fixed See generated source - Aleto's data:uri method was breaking on some pages so reverted to squarefree version
  3. Finally decided to add to the main menu bar.
  4. Fixed the Size menu to work even on maximised pages.
  5. Synched with Toby's V1.30 menu and Moose's new setup.
  6. Added LuChio's multi-word highlight to utilities
  7. A myriad other little fixes
  8. Added http://www.prettyprinter.de/ to utilities
  9. Added a page font-changer menu.


  1. Readded Slayeroffice's moseover DOM inspector.
  2. Decided to add a PageRank? button.


  1. The toolbar now works irrespective of the "Reuse existing page" preference.
  2. Added a change page font menu in the display menu.


  1. Updated for compatibility with V9, and changed the toolbar so it only affects the Viewbar, nothing else.
  2. Updated several functions to latest versions.


  1. Fixed validation links
  2. New function - view javascript variable on page
  3. New function - Edit Existing CSS as we now have DOM2 Style support yay!
  4. DOM/JS menu taken from Toby's latest menu.


Any help appreciated!



There are 249 comments on this page. [Display and/or add comments]