Opera developer tools

Forums » General Discussions

General DevOpera discussion group

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

By dstorey Monday, 10. September 2007, 21:05:34

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.

By pitredbeard Tuesday, 11. September 2007, 15:22:36

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

Live DOM browser

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

JavaScript debugging with property browser

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 isn't 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.

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

Michael

Post edited Tuesday, 11. September 2007, 17:23:17

By fearphage Tuesday, 11. September 2007, 17:03:10

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

By IceArdor Wednesday, 12. September 2007, 03:14:55

Yes!

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

By fearphage Wednesday, 12. September 2007, 14:51:08

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 (file://...) in addition to online pages

Post edited Thursday, 13. September 2007, 04:12:23

By koko775 Wednesday, 12. September 2007, 15:08:47

Off-topic comment removed by moderator.

Post edited Thursday, 13. September 2007, 14:38:34

By Darken Wednesday, 12. September 2007, 16:14:01

@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

By fearphage Wednesday, 12. September 2007, 19:08:10

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.

Post edited Wednesday, 12. September 2007, 19:59:52

By d4n3 Friday, 14. September 2007, 12:20:55

Originally posted by fearphage:

inline w3c (x)html validation

By IceArdor Saturday, 15. September 2007, 19:03:32

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;

Post edited Sunday, 16. September 2007, 07:20:50

By fearphage Saturday, 15. September 2007, 21:48:58

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.

By p4trykx Wednesday, 19. September 2007, 00:49:58

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.

By fearphage Friday, 21. September 2007, 03:15:44

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

By fx910 Monday, 24. September 2007, 13:51:19

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.

By fearphage Thursday, 27. September 2007, 17:53:25

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

By chrismills Tuesday, 2. October 2007, 12:54:01

Hi guys,

Chris Mills here from Opera - I'm currently working with the web dev team to generate and collate lots of feedback on developer tools, with the aim of producing better ones in the near future. Your feedback here is great, and will be taken into consideration. We also have a questionnaire to fill in - if you would like to participate in this venture further, then e-mail me at cmills [at] opera [dot] com.

best regards,

By artifact Tuesday, 9. October 2007, 16:17:38

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

By haavard Tuesday, 9. October 2007, 18:28:47

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

By d.i.z. Saturday, 27. October 2007, 22:30:25

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

By fearphage Sunday, 16. March 2008, 06:16:17

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

Post edited Sunday, 16. March 2008, 20:05:40

Moderators: jax | malware | mcx | operadev

Login

Forums » General Discussions

Opera developer tools