Tips using Firebug Lite and Full Screen with jsFiddle28 Apr 2010
So, I’ve been finding myself adding Firebug Lite as a resource to jsFiddle and letting Firebug be part of the rendered output.
If you’ve tried this, then you may have noticed that Firebug auto-opens once jsFiddle is rendered. Seeing that the Rendered section isn’t very big this could be a big problem.
Thankfully, there are several options you can provide to Firebug Lite to customize it’s behavior.
I find myself setting the following three options on a regular basis.
I also like to use JsBin quite a bit and honestly switch between it and jsFiddle quite often depending on what I am doing.
Full Screen Option
One of the features that I really like in JsBin is that you can launch the session to Full Screen and not inside the editor. This is helpful if you want to interact with the DOM with your browser’s debugging tools, minimize any side-effects the editor might be creating, etc…
As it turns out, jsFiddle has this same feature, but you have to know how to get to it. You can just add “/show” to the end of your jsFiddle URL to show it without the editor. To swap back to the edit view you can simply remove the “/show” from the URL.
- http://jsfiddle.net/elijahmanor/UYK9G/ – jsFiddle Editor
- http://jsfiddle.net/elijahmanor/UYK9G/show – jsFiddle Full Screen
- http://jsfiddle.net/elijahmanor/UYK9G/embedded – jsFiddle Embedded
Full Screen / Editor Toggle Button
Now that we know we can swap back and forth between Full Screen and Edit mode, what I miss is the nice little JsBin link in the upper-right hand corner of the page allowing you to easily swap between the two environments.
id : "show",
text : window.location.pathname.indexOf("show/light") > 0 ?
"View Full Screen" : "Edit using jsFiddle",
href : window.location.pathname.indexOf("show/light") > 0 ?
window.location.pathname.replace(/light\/$/gi, "") :
target : "_blank"
…and here is the supporting CSS that I put in the CSS window of the jsFiddle Editor.
border-bottom: 1px solid rgb(153, 153, 153);
border-left-width: 1px solid rgb(153, 153, 153);
text-shadow:0 1px 0 #0C131C;
font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Luxi Sans",Tahoma,sans-serif;
The following screenshot is what the result window looks like inside the jsFiddle Editor
The following screenshot is what the window looks like in jsFiddle Full Screen mode
You can view, run, and edit the above code snippets using my jsFiddle