<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Webtronica.net &#187; Javascript</title>
	<atom:link href="http://webtronica.net/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://webtronica.net</link>
	<description>An exploration of webdesign</description>
	<lastBuildDate>Fri, 26 Feb 2010 03:05:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Debug javascript without alerts through the Firebug console</title>
		<link>http://webtronica.net/2010/02/debug-javascript-without-alerts-through-the-firebug-console/</link>
		<comments>http://webtronica.net/2010/02/debug-javascript-without-alerts-through-the-firebug-console/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 04:01:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://webtronica.net/?p=35</guid>
		<description><![CDATA[If you are a javascript developer at all, most likely you have had to debug your code with an alert box. This can be horribly annoying when trying to detect line numbers or when working with periodical functions. This is where the Firebug console can be super handy
I have taken my information for this post [...]]]></description>
			<content:encoded><![CDATA[<p>If you are a javascript developer at all, most likely you have had to debug your code with an alert box. This can be horribly annoying when trying to detect line numbers or when working with periodical functions. This is where the Firebug console can be super handy</p>
<p>I have taken my information for this post from David Walsh&#8217;s blog (because it is a great ref for mootools, and because his posts are always helpful).</p>
<h2>Getting Started</h2>
<p>First off, you are gonna need <a title="get firefox" href="http://www.mozilla.com/en-US/firefox/personal.html">firefox</a> and a little plugin called <a title="firebug" href="http://getfirebug.com/">firebug</a>. I personally enjoy the <a title="web developer toolbar" href="https://addons.mozilla.org/en-US/firefox/addon/60">web developer toolbar</a> for firefox as well. Now you should have these up and running.</p>
<p>To start out, you will need to open firebug by clicking on the little bug icon at the bottom right corner of firefox.</p>
<p>Now click the arrow next to &#8220;console&#8221; and click &#8220;enable&#8221;. You can enable different features of firebug for different domains.</p>
<p>Lastly, go to your site where you have written some javascript.</p>
<h2>Hello World meet Hello Console</h2>
<p>Now, it&#8217;s time to write some basic debug javascript. A list of console commands can be found on David Walsh&#8217;s blog, here:</p>
<p><a title="firebug console functions" href="http://davidwalsh.name/firebug-console-log">http://davidwalsh.name/firebug-console-log</a></p>
<p>here is a basic &#8220;hello world&#8221; type of example of the firebug console:</p>
<div><div class="wp-synhighlighter-expanded"><a name="#codesyntax1"></a><a style="wp-synhighlighter-title" href="#codesyntax1"  onClick="javascript:wpContainer=this.parentNode.parentNode.getElementsByTagName('div')[1];	if(wpContainer.style.display=='none') {wpContainer.style.display=''; this.parentNode.className='wp-synhighlighter-expanded'} 	else {wpContainer.style.display='none'; this.parentNode.className='wp-synhighlighter-collapsed'}">Code</a></div><div class="wp-synhighlighter-inner"><pre class="pascal" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">console.<span style="color: #0066ee;">log</span><span style="color: #009900;">&#40;</span><span style="color: #ff0000;">'hello console'</span><span style="color: #009900;">&#41;</span>;</div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</div></li></ol></pre></div></div></p>
<p>now refresh your page to run that javascript, and say hello to firebug console. Now close your console and refresh the page again, or try to run the page in IE. You get a javascript error, and your browser throws a temper tantrum. Next, I will show you a little fix for this. I want to make a major note that I do NOT condone leaving debug code in your javascript, but the next section will allow you to sniff for firebug and for the console.</p>
<h2>Sniff out firebug and it&#8217;s console friend</h2>
<p>As stated on Walsh&#8217;s blog, some site get bogged down under firebug because of many ajax requests. Or you might want to just run your site on IE real quick without removing your debug console code. Well, Walsh comes to the rescue again with some awesome snippets found here:</p>
<p><a title="sniff out firebug" href="http://davidwalsh.name/how-to-sniff-firebug-disable">http://davidwalsh.name/how-to-sniff-firebug-disable</a></p>
<div><div class="wp-synhighlighter-expanded"><a name="#codesyntax2"></a><a style="wp-synhighlighter-title" href="#codesyntax2"  onClick="javascript:wpContainer=this.parentNode.parentNode.getElementsByTagName('div')[1];	if(wpContainer.style.display=='none') {wpContainer.style.display=''; this.parentNode.className='wp-synhighlighter-expanded'} 	else {wpContainer.style.display='none'; this.parentNode.className='wp-synhighlighter-collapsed'}">Code</a></div><div class="wp-synhighlighter-inner"><pre class="pascal" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>! <span style="color: #009900;">&#40;</span><span style="color: #ff0000;">'console'</span> <span style="color: #000000; font-weight: bold;">in</span> window<span style="color: #009900;">&#41;</span> || !<span style="color: #009900;">&#40;</span><span style="color: #ff0000;">'firebug'</span> <span style="color: #000000; font-weight: bold;">in</span> console<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;">{</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #666666; font-style: italic;">&nbsp;var names = ['log', 'debug', 'info', 'warn', 'error', 'assert', 'dir', 'dirxml',</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #666666; font-style: italic;">'group', 'groupEnd', 'time', 'timeEnd', 'count', 'trace', 'profile', 'profileEnd'];</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #666666; font-style: italic;">&nbsp;window.console = {}</span>;</div></li><li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span>; i &lt; names.<span style="color: #0066ee;">length</span>; <span style="color: #339933;">++</span>i<span style="color: #009900;">&#41;</span> window.<span style="color: #0066ee;">console</span><span style="color: #009900;">&#91;</span>names<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;">{}</span>;</div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</div></li></ol></pre></div></div></p>
]]></content:encoded>
			<wfw:commentRss>http://webtronica.net/2010/02/debug-javascript-without-alerts-through-the-firebug-console/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

