TrimBreakpoint - trimpath

Updated Aug 04, 2007 by steve.yen

TrimBreakpoint

{ TrimBreakpoint home -- download | demo}

'''TrimBreakpoint''' is a super lightweight debugging utility for JavaScript, to temporarily stop code execution so that you can inspect browser variables at runtime, including any variable in scope. It's meant for when you're too lazy to pull out your Venkman or Visual Studio and when those alert()'s just aren't doing enough for you.

Note: TrimBreakpoint was written before Firebug sprang to wonderous life. If you're on Firefox, use Firebug. It has a great debugger/breakpoint feature, amongst many others. If you're on IE without any other tools, on the other hand... shrug.

Here's a demo for TrimBreakpoint

Usage

First, include the trimpath/breakpoint.js script, like...

<html>
 <head>
  <script language="javascript" src="/javascripts/trimpath/breakpoint.js"></script>
  ...
 </head>
 ...
</html>

Then, in the middle of your code wherever you want to put a breakpoint, add a line of code like...

breakpoint(function(expr){return eval(expr);});

(Obviously, this is best when copy-&-pasted.)

If you end up setting a zillion breakpoints, you can also pass a message, to give your breakpoints a name, like...

breakpoint(function(expr){return eval(expr);}, "breakpoint in cal.validate()");

If you've set the breakpoint in a loop body, it's also useful to show the current loop variables, like...

breakpoint(function(expr){return eval(expr);}, 
           "convertList() currCounter is " + currCounter);

Then, at runtime, when the breakpoint line is reached, execution will stop and a prompt dialog will open where you can enter JavaScript expressions in order to...

Inspect variables and objects in the breakpoint's scope. For example, "document.getElementById('foo').style.width"
Set and modify variable values, too. For example, "currCounter = 0"
Additionally, you can also call alert() from the breakpoint prompt dialog, such as when you want to inspect something with a large output value. For example, "alert(myHiddenTextarea.value)"

The breakpoint prompt dialog will repeatedly ask for more expressions until you click Cancel or enter nothing. After you Cancel, normal program execution will resume.

To help save on repeated typing during debugging, you can also pass an optional initial expression string as the 3rd parameter to breakpoint(), like...

breakpoint(function(e){return eval(e);}, 
           "convertList() currCounter is " + currCounter,
           "resultList[resultList.length - 1]");

Think of TrimBreakpoint as the interactive version of the good old alert() trick.

One nice feature of TrimBreakpoint is that the breakpoints are persistent and settable right from your favorite text editor, because the breakpoint() calls are just right in your code. That's nice for when you're hitting your browser's reload button a lot while cursing at that mysterious JavaScript bug.

TrimBreakpoint also behaves pretty much the same across different browsers (at least for IE 6.x and Firefox 1.0, which I tried it against).

You can pickup TrimBreakpoint from the downloads page.

Here's the blog post about TrimBreakpoint.

{ TrimBreakpoint home -- download | demo }

Comment by sandipchitale, Apr 03, 2008

How about this improvement?

/**
 * TrimPath Breakpoint. Release 1.0.24.
 * Copyright (C) 2004, 2005 Metaha.
 * 
 * TrimPath Breakpoint is licensed under the GNU General Public License
 * and the Apache License, Version 2.0, as follows:
 *
 * This program is free software; you can redistribute it and/or 
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 * 
 * This program is distributed WITHOUT ANY WARRANTY; without even the 
 * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
 * See the GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
var TrimPath;
if (TrimPath == null)
    TrimPath = new Object();

/**
 * TrimPath.breakpoint usage: 
 *
 * In the middle of your code somewhere, add a line of code like...
 *
 *   breakpoint(function(expr) { return eval(expr); });
 *
 * You can also pass a message, like...
 *
 *   breakpoint(function(expr) { return eval(expr); }, "breakpoint #2 in datetime validation");
 *
 * You can also pass in an initial expression as the 3rd parameter, like...
 *
 *   breakpoint(function(expr) { return eval(expr); }, "breakpoint #2 in datetime validation", "dateStr");
 *
 * Then, you can enter expressions in the prompt dialog to inspect variables and objects
 * in the breakpoint's scope.  Click Cancel in the prompt dialog to continue processing.
 */
var breakpoint = TrimPath.breakpoint = function(evalFunc, msg, initialExprStr) { 
    // TrimPath.breakpoint currently works only in DOM/browser environment.
    if (msg == null)
        msg = "";
    var expr = initialExprStr || "arguments.callee";
    var result;
    while (true) {
        expr = prompt("BREAKPOINT: " + msg + "\n" +
            (result ? 
                "Value of expression : '" + expr + "' is:\n"
                + "--------------------\n"
                + result + "\n" 
                + "--------------------\n"
            :
                "\n") 
            + "Enter " + (result ? "a new" : "an") + " expression to evaluate, or Cancel to continue.", expr); 
        if (expr == null || expr == "")
            return;
        try {
            result = evalFunc(expr);
        } catch (e) {
            result = e;
        }
    }
}