Sign up | Lost password? | Help

[ advanced search ]

[user js] View page's DOM in a tree view

Forums » Opera Community » General Opera topics » User JavaScript

Tuesday, 18. July 2006, 19:08:56

xErath

javascript guru

avatar

Posts: 6413

Norway

Opera Software

[user js] View page's DOM in a tree view

This script shows the current DOM held by the rendering engine, in a nice tree, which nodes are collapsible/expandable.
Instruction are inside the script.
source-tree-view.js
A screenshot
stvsample.png

Tuesday, 8. May 2007, 16:04:29

mark_poleon

Darkstar

avatar

Posts: 5108

China

Very useful
Can you make it a bookmarklet?
Thanks

Tuesday, 8. May 2007, 22:59:37

xErath

javascript guru

avatar

Posts: 6413

Norway

Opera Software
save the user js file use this
javascript:ujs_SourceTreeView();

Wednesday, 9. May 2007, 02:58:42

Darken

Dragonfly rulez!

avatar

Posts: 356

Canada

Originally posted by xErath:

javascript:ujs_SourceTreeView();


Hummm, excellent... thanx.

Wednesday, 9. May 2007, 03:00:02

mark_poleon

Darkstar

avatar

Posts: 5108

China

I mean a pure bookmarklet.
Thanks

Wednesday, 9. May 2007, 03:13:11

GT500

Security Industry

avatar

Posts: 3450

Fighting Malware

I must be having an off day. I keep trying to make a button, and it doesn't work. I know the script is working, because I can type the "javascript:ujs_SourceTreeView();" into the address bar, mash 'enter', and it goes to the tree view...

Can someone post a button so that I can find out if I'm actually having a real issue here, or if I'm just going insane? :wink:

Wednesday, 9. May 2007, 14:38:26

GT500

Security Industry

avatar

Posts: 3450

Fighting Malware

Thanks. I'll try it as soon as I'm around my laptop again. :wink:

Wednesday, 9. May 2007, 14:53:03

AyushJ

avatar

Posts: 4754

I think this one is better: http://dev.opera.com/tools > Dom Snapshot

Wednesday, 9. May 2007, 15:49:15

GT500

Security Industry

avatar

Posts: 3450

Fighting Malware

Originally posted by AyushJ:

I think this one is better: http://dev.opera.com/tools > Dom Snapshot



That is a very nice DOM source viewer, but I'm fairly certain that xErath's version works locally instead of by communicating with an online server, which makes xErath's version faster. :wink:

Wednesday, 9. May 2007, 16:03:20 (edited)

mark_poleon

Darkstar

avatar

Posts: 5108

China

Originally posted by AyushJ:

I think this one is better: http://dev.opera.com/tools > Dom Snapshot


Source Tree View's code indentation is much better than DOM Snapshot's, and DOM Snapshot lacks the function of code folding, so Source Tree View is the best.

Wednesday, 9. May 2007, 16:31:03

GT500

Security Industry

avatar

Posts: 3450

Fighting Malware

Originally posted by mark_poleon:

Source Tree View's code indentation is much better than DOM Snapshot's, and DOM Snapshot lacks the function of code folding, so Source Tree View is the best.



I agree that Source Tree View's indentation and code folding is much better, but Opera's version is a bit easier to read... :wink:

Thursday, 10. May 2007, 04:52:47

xErath

javascript guru

avatar

Posts: 6413

Norway

Opera Software

Originally posted by GT500:

which makes xErath's version faster.


...and a lot older :wink:. I have that script since the early 8s.

Thursday, 10. May 2007, 15:12:20

GT500

Security Industry

avatar

Posts: 3450

Fighting Malware

Originally posted by xErath:

...and a lot older :wink:. I have that script since the early 8s.



Well, it still works. And it does a good job. :wink:

Wednesday, 19. December 2007, 01:12:14

xErath

javascript guru

avatar

Posts: 6413

Norway

Opera Software
Hi again.
I hope you haven't missed upgrades for this script.
You have a new version available
source-tree-view.js
Changes:
- links are clickable (href, src, data)
- colors now are blueish (less agressive), font is smaller
- integration with my syntax highlighter script for script elements (check mysig)

When I have time I'll do some performance fixes. Currently there are many string operations being done. when I have time I'll optimize this part.

Wednesday, 19. December 2007, 20:02:39

Darken

Dragonfly rulez!

avatar

Posts: 356

Canada

Good, thanks for the update.

Tuesday, 22. July 2008, 11:57:02

garywalsh

Clinging to the wreckage

avatar

Posts: 40

United Kingdom

Fantastic!

Many thanks xErath (":wink:

Forums » Opera Community » General Opera topics » User JavaScript