24.7.06

Tricky, Tricky JavaScript - part two: setup

It's easier to help each other if we're all on the same page. This is because before asking for help you've already done the minimum search, and because when we use your environment it sucks to not have the tools we need.
  1. Bookmark Devguru. It is by far the fastest way to get JS reference. Bookmark it. Do it.
  2. Disable caching
    • In IE: Tools > Internet Options... > "Temporary Internet files" Settings... > Check for newer versions every visit to the page. Amount of disk space to use: 1MB
    • In FX: Tools > Options > Privacy > Cache [tab] > Use up to 0 MB of disk space
    In IE, this does not guarantee that it won't cache a file. Since the minimum amount to use is 1MB, it's possible that it can try to use that space and cache what you don't want. Don't fret, you can always use Ctrl-F5 to force a full refresh in both browsers.
    Also, I'd rather leave FX alone since that's what I use for browsing. When I use it for testing, I always force-refresh if needed.
  3. Install the debugging tools. These include debuggers and other diagnostic tools. This list is the absolute must-have.
    MSDE
    Microsoft Development Environment. The JS debugger for IE. Comes bundled with MS Office, you can't download it separately. Make sure it's enabled by going to Tools > Internet Options > Advanced [tab] and uncheck disable script debugging. To open it, there's a few ways:
    • View > Script Debugger > Open (or alt-v,e,o)
    • Insert the debugger keyword in your code. IE will stop execution there and prompt to open a debugger. Venkman also stops at this keyword, but it won't open the debugger for you. Firebug also stops at this keyword.
    Fiddler
    a proxy that will allow you to see exactly what the server is sending before the browser mangles it. You can check headers (caching, mime-types, compression) and tamper with the request and response.
    DevToolbar
    Some fool at MS made this awesome toolbar. You can see the current document's structure, tamper with nodes (including styles!) and a bunch of other crappola.
    Firebug
    An excellent FX extension with a console, debugger and DOM inspector. Lightweight, but a bit... lightweight. Not quite a replacement for Venkman or the DOM inspector, but very close.
    Venkman
    The JS debugger for FX. It's a bit clunkier than MSDE, but you'll have to use it one day.
  4. Using scripts. There are a few ways to include your scripts in a page, and each is used in a particular situation.
    Inline <script> tag.
    The simplest and dirtiest way, you can insert this anywhere in your page by writing your code as the tag's body. Make sure you have type="text/javascript". Use inline scripts when you expect your scripts to initialze your page. Scripts within a page must be kept to a minimum. Pass your JSP variables to functions that you are storing in another file, which can be cached.
    <script type="text/javascript">
    // assume a function:
    initializeRules(ruleId, context);
    initializeRules(<c:out value="${ruleId}" />,
    "<c:out value="${context}" />");
    </script>
    Linked <script> tag.
    This goes in the <head> tag and you set the src attribute to point to your JS file. The main thing to consider here is that the browser can and will cache JavaScript imported this way, which saves you time and bandwidth for subsequent page loads. Note that you can only do this when loading a fresh page.
    <script type="text/javascript" src="/path/to/linkedScript.js"></script>
  5. Get Documentation. There are a few tools out there that will extract documentation from source files and generate an API similar to JavaDoc. You can also write one yourself using regular expressions, of course. It is important that you fully document your code and check the generated documentation for it. Ideally, this documentation is built automatically by the people or department responsible for it. In reality, documentation tends to get lost somewhere.
  6. Syntax check-up. There's always some nasty habit that will eventually kill us. Same with code. Make sure you run your code through JSLint to catch all syntax errors. There's a version online or you can also set it up locally to work with your favorite text editor.

technorati tags:

No comments: