Opera developer tools

Opera developer tools

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

( Read the article )

None of the tools work on specific sites that set document.domain.

like http://www.ebay.co.uk for example.

Here is the discussion about it.

http://my.opera.com/community/forums/topic.dml?id=166247

Looks good on the handful of sites I've played with... Look forward to using it!

Very nice preview of tools. Thanks!
Even in that state (pretty good after all) they could be very helpful.
Especially I like CSS editor and metrics of node view.
BTW in CSS editor there should be highlighting not only on mouse hover but also on focus...

Nice work, I really like the CSS Editor.
The DOM console doesn't show scrollbar, so I'm disoriented when expanding a large section.
And how can I put the toolbar into Panel?

Definitely going to be cool.

Very nice stuff, they seem to be better than the other similar js-buttons I've been using

The CSS editor is awesomely fun to play with

Actually I prefer MouseOverDomInspector in its older version

Like MODI, these are just simple JS scripts - not even like Dorsera for WebKit with (which is a sortof a script too, but has look'n'feel of a proper application) and far cry from Xyle Scope.

I hoped for something more advanced and better integrated from Opera :/

DOM inspector doesn't even open in a panel so (on Mac crippled-MDI Opera) every click on a page hides it! It should be in a panel...

I'm looking forward to version 2 then

I' amazed !!
As a preview it's very good. I love CSS editor in particular.
I just miss one good feature. 'Revert' button that will return back to the original file, when you mess with it too much

great release!
these three tools will be really useful!

Excellent preview guys! I hope to see more tools and improvements to these in the very near future! These are very helpful already! I Especially like the code coded view of the source using "DOM Snapshot", wish the source viewer was color coded and numbered as well. I also think that the DOM Snapshot page should have a button to "Open in Source Viewer" or something like that.

I like this a lot. What I'd also like is an easy way to add a "reload from cache" button to a visible toolbar. For a daily workflow, tools → advanced → reload from cache is far too fussy.

DOM snapshot is great - something I use a lot in Firefox and miss in Opera.

No, it`s not a firebugs :-(
Really, there are many of userjs|favelets tools, many of it works even in O7
But it`s JS, and it is not able really debug, or modify, or step-by-step execute JS (how I can add breakpoint to script?)

I will be wait really tools, written as part of Opera…

I love the CSS Editor and the DOM Snapshot. They're very nicely done. Especially the CSS Editor...

Why don’t you use XMLSerializer for the DOM Snapshot? This way, you’ll get the *real* generated source, including the XML declaration.

Originally posted by porneL:

DOM inspector doesn't even open in a panel so (on Mac crippled-MDI Opera) every click on a page hides it! It should be in a panel...

Even in a MDI-capable OS the separate popup can get in the way. But there is a nice way to work around this: drag the tab for the popup to the desktop, making it a detached tab. On Linux you can do this from the tab context menu, IIRC. Then, you can arrange the window sizes so the detached tab and the original window don't overlap. I've no Mac here, but I would think this should work with MacOpera as well.

Originally posted by mathbr:

Why don’t you use XMLSerializer for the DOM Snapshot? This way, you’ll get the *real* generated source, including the XML declaration.

Hi

We have actually done it in this way in the beginning. But as bigger the generated DOM is, the less readable is the output from the XMLSerializer.

I really don't like that every margin: 0 in CSS editor appears as:
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
The same for border, padding, background, etc.
Firefox CSS editor from Developer Toolbar present CSS rules as they appers in source.

Originally posted by FataL:

I really don't like that every margin: 0 in CSS editor appears as:
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
The same for border, padding, background, etc.
Firefox CSS editor from Developer Toolbar present CSS rules as they appers in source.

I find this way great, you can test little changes better.

Originally posted by Rijk:

I've no Mac here, but I would think this should work with MacOpera as well.

In Mac pop-up windows are always separate from main Opera window.

BTW. DOM Snapshot doesn't work with pages served as application/xhtml+xml For example: http://operapl.net/

I find this way great, you can test little changes better.

I totally disagree! Clean CSS becomes a huge mess. And you don't see real (author) stylesheet, but instead some interpretation of it.

Originally posted by quiris:

BTW. DOM Snapshot doesn't work with pages served as application/xhtml+xml For example: http://operapl.net/

Thank you for the hint, quiris, we will fix this.

(The problem is not the mime type, try e.g. http://aleto.ch/test/menu11.xml .)

Originally posted by aleto:

The problem is not the mime type, try e.g. http://aleto.ch/test/menu11.xml

So where is a problem?

Cool previews! I hope it eventually will be something more like the web developer toolbar in firefox when it is finished (i.e. a own toolbar with customized buttons). It would also be good if these kind of tools would open in some sort of panel and not a new window/tab. It would also be grate if the error console was able to put within a own panel.

Originally posted by quiris:

So where is a problem?

It's a call on a none existing object, i have fixed it .

In the Dom console, check the href attribute of a mailto link. The address for the link that is provided for you to click on has http://site.com/mailto:email%40site.com for example.

How I can add the dev-toolbar to Opera???

aleto, I would like to know how you fixed it. I though that it's not possible to call document.write on window opened from xml site. I would like to know solution for this problem (seems that files on server are not updated yet).

Originally posted by d.i.z.:

I though that it's not possible to call document.write on window opened from xml site.

That was in Opera 8 the case. The new window has had allways the same mime type as the opener document. But in Opera 9 this has changed, an empty window has the mime type text/html (actually i'm not sure if it gets that type in the moment where one uses the document.write method on an empty document).

Originally posted by Salsero_Nash:

How I can add the dev-toolbar to Opera???

You can drag and drop the tools from http://dev.opera.com/articles/view/opera-developer-tools/ to one of your toolbars or click a link on that site and drag and drop them form your buttons>my buttons tab to your toolbar.

Originally posted by aleto:

That was in Opera 8 the case. The new window has had allways the same mime type as the opener document. But in Opera 9 this has changed, an empty window has the mime type text/html

Wow, thanks for pointing this out. Gonna update my script.

I've found a new glitch. Try open a CSS editor on http://my.opera.com/quiris/blog/ The last stylesheet http://files.myopera.com/quiris/user.css can't be expanded with "show rules" button

Originally posted by quiris:

I've found a new glitch. Try open a CSS editor on http://my.opera.com/quiris/blog/ The last stylesheet http://files.myopera.com/quiris/user.css can't be expanded with "show rules" button

That's the same domain origin policy, js has no cross domain access, that goes for stylesheets as well.

Originally posted by aleto:

That's the same domain origin policy, js has no cross domain access, that goes for stylesheets as well.

Thanks for the explanation. IMHO Such cases should be notified properly. "Access denied" or smth...

Thank you very much.
The CSS editor comes in very handy.

Originally posted by FataL:

I really don't like that every margin: 0 in CSS editor appears as:
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
The same for border, padding, background, etc.
Firefox CSS editor from Developer Toolbar present CSS rules as they appers in source.

I second this request to leave the CSS as it is. Every byte counts, and CSS should be as light as possible.

This is really impressive. I had no idea such functionality could be produced in Opera. This is just Javascript right? Keep them coming.

If I can make a request, I would like to see something that allows you to do the same as FireFox's "View Selection Source". I better search the forums for that though.

EDIT: And I found it (http://my.opera.com/community/forums/topic.dml?id=140523) - never mind

Originally posted by drworm:

If I can make a request, I would like to see something that allows you to do the same as FireFox's "View Selection Source".

Originally posted by drworm:

EDIT: And I found it (http://my.opera.com/community/forums/topic.dml?id=140523) - never mind

It should be provided as a part of an entire tool suite Maybe Opera Developers should talk to jkb about adopting his script as an official part of Opera Tools Collection?

When we will see updated versions?

As of now, they do not work in http://www.gt500.org/blog/ or http://zajec.net for example.

Originally posted by d.i.z.:

As of now, they do not work in http://www.gt500.org/blog/ or http://zajec.net for example.

What is the problem with which tool?

(They work here.)

Originally posted by aleto:

What is the problem with which tool?

Ops, this was because of my script that blocks all external scripts. Gotta add another exception to the list.
It was working on https sites and the ones I've added to exception list. That's why it did work on some sites and not other.
Sorry for bothering.

Some issue when running script second time (all of the tools are affected)

Timeout thread: delay 50 ms
Error:
name: TypeError
message: Statement on line 811: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
  Line 811 of linked script http://devfiles.myopera.com/articles/59/domConsole_2.js
    var tree = win_doc.getElementById("tree");
  Line 1438 of linked script http://devfiles.myopera.com/articles/59/domConsole_2.js
    update___sourceIndex();
parseSourceIndexArray([]);
  At unknown location
    [statement source code not available]

CSS Editor crashes Opera (9.02) when used on Wikipedia, can anybody confirm this?

Originally posted by elpres:

CSS Editor crashes Opera (9.02) when used on Wikipedia, can anybody confirm this?

Yes, the CSS editor crashes Opera in some situation, that's a known bug.

Will future versions of these tools always require online access? I was working offline this weekend on some scripts (wonky wireless access regularly leaves me offline) and found it annoying that the DOM console didn't work.

Including the scripts in the button could probably be done using data:urls, but local storage would be better, so that they can be updated with new installs.

Originally posted by MarkSchenk:

Will future versions of these tools always require online access? I

Yes, that's the plan atleast.

You can download the scripts as well and put them in your user js directory. Then you can use them with the opera commands (as menu items, e.g. in the document right click menu):

Item, "Snapshot"="Go to page, "javascript:liveSource.open()", , , " ""
Item, "DOM"="Go to page, "javascript:domConsole_2.open()", , ," ""
Item, "CSS"="Go to page, "javascript:cssConsole.open()", , ," ""

(myself i use them in this way)

Originally posted by aleto:

Yes, that's the plan atleast.

That is a shame. I would personally prefer to see them shipped with Opera in a Scripts directory, and then executed like userscripts like you described (a very good solution btw, thanks).

The advantages would be:
- no online access needed
- faster loading (no need to wait till script downloads from site)
- easier tweaking of the scripts for personal use

Disadvantages
- more complicated update process, with installer
- the scripts would be in memory for each page

As you can see from this very scientific summing of advantages/disadvantages, they should be shipped with Opera ;-)

Originally posted by aleto:

You can download the scripts as well and put them in your user js directory.

The method for downloading these scripts isn't too obvious to me. Any tips?

Hi drworm

if you drag and drop the links for the tools to one of your toolbar, Opera will create a new entry in the toolbar.ini in the toolbar directory in your profile folder. There you can see the link.

My wishes/suggestions for CSS Editor:

• Fix security violations.
  
  For example on Gamespot, there are 3 stylesheets (2 linked, 1 inline). CSS Editor shows only the first one because of exception which is happening when checking cssRules.
  
  In this line:
  

      for( k=0; rule=sheet.cssRules[k]; k++)

  
  add some try{}catch{} because accessing cssRules array on stylesheet from different domain results in halt of script execution.
  Also cssRules button could be disabled in such case.
  Google's blog is another example of such problem. It should show a lot more stylesheets.
• Add animated 'loading' icon because processing styleSheets can sometimes take time. Try on http://www.xbox.com for example - second stylesheet is appearing after some noticeable delay.
• Stylesheets imported through @import rule could be shown with some margin on the left side so it would form a more readable tree structure.
• Frames support would be nice.

Any chance these tools could be converted into Web Panels for the sidebar? Having them as separate windows is annoying, because they cover part of the page you are inspecting, and clicking on the inspected page hides the DOM inspector.