Opera developer tools

Opera developer tools

I've seen a few comments in article threads about Opera developer tools. To save the off topic discussion, I've created a topic just for discussing this.

First a few FAQs first:

Q: Are you developing developer tools
A: Yes

Q: Are they the bookmarklet tools on Dev.Opera
A: No, They were stop gap tools written by our Web Apps department without access to the browser core. The new tools will be integrated into Opera so that they can access more information an be more useful.

Q: We want the same as Firebug and Web Developer Toolbar
A: We hear you

Q: When will they be released?
A: As soon as they are ready

If you have any comments on your most desired/required features then note them below. It takes time to develop best of breed eveloper tools, so we want to make sure we cover the most important features as soon as possible.

Non-exhaustive list of features I'd like to see in order from most important to least, or most used if Firebug to least used

<ol>
<li>Live DOM browser</li>
<li>Live CSS browser that shows which rules apply and which ones take precedence</li>
<li>JavaScript debugging with property browser</li>
</ol>

There are many other features of Firebug that I use, but these are the keys. I know I've seen these elsewhere, but since you specifically asked, I figured I'd answer

Incidentally, a feature I'd like to see with the CSS browser that <em>isn't</em> in Firebug is the ability to change the media. For instance, I'd like to see what it will look like when printed without having to go to print preview mode. Or for smaller devices (i.e. arbitrarily change the screen size for media queries). This is something I think is missing from most, if not all, developer tools.

<strong>[Edit]</strong> Yeah... forgot to mention HTTP request tracing. I use that almost constantly

Michael

Thanks a lot this is great news.

• javascript debugger with breakpoints and ability to inspect live variables
• abiilty to see per-file requests and response headers
• inline editing of html, css, etc.
• live css browser with the ability to disable individual rules
• source browser with inline frames (frames are just a part of the source tree)
• ability to inspect the page without causing a redraw
• something stays visible even when the page is maximized.
  
  Note: I would not necessaryily prefer a panel but placing it in a panel as an option seems popular.
• javascript console for debug
• ability to send comments to the console seperate from the error console
• important: the entire console should be attached to each page. it should not be shared accross tabs
• cross-domain css browser
• ability to watch/inspect xmlHttpRequests

Yes!

*javascript debugger with breakpoints and ability to inspect live variables
*ability to set error console as "Always on top"

A few more:

• inline w3c (x)html validation
• ability to search the dom tree by xpath or css3 selectors
• ability to scan stylesheets and see which rules apply to nothing, the stylesheets would have to be gathered continually as you surf multiple pages of a site and all the dom elements across multiple pages taken into consideration
• built-in html tidy (old page)
• the dom tree should highlight (briefly) changes to the dom without collapsing the tree
• in addition to being dockable/panel-able, it should also be able to be detached from the tab so it could be moved to a sepearate desktop if needed (think dual monitor)
• pretty print minified/obfuscated javascript and css
• obfuscate/deobfuscate javascript based on standard schemas
  Note: There are several standard minifying algorithms/schemes. I'd have to research this more but i know one I commonly see wraps the entire document in a function like this

  eval((function(p,a,c,k,e,d) {
    ... obfuscated nonsense ...
  })(/* a bevy of confusing parameters */))

  I wouldn't mind doing the leg work for this if needed.
  EDIT: More info about this packer
• javascript profiler (see which functions are taken the longest)
• the tool should work for files hosted locally (...) in addition to online pages

Off-topic comment removed by moderator.

@koko775: Wrong topic.

Originally posted by fearphage:

inline w3c (x)html validation

Originally posted by IceArdor:

*javascript debugger with breakpoints and ability to inspect live variables

Originally posted by pitredbeard:

Live CSS browser that shows which rules apply and which ones take precedence

Originally posted by fearphage:

important: the entire console should be attached to each page. it should not be shared accross tabs

+1

ability to inspect the page without causing a redraw

It would be convenient if paadding and margins were independently highlighted while navigating throught the dom. The most important thing is that it doesn't cause redraws while its inspecting objects.

Originally posted by fearphage:

inline w3c (x)html validation

This should have an option to check "on demand" also so you can make it fire after all the dom mutations and things of the javascript.

To add to the wishlist:

• offsetTop and offsetLeft added to the layout metrics
• some type of ruler/measurement interface involved with layout metrics
• when properties of elements, it would be convenient if they updated onkeypress instead of having to press a button to see each change

I am really overjoyed about this. Thanks.

Originally posted by fearphage:

inline w3c (x)html validation

+1

Click an element on the page (or in the source code) and print how to acces that in javascript. It'd speed up having to type long strings of javascript, and make it easier for people who don't know hardly any javascript to be able to figure out how to reference parts of a web page without searching the internet for the answer.

Auto-completion of javascript and css functions. Say I'm writing some CSS and I have a class named topmenu. Then when I create my css file, if I start to type ".to", I want it to auto-complete the text to read ".topmenu". Same thing in javascript. If I want to calculate the length of a string, then when I type var strlength = oldstr.le, it should be able to guess var strlength = oldstr.length;

Originally posted by IceArdor:

Click an element on the page (or in the source code) and print how to acces that in javascript

I agree. The dom tree should display (or make easily accessible) ways to target the current/active element via xpath and css.

Auto-completion

huh? More details here.

It would be nice to have a javascript debugger.
I think that Venkman form Mozilla is a good example on nice debugger, however I prefer the one in MS Visual Studio beacuse it's integrated with IDE. I don't know if it's possible but could Opera could integrate with other IDEs and allow to use their debuggers.
In the company where I work we mainly don't support Opera beacuse it's very hard to debug JS errors.

While you're at it, the source viewer and error console could use some love too.

The ability to display called/included files - for example, external stylesheets, images, images called as backgrounds from stylesheets, flash videos loaded through SWFs, embeds, etc.

Any status updates from the staff? I realize things take time but I just had to ask. I've been waiting since... well since Firebug debuted so forgive me for being impatient.

Thoughts on the ideas presented here? Any of them too broad? unclear? will take too long to implement?

I was hoping this would be more like a conversation than a wishing well...

Hi
First - sorry for my bad english.
Is there anyone who can explain me why when i try to validate website (http://www.w3.org/ pressing ctrl+alt+v i am getting 20 erros ? But when i type an url into http://validator.w3.org/ it says that page is valid xhtml 1.0 strict ?
Thanks

artifact, that sounds like it's off-topic here, and something you should ask in the browser forum.

There should be a command line that accepts any js code. That is obvious of course.
And when calling any function from command line that returns NodeList or similar multi-element list, all returned elements should be listed, clickable and highlightable on hovering.

Description is not too good but you can see what I mean when using 'some other popular debugging tool'
http://files.myopera.com/d.i.z./stuff/commandline.png

More requests for developer tools in general. This would include error console, source viewer, and the coming firebug-killer:

• eval() debugging and profiling
• a way to view and breakpoint events attached to elements with addEventListener
• (possible) leak detector - see when elements are removed from the dom when there are still events attached to them
• fix bug #278053 - line numbers reported for inline scripts are relative to the script element (not the document)
• add line number reporting to css
• ability to open file to offending line number for javascript and css
• line numbers in source view
• shorcut to jump to specific line numbers in the source viewer (conventionally ctrl-g)
• per-file http debugging broken down into request and response
• distinction between cached and live files