Post Load Basic View Source
During one of my recent experiments, I used a ton of MooTools functionality to modify the elements on the page. Unfortunately, I kept running into a problem and couldn't figure out the problem. Here's a portion of the MooTools 1.2 code I had:
$('image').set('left',0);Obviously, the above code doesn't do what I was hoping but I was confused as to what was going on. To do that, I needed to see the page source but using the browser's "View Source" feature wasn't an option. I created the following link to view the page source after the initial page load:
<a href="javascript:alert($('body').innerHTML);">View Source</a>
Sweet! Using this link, I found that the element I was trying to modify now looked like this:
<img src="my-image.jpg" id="image" left="0" />
Seeing that, I knew that I needed to change my Moo to:
$('image').setStyle('left',0);Look forward to a more graceful solution soon!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
Or you could use the Web Developer plugins for Firefox or IE. Or even if you don’t want to use those, at least log the body.innerHTML to the console and use Firebug, rather than an alert. Much cleaner.
It currently isn’t working in the new FF3 RC1 or Betas but when I used FF2 all the time I could do the same by using the “View Source Chart” plugin.
It rendered post-javascript source and in a nice graphical way too. Used multiple colours to show different bits of the source structure and even allowed for you to collapse/expand sections of code.
Kind of like Dreamweaver’s collapse/expand ability but MUCH better and less complicated that your method.
You might be able to get it working in FF3 by hacking at the Firefox config section.
well i agree with the above comments. why don’t debug with Mozilla Firefox and Firebub?
simply use console.debug(yourJavascriptHere)
…sorry, Firebug!!
@danfreak: I’ve not used Firebug a ton for that because recently it made my Firefox freeze. With Firefox 3, hopefully that wont happen.
Have you tried the new beta (of Firebug)? It’s rock solid for me. You can get it from the Firebug website – the addon sites only list the current stable version right now. The new beta includes new features that may help with the stability issues you had; namely, it won’t load data for a page unless you specifically open Firebug.
I used to use Firefox with Firebug for my javascript development. That is until Safari 3 was released. The new ‘Develop’ menubar item, found in Safari->System Preferences->Advanced->click on the check box for develop bar helps a lot with my development.
In your javascript, use console.log or .debug and your innerHTML and it will appear in the new error console.
Definitely play around with it and see what you like.
Although I like the idea of how David created the “View Source”-link. This helps a lot for debugging the Moo-code. Besides Firebug, I’ll use this method for a quick source-view. Thanks!
Alert the $(‘body’).innerHTML …of course!!
Why didn’t I ever think of this… Obviously it can be made much more elegant than an alert, but the idea is a good one.
Thanks a bunch!
…Instead of alerting, inserting it in a div maybe?
$(‘#source-code’).innerHTML = $(‘body’).innerHTML
where #source-code would be the id of an empty div at the end of the page… like a debug window.