The 'Debug Menu' and the new weekly

June 9, 2008 · by shwetankdixit

Today we are releasing the ‘Debug Menu’ targeted at all you web developers out there. This menu is meant to complement Opera Dragonfly and provide web developers with a better experience with performing common tasks.

The goal of the debug menu is to bring developer specific functionality already present in the browser in one place, further enhanced with some extra features and reference materials.

Extra features include:

Open Opera Dragonfly (you might find this easier, instead of going to tools->advanced->developer tools every time you want to open Opera Dragonfly)
Validate HTML5
Validate CSS2.1 and CSS3
Get an Accessibility and Section 508 report.
Check for broken links.
Check how your page will display in Opera Mini
Check the rendering mode of your page
Reload all images (without reloading the page).
Check Alexa rank and Compete.com traffic analysis
Documentation on HTML4.01, CSS2.1, XPath, XSLT and Unicode.
Check WHOIS information

How to install
Just click here to download the Menu.

Requirements
It should be used in the latest Opera 9.5 beta build. You can download the latest Opera 9.5 beta build from here.

Customize and build on it

Check out the links below on how to make your own .ini file for a custom menu. You can use the same information to edit this .ini file and add/remove/change the settings.

http://operawiki.info/EditingINIFiles
http://operawiki.info/AdvancedToolbarINIGuide

You are not limited by just this Menu. You can download other toolbars, menus and setups as well, that are made by Opera fans.

Have fun with the menu!

Newest Opera Dragonfly Weekly now live
You can download build 08-06-09-15-30. Bug fixing was the major focus of this weekly release, and here is changelog detailing all the fixes.

One of the major changes is that now Opera Dragonfly can remember its state. Attached or detached.

As mentioned in previous posts as well, automatically updated weekly builds can be found at https://dragonfly.opera.com/app/weekly/. Update the URL by going to Opera:Config -> Developer Tools -> Developer Tools URL . This way you can always automatically get the latest updates.

Readers' comments 35

Left under the original article, as archived.

ytsmabeer9. June 2008, 14:18:13
Nice verry nice.
The menu is just wat I need
johnnysaucepn9. June 2008, 14:23:46
Very, very useful.
luinnar9. June 2008, 15:18:38
Great! Good job!
Darken9. June 2008, 16:05:54
Excellent, good job!
Schalandra9. June 2008, 17:10:15
Very cool!
fearphage9. June 2008, 19:15:42
Very nice.

Here are some buttons:
Error Console button that you hold and get the new dev menu
Toggles dev console attached and then closed
shwetankdixit9. June 2008, 19:27:40
@fearphage: Sweet
shoust9. June 2008, 20:01:48
Perhaps its a good suggestion to include it in the default menu setup and allow invokation in the dev tools
Chas49. June 2008, 22:56:09
Sweet

the link checker is very nice add
mrmass10. June 2008, 02:09:09
I really like how Dragonfly is coming along
Schalandra10. June 2008, 06:27:55
Stupid question: How do I get Dragonfly back into a seperate window? I have a dual-screen system here and often used Dragonfly on my second screen. I'm sure I could find that in the .ini-documentations above, but it's still pretty early and I'm just having my first coffee.
shwetankdixit10. June 2008, 07:21:31
@Schalandra Just click the button next the to close button to undock Opera Dragonly into a new window.

To give you an idea here is a screenshot

http://files.myopera.com/shwetankdixit/files/dragonfly.jpg

When in a new window, if you click it once again, it will return and dock back to the main window.
Big_Z10. June 2008, 07:35:49
What do you think about this setup of Opera Dragonfly?

http://files.myopera.com/Big_Z/files/wazka.png
Schalandra10. June 2008, 09:07:27
Something has gone wrong with my Dragonfly. I can use all new features using the new menu, but I still have the old layout (so there is no button to put Dragonfly in a seperate window, the tabs are still "Script", "DOM" and "Console"). Any ideas?
shwetankdixit10. June 2008, 10:27:06
@Schalandra: Do you have the latest build and the latest Opera Dragonfly weekly? You can download the latest build by going here http://my.opera.com/desktopteam/blog/.

You can download the latest Opera Dragonfly weekly by going to Opera:Config -> Developer Tools -> Developer Tools URL and setting it as https://dragonfly.opera.com/app/weekly/ .

If the problem persists, can you also check on a clean install?
xErath10. June 2008, 12:49:33
When the dev tools are closed the 1st entry in the menu says "Open Opera Dragonfly", but when the dev tools are open is says "Close Developer Tools".

Opera does not remember the dev tools window position and size.
Like
1) open the dev tools
2) detach window
3) resize window
4) close and open it gain
The window has the size and position at step 2 and not step 3
d.i.z.10. June 2008, 14:43:08
I think it should have "Open Error Console" item.
I know that dragonfly has it's own console but in some situations it's easier and faster to open normal console.
robodesign10. June 2008, 15:53:27
Nice stuff. Sorted by importance, I'd like to see more options in the Debug menu:

1. Disable/enable cache.
2. Resize window to 1280x1024, 1024x768, 800x600 and 640x480.
3. Validate feeds.
4. Some forms-related bookmarklets. e.g. convert GET/POST forms, enable all fields, show passwords, etc.

The Web developer toolbar addon for Firefox provides additional options I like.
fearphage10. June 2008, 18:05:43
Originally posted by robodesign:
Resize window to 1280x1024, 1024x768, 800x600 and 640x480.
Many web devs would love this. This hits a lower level problem that Opera can't resize maximized windows currently... not via js at least.
shwetankdixit10. June 2008, 18:16:21
@d.i.z. : Interesting...

@robodesign: good suggestions

Nice thoughts all....don't stop ... keep 'em coming!

What more would you like?
Cyro10. June 2008, 18:26:12
Morphinomenal menu! Gotta love it!
aleto10. June 2008, 19:29:17
Originally posted by fearphage:
Many web devs would love this. This hits a lower level problem that Opera can't resize maximized windows currently... not via js at least.

it works with some tricks ( as menu item ):

Item, "800 x 600" = Maximize page & Restore page & Go to page, "javascript:window.resizeTo(800,600);", , ," "
edbj11. June 2008, 01:55:01
1. As others have noted, the attached/detached state isn't remembered.

2. I'm confused about what I'm supposed to do with the new downloaded
weekly versions. I presume I'm supposed to put either the zip file
someplace, or extract the files to some location, but I don't know
where. Help!

3. I wish I had know someone was working on the debug menu. I recently
finished an almost identical menu (we all ripped from the same sources).
Anyway, my 'developer menu' is a bit more comprehensive then the debug
menu. I also built a custom toolbar that anyone can play with. These may
be downloaded as:

http://www.edbjay.com/EdsDevMenu.ini

http://www.edbjay.com/Eds_Toolbar.ini

The menu includes launching IE/FF/Safari, but are keyed to my local
paths, and thus need to be edited for each system.

OK, I've paid for my clue...what do I do with the downloaded Dragonfly file?
nolovelust11. June 2008, 08:20:16
how can i add this Deeveloper menu to document popup menu (right click) ?
shwetankdixit11. June 2008, 08:27:18
@edbj: The zip file is there only for those people who want to see the source. Otherwise you don't really need the zip file.

You need to update Opera to use the Opera Dragonfly weekly build. To update to the new weekly build, just update the Developer Tools URL. Check above for details on how to do it.

Good job on the menu and toolbar We will cetainly be adding some stuff in the near future to the debug menu as well. The plan is to initially release it, get some feedback, build on it more so that we don't end up with overkill, but with just enough features that web developers commonly need. We want it to be compact and effective.

Also, the intention is to complement Opera Dragonfly. Hence some features (like http headers inspection etc, and many more) will be there in Opera Dragonfly rather than the Menu.
edbj11. June 2008, 15:21:06
1. nolovelust: "how can i add this Deeveloper menu to document popup menu
(right click) ?"

If you're asking about my Developer menu, it's already in the document popup menu.

2. shwetankdixit: Thanks for the info. As to D/F, etc., you guys are doing
a fantastic job. Thanks.
Lex111. June 2008, 22:18:32
1) What about adding "Show source code of selection"? It's standard function of other browser . For instance, you can use this js-code for menu.

2) Menu [Reload_o Menu] looks a good place for
```
Item, "Reload stylesheets" = Reload stylesheets
```
3) «Item, "Rendering Mode"» - it already is in sidebar Info
Schalandra12. June 2008, 07:44:53
@shwetankdixit
I made a clean install of Opera and updated the Dragonfly to weekly. Restarted PC and now it works. Thanks for your help and patience.
SailorMax12. June 2008, 10:13:33
Alt-D is a hotkey for focus address field, but with this new Debug-menu it is Debug-menu... I think this is not good... May be you'll change it?
edbj12. June 2008, 21:22:05
Lex1: "What about adding "Show source code of selection"?"

Use this user javascript:
http://www.webkitchen.cz/lab/opera/get-selection-source.js
shwetankdixit12. June 2008, 22:05:43
@SailorMax: I hear ya

@edbj: Hmmm... Looks like many people want this...

what else would you guys want?
robodesign13. June 2008, 09:07:32
@shwetankdixit: Any chances for internationalization? I'd like a french debug menu, because I use Opera in french.
edbj14. June 2008, 00:04:51
@shwetankdixit: "what else would you guys want?"

1. I wish that Dragonfly really would remember its state, attached or
detached, and its position. This should be true whether Opera is
closed with Dragonfly open, or if Dragonfly is closed and Opera
remains open. (I think the former is prolly tough to do.)

1.A. What is the action to detach Dragonfly from within Opera? I built a
toolbar button to launch Dragonfly, and I'd like to add a second
action to detach it. (The syntax changes from version-to-version, and
making a button has proven elusive. <g>)

3. This may be a bug, but when inspecting the DOM with the DOM expanded and
in Tree View, the close div tags, , aren't visible, as they are
when the DOM is expanded without Tree View.

4. The ability to edit local files, scripts and style sheets from with
Dragonfly.

Regarding your comment pertaining to the view selection source...it is a
very handy tool; however, it would be much handier if the viewed selection source were editable.
beeblebro14. June 2008, 15:31:53
I've not been able to get Dragonfly working on my Windows XP Pro 64-bit installation. Both in RC and Final, when I open up Dragonfly, the browser windows splits to make room for Dragonfly, but the area is just blank (white background). Result is the same if I open from Tools -> Advanced, or from Debug menu.

Also, adding the weekly snapshot url to preferences does not help.

I got MySQL and Apache Tomcat running on port 80 (and can't turn them off) - does this create a problem?

BB
shwetankdixit14. June 2008, 20:46:14
@beeblebro: MySQL and Tomcat shouldn't create a problem, however, I can't really confirm that at this moment...

If you haven't already, can you try it on a clean install?

If it still doesnt work, try downloading Opera Dragonfly and run it from the local path [ Just extract the .zip file and place the local path of the config.xml in the Developer Tools URL ]