Tips using Firebug Lite and Full Screen with jsFiddle

jsFiddle

I’ve been using jsFiddle more and more to test and share JavaScript and jQuery code.

Although I love that jsFiddle shows the HTML, JavaScript, CSS, and Results window all at the same time, I also would love to somehow see the output of the console window in the User Interface. Depending on the browser someone views my jsFiddle projects, the console may or may not be defined. I really don’t like alert statements and sometimes it is just easier to console.log() than it is to write out messages to the DOM.

Firebug Lite

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.

<script type="text/javascript">
    firebug.env.height = 200; //Set the initial height of the Firebug window
    firebug.env.debug= false; //Set Firebug to be initially launched or minimized
    firebug.env.detectFirebug = true; //If browser has Firebug, don’t interfere with it
</script>

 

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.

As it turns out, I’ve recreated this in jsFiddle by adding the following code to my JavaScript window…

$("<a />", {
    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, "") :
        window.location.pathname.replace(/show\/$/gi, ""),
    target : "_blank"
}).appendTo('body');  

…and here is the supporting CSS that I put in the CSS window of the jsFiddle Editor.

#show {
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 5px;
    background-color: #3D6F9A;
    color: #ffffff;
    border-bottom: 1px solid rgb(153, 153, 153);    
    border-left-width: 1px solid rgb(153, 153, 153);
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;     
    border-right-width: 0px;
    border-top-width: 0px;
    text-decoration: none;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:0 1px 0 #0C131C;
    font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Luxi Sans",Tahoma,sans-serif;
    display: block;
}

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