The 'Debug Menu' and the new weekly

By Shwetank Dixitshwetankdixit. Monday, June 9, 2008 2:04:52 PM

, ,

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 Opera 9.5. You can download Opera 9.5 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.

Latest weekly now liveOpera Dragonfly alpha 2 RC

Comments

berend ytsmaytsmabeer Monday, June 9, 2008 2:18:13 PM

Nice verry nice.
The menu is just wat I need smile

johnnysaucepn Monday, June 9, 2008 2:23:46 PM

Very, very useful.

luinnar Monday, June 9, 2008 3:18:38 PM

Great! Good job!

Steve DarkenDarken Monday, June 9, 2008 4:05:54 PM

Excellent, good job!

DavidSchalandra Monday, June 9, 2008 5:10:15 PM

Very cool! up

Shwetank Dixitshwetankdixit Monday, June 9, 2008 7:27:40 PM

@fearphage: Sweet smile

Simon Houstonshoust Monday, June 9, 2008 8:01:48 PM

ninja Perhaps its a good suggestion to include it in the default menu setup and allow invokation in the dev tools p

Charles SchlossChas4 Monday, June 9, 2008 10:56:09 PM

Sweet

the link checker is very nice add

mrmass Tuesday, June 10, 2008 2:09:09 AM

I really like how Dragonfly is coming along bigsmile

DavidSchalandra Tuesday, June 10, 2008 6:27:55 AM

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. zzz coffee

Shwetank Dixitshwetankdixit Tuesday, June 10, 2008 7:21:31 AM

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

Michał CzarneckiZaufany Tuesday, June 10, 2008 7:35:49 AM

What do you think about this setup of Opera Dragonfly?

http://files.myopera.com/Big_Z/files/wazka.png

DavidSchalandra Tuesday, June 10, 2008 9:07:27 AM

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? eek

Shwetank Dixitshwetankdixit Tuesday, June 10, 2008 10:27:06 AM

@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?

João EirasxErath Tuesday, June 10, 2008 12:49:33 PM

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

Rafald.i.z. Tuesday, June 10, 2008 2:43:08 PM

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.

Mihai Sucanrobodesign Tuesday, June 10, 2008 3:53:27 PM

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.

MyOpera team, please fix this!fearphage Tuesday, June 10, 2008 6:05:43 PM

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.

Shwetank Dixitshwetankdixit Tuesday, June 10, 2008 6:16:21 PM

@d.i.z. : Interesting... smile

@robodesign: good suggestions up

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

What more would you like?

Cyro Tuesday, June 10, 2008 6:26:12 PM

Morphinomenal menu! Gotta love it!

Christian Krebsaleto Tuesday, June 10, 2008 7:29:17 PM

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);", , ," "

Edward Jayedbj Wednesday, June 11, 2008 1:55:01 AM

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?

nolovelust Wednesday, June 11, 2008 8:20:16 AM

how can i add this Deeveloper menu to document popup menu (right click) ?

Shwetank Dixitshwetankdixit Wednesday, June 11, 2008 8:27:18 AM

@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 up 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.

Edward Jayedbj Wednesday, June 11, 2008 3:21:06 PM

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.


A.RuzanovLex1 Wednesday, June 11, 2008 10:18:32 PM

1) What about adding "Show source code of selection"? It's standard function of other browser wink . 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 smile

DavidSchalandra Thursday, June 12, 2008 7:44:53 AM

@shwetankdixit
I made a clean install of Opera and updated the Dragonfly to weekly. Restarted PC and now it works. smile Thanks for your help and patience.

MaximSailorMax Thursday, June 12, 2008 10:13:33 AM

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... wink May be you'll change it?

Edward Jayedbj Thursday, June 12, 2008 9:22:05 PM

Lex1: "What about adding "Show source code of selection"?"

Use this user javascript:
http://www.webkitchen.cz/lab/opera/get-selection-source.js

Shwetank Dixitshwetankdixit Thursday, June 12, 2008 10:05:43 PM

@SailorMax: I hear ya

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

what else would you guys want?

Mihai Sucanrobodesign Friday, June 13, 2008 9:07:32 AM

@shwetankdixit: Any chances for internationalization? I'd like a french debug menu, because I use Opera in french.

Edward Jayedbj Saturday, June 14, 2008 12:04:51 AM

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

beeblebro Saturday, June 14, 2008 3:31:53 PM

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

Shwetank Dixitshwetankdixit Saturday, June 14, 2008 8:46:14 PM

@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 ]

Ravindran NavaneethanRavindran Monday, June 16, 2008 5:10:01 AM

Debug menu is a nice thing and makes debugging with Opera very easy.

One small suggestion here. 'Alt+D' is used to go to address bar. (the behavior is same across all the browser and Opera recently added it). IMHO, I think most of the people are used to this one. So I would suggest you to change the menu accelerator to something like 'Alt+g' or 'Alt+u'

Kudos to greate work from Opera, as always.

CodeCow Thursday, June 19, 2008 5:34:05 PM

I have the same problem as beeblebro. I've not been able to get Dragonfly working on my Windows XP Pro box. When I open up Dragonfly (Developer Tools), the browser windows splits to make room for Dragonfly, but the area is just blank (white background). I've tried redownload and reinstall. No change. With Dragonfly open, when I resize window I loose the scroll and downscroll boxes (annoying!). How does one "turn off" or "Hide" Dragonfly once opened, without a menu??

MyOpera team, please fix this!fearphage Friday, June 20, 2008 5:47:00 PM

I'm not sure if this is a dragonfly problem or Opera but is the dragonfly crasher filed? It's inconsistent but the best thing i can tell you is to use dragonfly for a while (scripts, debugging, dom traversal) then let it lay dormant for a while and then close it. It takes Opera down too. Known?

CodeCow Friday, June 20, 2008 8:03:53 PM

Ahh. Figured it out. Had to go to opera:config -> Dev Tools and change 'Developer Tools URL' from https to http. For some reason, Opera has a problem accessing SSL sites through our corporate web proxy server (with authentication). Once Dragonfly appeared, I was able to click the red x to close the panel. It would be nice to have the ability to close the Dragonfly (dev tool) pane somewhere else however (see Tools->Quick Prefs->Enable Plug-Ins checkbox). In regards to Dragonfly... Nice tool! I look forward to using it.

Christian Krebsaleto Friday, June 20, 2008 11:28:27 PM

I'm not sure if this is a dragonfly problem or Opera but is the dragonfly crasher filed?


Hi fearphage
no, not that i know about. Do you have a crash log?

MyOpera team, please fix this!fearphage Tuesday, June 24, 2008 1:07:33 AM

Some more essential functions to add to the debug menu:
  • disable caching for this server/domain
  • disable caching for this tab/session


The dragonfly crash has been filed a few times but not by me. The latest one I see is #342045. Next time I get a log, I'll file it.

Ednilson Maiaemaia Wednesday, June 25, 2008 1:15:16 PM

Dragonfly close icon don't work in some cases. I need click on detach icon, after click in close window icon.

we could have a similar tool to the "inspect element" of the firebug

JanGen Saturday, August 2, 2008 10:21:53 AM

The Show source code of selection is really powerfull, especially if you combine it with the old E and D shortcuts (Cycle through elements in page)

Show source code of selection should be in the [Hotclick Popup Menu] and [Link Selection Popup Menu].

I prefer a native implementation, because although the Userscript is powerful, it lacks some shine like line-wrapping and indent.

Cycle through elements in page is wonderfull. Selecting text is so much faster with these shortcuts. Just select with your mouse something rough and there you go.

Unfortunately disabled in 9.5 by default

veal Wednesday, October 8, 2008 12:24:45 PM

anyone eager to add support for sites behind http auth? smile Those that open an external page do not work (except builting Debug->Validate->HTML).

Daniel Davistagawa Monday, October 20, 2008 9:58:54 AM

Great menu - wish I'd discovered it earlier.

Here's an updated version with feed validator, W3C HTML5 validator, headers checker and resize options (thanks aleta) added:

http://files.myopera.com/tagawa/files/DebugMenu.ini

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

Next builds

New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.

To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.

Useful resources

Source code

Bug reports / feature requests