Skip navigation.

Log in | Sign up

Opera Dragonfly

Bug control, accelerated

The 'Debug Menu' and the new weekly

By Shwetank Dixit. Monday, 9. June 2008, 14:04:52

, ,

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

ytsmabeer 9. June 2008, 14:18

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

johnnysaucepn 9. June 2008, 14:23

Very, very useful.

luinnar 9. June 2008, 15:18

Great! Good job!

Darken 9. June 2008, 16:05

Excellent, good job!

Schalandra 9. June 2008, 17:10

Very cool! :up:

shwetankdixit 9. June 2008, 19:27

@fearphage: Sweet :smile:

shoust 9. June 2008, 20:01

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

Chas4 9. June 2008, 22:56

Sweet

the link checker is very nice add

mrmass 10. June 2008, 02:09

I really like how Dragonfly is coming along :D

Schalandra 10. June 2008, 06:27

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:

shwetankdixit 10. June 2008, 07:21

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

Zaufany 10. June 2008, 07:35

What do you think about this setup of Opera Dragonfly?

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

Schalandra 10. June 2008, 09:07

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:

shwetankdixit 10. June 2008, 10:27

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

xErath 10. June 2008, 12:49

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

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.

robodesign 10. June 2008, 15:53

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.

fearphage 10. June 2008, 18:05

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.

shwetankdixit 10. June 2008, 18:16

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

@robodesign: good suggestions :up:

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

What more would you like?

Cyro 10. June 2008, 18:26

Morphinomenal menu! Gotta love it!

aleto 10. June 2008, 19:29

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

edbj 11. June 2008, 01:55

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 11. June 2008, 08:20

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

shwetankdixit 11. June 2008, 08:27

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

edbj 11. June 2008, 15:21

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.


Lex1 11. June 2008, 22:18

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:

Schalandra 12. June 2008, 07:44

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

SailorMax 12. June 2008, 10:13

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?

edbj 12. June 2008, 21:22

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

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

shwetankdixit 12. June 2008, 22:05

@SailorMax: I hear ya

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

what else would you guys want?

robodesign 13. June 2008, 09:07

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

edbj 14. June 2008, 00:04

@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 14. June 2008, 15:31

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

shwetankdixit 14. June 2008, 20:46

@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 16. June 2008, 05:10

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 19. June 2008, 17:34

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

fearphage 20. June 2008, 17:47

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 20. June 2008, 20:03

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.

aleto 20. June 2008, 23:28

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?

fearphage 24. June 2008, 01:07

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.

emaia 25. June 2008, 13:15

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 2. August 2008, 10:21

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 8. October 2008, 12:24

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

tagawa 20. October 2008, 09:58

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

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.