Opera developer tools

Note: You need to login to post in the forums. if you don't have an account you first need to sign up.

By operadev Wednesday, 15. November 2006, 16:09:41

Get an early glimpse of developer tools used internally by Web Application developers at Opera Software.

( Read the article )

By d.i.z. Friday, 26. October 2007, 12:02:32

Thanks a lot.

Small issue with that is that new window.history entry is created so you can go back to about:blank. Not a problem for Dev Console but maybe might be unwanted in some situations.

By d.i.z. Saturday, 27. October 2007, 21:43:42

I've made some changes to DevConsole.

Version 1:
* Changed page title and page url to use text-overflow: ellipsis (address of page generated by data:uri took whole height)
* Fixed 'undefined' link for background: url()'s in element's Styles tab
* Added Pause checkbox to pause DOM changes monitoring
* Fixed displaying of JS tab when page contains frames from different domains (bug-253699)
* Changed click monitoring to work with 'mousedown' instead of 'click'. Page mousdown listener should now not fire when we want to highlight some element.
* Added 50px to default console width
* Fixed listing of stylesheets when encountering stylesheet from different domain (before it just stopped at this one)
* Added processing of stylesheets from different domains (only when xErath's Cross-domain XMLHttpRequest is available)
* Added outline for highlighter box (sometimes background alone is not visible)
* Fixed DOMNodeRemoved/Inserted listeners so that they won't stay and make errors in console after closing devConsole

Download: devConsole.js
This version must be placed in user scripts directory and used with corresponding button.
Button for UserJS version: button

Getting stylesheets from different domains is a bit hackish but it works. Script removes original linked/@imported stylesheets and creates local style elements in place of them. It wont touch stylesheets that are in the same domain.

I've tried to change as little as possible so it would be easy to compare this version with official and see the differences.

And if you prefer official, online version then you might want to use this button which includes new, official Developer Tools image (Opera 9.50 required to see the image):
Button: button

Post edited Sunday, 28. October 2007, 18:19:40

By d.i.z. Sunday, 28. October 2007, 13:56:00

Version 2:
* Added enumerating of all iframes/objects, even ones that are childs of frames/objects of current document. Allows debugging gmail for example.

Download: devConsole.js
This version must be placed in user scripts directory and used with corresponding button: button

Post edited Sunday, 28. October 2007, 18:15:29

By d.i.z. Sunday, 28. October 2007, 17:52:55

Version 3:
* Fixed errors when hovering elements when focus is not in DOM tab
* Fixed DOM tree folding when some node is removed/added by page.

All functionality for this second fix was in place already but triggered only after removing some node from DevConsole tree. I've made it so that it remembers last one we clicked and redraws tree with this one selected. It's awesome because now you can track in real time what is happening with element's properties/styles (edit: well, only if DOMNodeInserted/Removed happens. We would have to add listener that listens for attribute values changes to make it work exactly as I said). There is just small problem related to how scrollable elements work. If content height change too much, things will fly out of view.
Pause DOM monitoring option becomes partially obsolete with this one. It might still come in handy when changes are happening very fast though.

Version 4:
* Listing also iframes that are not accessible. These won't be possible to select but will show up in select box.
* Fixed bottom (details) box scrollbars. When changing bottom tabs, content height was not updated.

Download: devConsole.js
This version must be placed in user scripts directory and used with corresponding button: button

Post edited Sunday, 28. October 2007, 20:13:22

By AyushJ Monday, 29. October 2007, 08:19:14

Nice d.i.z. ! It will be better to just call the clearWindow function to remove the listeners instead of adding the removeListener lines everywhere

(I was changing mousedown monitoring back to click because it was causing problems with snap-links

)

By d.i.z. Wednesday, 31. October 2007, 19:15:43

Version 5:
* Removing listeners using clearWindow method
* Switching 'only custom properties' checkbox will keep us in current scope and not reset it to parent object.
* Changed displaying of inherited css properties. They are displayed with opacity 0.5 to easily distinguish between them and changed properties when 'all properties' is enabled
* Added overflow-x/y, outline-offset CSS properties to Styles tab
* Added a bunch of newly supported JS properties/methods to filters (for use with 'only custom properties' feature)
* Checkboxes state (JS - 'only custom properties', CSS - 'all properties') is restored properly when returning to tab
* Fixed: document listeners were being set upon entering JS tab. Changed setWindow call to setWindowJS and fixed issues that this made - guess this was a typo in original script.

Download: devConsole.js
Button: button

Post edited Thursday, 1. November 2007, 00:22:07

By fearphage Wednesday, 31. October 2007, 19:43:41

Any chance you can make iframes/framesets descend firebug style?

Nice work so far!

By d.i.z. Wednesday, 31. October 2007, 19:53:31

Thanks Ayush and fearphage.

Originally posted by AyushJ:

I was changing mousedown monitoring back to click because it was causing problems with snap-links

As you fixed/workarounded this in snap-links, I'm keeping mousedown the default behaviour.
Unfortunately mousedown doesn't work that well in Opera 9.2x (I think it can't prevent default action). I'm using 9.5 full time so I'm focusing on it.

Originally posted by fearphage:

Any chance you can make iframes/framesets descend firebug style?

Haven't tried to mess with that yet, but it is in my todo list.
Only same-domain frames of course as working with cross-domain frames would be too hackish.

By d.i.z. Sunday, 4. November 2007, 00:33:23

Just wanted to report that calling window.open with 'about:blank' URI fixes problem with xml parsing but creates even bigger problem.

I'm not able to use devConsole when page sets document.domain ( http://files.myopera.com/d.i.z./bugs/Domain_Issue.html ).

With empty parameter in window.open there are no domain issues but this damned xml parsing error... BUG #285507, please don't ignore!

By aleto Sunday, 4. November 2007, 16:51:50

Originally posted by d.i.z.:

With empty parameter in window.open there are no domain issues but this damned xml parsing error... BUG #285507, please don't ignore!

the problem is that an empty first parameter in window.open should default to 'about:blank' ( http://www.whatwg.org/specs/web-apps/current-work/#apis-for ).

If you like you could test with "data:text/html,%3C!doctype%20html%3E" instead of "about:blank"

By d.i.z. Sunday, 4. November 2007, 19:55:01

Originally posted by aleto:

Originally posted by d.i.z.:
With empty parameter in window.open there are no domain issues but this damned xml parsing error... BUG #285507, please don't ignore!

the problem is that an empty first parameter in window.open should default to 'about:blank' ( http://www.whatwg.org/specs/web-apps/current-work/#apis-for ).

So let's assume that Opera gets fixed to behave like that. Does the document.domain problem will be considered a bug then? Because it looks like a bug to me despite the issue with window.open's first parameter.

If you like you could test with "data:text/html,%3C!doctype%20html%3E" instead of "about:blank"

Same as with "about:blank" - xml sites work but it has cross-domain problem.

There was very similar bug in Opera before: http://my.opera.com/community/forums/topic.dml?id=166247 .
It was fixed but it looks like only in case when first parameter was empty.

By d.i.z. Sunday, 4. November 2007, 22:16:36

Version 6:
* Quick fix for JS tab always showing properties of top window (sorry for that)

Download: devConsole.js

By aleto Monday, 5. November 2007, 10:50:26

I have quickly tested

javascript:(function()
{
  var win = window.open("data:text/html,%3C!doctype%20html%3E", '_blank', 'width=300, height=300');
  var doc = win.document;
  doc.documentElement.innerHTML = "<head><title>data uri test</title></head><body><h1>data uri test</h1><p>new document compatMode: " + doc.compatMode + "</p><p>read from opener: " + document.compatMode + "</p></body>";
})()

which works ok here with your above tc in Opera 9.5 beta ( 9613 )

Originally posted by d.i.z.:

Does the document.domain problem will be considered a bug then? Because it looks like a bug to me despite the issue with window.open's first parameter.

I agree. That's a bug ( in my view the real bug, because it's unclear what window.open really returns with empty parameters )

By d.i.z. Monday, 5. November 2007, 13:16:27

Originally posted by aleto:

I have quickly tested

javascript:(function()
{
  var win = window.open("data:text/html,%3C!doctype%20html%3E", '_blank', 'width=300, height=300');
  var doc = win.document;
  doc.documentElement.innerHTML = "<head><title>data uri test</title></head><body><h1>data uri test</h1><p>new document compatMode: " + doc.compatMode + "</p><p>read from opener: " + document.compatMode + "</p></body>";
})()

which works ok here with your above tc in Opera 9.5 beta ( 9613 )

This piece of code won't cause security violation when we replace data:uri with about:blank either.
But this will:

javascript:(function(){
var win = window.open("data:text/html,%3C!doctype%20html%3E", '_blank', 'width=300, height=300');
var doc = win.document;
doc.open();
doc.write('test'); /* SECURITY VIOLATION HERE */
doc.close();
})();

So it can be workarounded by not using document.write() but it's still a bug. Do you need a bug report?

Post edited Monday, 5. November 2007, 14:07:20

By fearphage Monday, 5. November 2007, 14:25:11

Couldn't you just put whatever you were going to doc.write into the data uri?

window.open('data:text/html,\
<!doctype html>\
<html>\
  <head>\
    <!-- stuff here -->\
  </head>\
  <body>\
    <!-- stuff you would doc.write here probably -->\
  </body>\
</html>', '_blank');

Post edited Monday, 5. November 2007, 14:30:42

By aleto Monday, 5. November 2007, 14:32:45

Originally posted by d.i.z.:

So it can be workarounded by not using document.write() but it's still a bug. Do you need a bug report?

Yes, please, do so.

Originally posted by d.i.z.:

This piece of code won't cause security violation when we replace data:uri with about:blank either.

I can't confirme that here, the one does work, the other not.

Originally posted by fearphage:

Couldn't you just put whatever you were going to doc.write into the data uri?

Basically yes, but "data:text/html,%3C!doctype%20html%3E" is enough to create a basic document with the root, the head and the body.

(Thats actually all we need, the rest can be done with DOM methods. I will see if i can find some time to fix this issue )

Post edited Monday, 5. November 2007, 14:44:41

By d.i.z. Monday, 5. November 2007, 16:07:31

Originally posted by fearphage:

Couldn't you just put whatever you were going to doc.write into the data uri?

Yes I can workaround it,but I'm trying to hunt down bug.

Originally posted by aleto:

I can't confirme that here, the one does work, the other not.

Yes, with "about:blank" it does not work but not exactly because of cross domain Security violation but because of missing documentElement (or maybe even "document").
It gives message:
Security error: attempted to read protected variable

while "real" cross-domain issue gives:
Security violation

Post edited Monday, 5. November 2007, 16:36:15

By aleto Monday, 5. November 2007, 18:03:27

Originally posted by d.i.z.:

Yes, with "about:blank" it does not work but not exactly because of cross domain Security violation but because of missing documentElement (or maybe even "document").

That's not the problem, the basic document is created ( root, title, head, body ).

By d.i.z. Monday, 5. November 2007, 18:23:39

Originally posted by aleto:

That's not the problem, the basic document is created ( root, title, head, body ).

Your right, that must be related. And the fact that it works on other pages confirms that.

Post edited Monday, 5. November 2007, 18:29:57

By d.i.z. Monday, 5. November 2007, 23:06:10

Filed.
#295708: Page that sets document.domain influences window.open behaviour (causing Security violation)

aleto: please add to that report if you feel I got something wrong, wasn't clear enough or whatever.

fearphage: email was sent.

As for devConsole fix...:

win=window.open('data:text/html,%3C!doctype%20html%3E','_blank','top='+window.innerHeight*0.05+',height='+
window.innerHeight*0.9+',width='+350+',resizable=yes,scrollbars=yes');
}
win_doc=win.document;
// win_doc.open();
// win_doc.write('<!DOCTYPE html><html' + (widgetFlag?' class=\'widget_developer\'':'') + '><head></head><body></body></html>');
// win_doc.close();

Works when page sets domain, when it's an xml page and popup does not have 'back' enabled. All perfect now.

Post edited Monday, 5. November 2007, 23:37:33

By fearphage Tuesday, 6. November 2007, 00:54:34

Originally posted by d.i.z.:

fearphage: email was sent.

Hotness. Thanks.

By aleto Tuesday, 6. November 2007, 10:21:40

d.i.z: Thanks for the report and the devConsole fix!

By d.i.z. Wednesday, 7. November 2007, 20:06:14

Originally posted by d.i.z.:

Works when page sets domain, when it's an xml page and popup does not have 'back' enabled. All perfect now.

Not quite perfect, CSS tab and XHR related stuff does not work (Security Violation) :/

Post edited Wednesday, 7. November 2007, 20:21:01

By Lex1 Monday, 12. November 2007, 07:51:48

aleto
Imho, would be useful to add "view source of selection" in liveSource.js. Similar:

  var getLiveMarkup=function()
  {
    var markup=getDoctype();
var ele=document.documentElement;
    if(window.getSelection && window.getSelection()!='')
    {
ele=document.createElement('html');
ele.appendChild(document.createTextNode('...'));
ele.appendChild(window.getSelection().getRangeAt(0).cloneContents());
ele.appendChild(document.createTextNode('...'));
};

    markup+=getLayer(ele,0);
    return markup;
  };

I add it to my menu

And I found small bug, if title equal

<title>& lt ;The Link& gt ;</title>
without spaces, of course

Fix:

document.title.replace(/</g,'&lt;').replace(/</g,'&lt;')

Post edited Monday, 12. November 2007, 09:29:00

By D-n Wednesday, 21. November 2007, 17:30:05

Every time I open the DOM console, it throws a CSS error. It's not fatal, but annoying.

CSS - http://dev.opera.com/tools/
Inlined stylesheet
xxborder is an unknown property
Line 1:
Yv9x%2BI%2FHF%2FGwg80geQ5eAAAAAElFTkSuQmCC");display:block;height:18px;xxborder:

Is this a known bug? Does it get to be reported with the O bugs, or is this sufficient?

By fearphage Wednesday, 21. November 2007, 18:35:44

Its some left over debug stuff. Someone uses 'xx' instead of commenting out the property.

By dynorick Wednesday, 28. November 2007, 16:05:44

How does one set the site that the devconsole is to describe? for the life of me, i cannot get it to do anything but list a blank website!

Help? are there any whitepages for this business?? how-to's? anything? i want to use this thing but i cant get it to work!!!

Thanks,

By ytsmabeer Wednesday, 28. November 2007, 16:11:53

@dynorick: If you got the developer button set.
Just go to a site where you wan't to use it with.
when site is loaded press the developer console button to activate the developer console
It's easy

By fearphage Wednesday, 28. November 2007, 16:35:29

Any type of progress report (super secret pre-alpha

) on the non-javascript-based dev tools?

By chrismills Wednesday, 28. November 2007, 20:47:04

Stay tuned, Opera fans! We will have some new prerelease developer tools available pretty soon...bug me in a couple of weeks if you want an update (cmills [at] opera [dot] com.)

By FataL Wednesday, 28. November 2007, 20:50:49

Stay tuned, Opera fans! We will have some new prerelease developer tools available pretty soon...

This will be good New Year or Christmas present for web devs.

By chrismills Thursday, 29. November 2007, 09:40:02

I hope it is before Xmas, but it may be a bit later - our engineers are working hard to produce a really high quality product that will hopefully give Firebug and WDTB a bit of a run for their money. Initially we will probably do a closed alpha to gather lots of good feedback and get the tools as good as they can be before any kind of general release.

By FataL Friday, 30. November 2007, 00:20:00

Great! Count me in!

By fearphage Friday, 30. November 2007, 01:38:31

Originally posted by chrismills:

closed alpha

Meaning the people here drooling over it might not get it before xmas?

By chrismills Wednesday, 5. December 2007, 06:32:46

Originally posted by fearphage:

Originally posted by chrismills:
closed alpha
Meaning the people here drooling over it might not get it before xmas?

We'd be happy for a few of you to take part in the testing. Let me know.

By remcolanting Thursday, 6. December 2007, 23:06:15

Nice, I could use those tools rather sooner than later.

*patiently waits until testing starts*

By Mongoose Monday, 10. December 2007, 16:08:09

Originally posted by chrismills:

We'd be happy for a few of you to take part in the testing. Let me know.

Wanna be a tester

By thefine Friday, 14. December 2007, 23:55:02

hi
i added opera dev toolbars and when i click from tools>advenced> develeoper tools nothing happen.
thanks

By Mickhael Monday, 17. December 2007, 15:03:12

Off-topic message removed by moderator. This is a thread on developer tools.

Post edited Saturday, 5. January 2008, 11:50:46

By drworm Wednesday, 19. December 2007, 06:31:25

Originally posted by thefine:

i added opera dev toolbars and when i click from tools>advenced> develeoper tools nothing happen.

That menu item is only a link to the web page where you can add the tool as a button. If you've added it already then click the button to launch for the current page.

Originally posted by Mickhael:

Hi, it would be desirable to learn(find out) why in the version 9.23 the passwords are incorrectly remembered. For example: https: // my.server.com/ddc/ and https: // my.server.com/rdc/ - have the different passwords. One password instead of two is kept. In other browsers two passwords are kept. Whether it is corrected in the version 9.24 ?

This topic is for discussion relating to the "Developer Tool". Trying searching the Opera for desktops forum and if you can't a report of the issue then start a new topic.

By mikebeaver Friday, 21. December 2007, 08:59:19

I use a 15" display at home and a 19" one at work, so when I expand nodes in the DOM inspector for a large web page, I cannot see the bottom pane of the DOM window as it is "scrolled" down and there is no way to scroll it up. I am using Opera 9.24 on WinXP. Please fix it as this tool which I find very useful is actually useless because I cannot view, e.g. style properties for selected document elements. I can only make that pane visible when I zoom out down to 50-70% but that is too much and seems to be a bug rather than a feature.

Sorry, have just found out why that happens: the "Fit window width" option was enabled in Opera. Anyway the developers might be interested in eliminating this strange behavior or at least make a note on it on the main page. Thanks for the great tool anyway!

Post edited Friday, 21. December 2007, 09:04:55

By fearphage Friday, 4. January 2008, 22:40:09

I'd REALLY [love] if Opera would let me jump to the actual offending line upon JS/HTML error, rather than just opening up the relevant soruce file.

from a random thread

By PVOID Monday, 14. January 2008, 09:59:24

Originally posted by chrismills:

I hope it is before Xmas, but it may be a bit later - our engineers are working hard to produce a really high quality product that will hopefully give Firebug and WDTB a bit of a run for their money. Initially we will probably do a closed alpha to gather lots of good feedback and get the tools as good as they can be before any kind of general release.

Any news about new opera developers tools?

By cfsego Tuesday, 22. January 2008, 10:18:14

the installation just add a button? nothing more occur when i click the button, besides it pops up a new blank window.
could you tell me WHY?

By fearphage Tuesday, 22. January 2008, 14:58:28

Originally posted by cfsego:

it pops up a new blank window

Sounds like document.domain is set. Did you get a security error in the error console (tools > advanced > error console)?

By D-n Wednesday, 5. March 2008, 14:28:20

I'd REALLY like it if O would let me jump to the actual offending line upon JS/CSS/HTML error, rather than just opening up the relevant source file.

This is the way FF's Error Console works; when I've got a real persnickity problem, I'm forced to open up FF to find the error.

By ceviri Sunday, 16. March 2008, 00:26:06

nice article, also thanks for codes.

By vazhavandan Saturday, 29. March 2008, 08:48:17

Awesome tools,thanks

By wolfgang.radke Sunday, 6. April 2008, 08:12:37

The developer console looks funny if you use a 'user css' at a site(i.e. accessibility.css) . Seems like this CSS is also used for the console.
I guess that is not intended, or is it?

Wolfgang

By d.i.z. Sunday, 6. April 2008, 09:54:48

Originally posted by wolfgang.radke:

The developer console looks funny if you use a 'user css' at a site
I guess that is not intended, or is it?

It is not intended but this is how things work. DevConsole popup is basically a page with same address as original page so same css rules apply to it. I can't think of easy way to workaround this.

Login

Forums » Article Discussions

Opera developer tools