In the past few days, I’ve worked on finding a way to do static code analysis on JavaScript files.The resaon is that I want to apply some sort of binary and source code checking like FxCop and StyleCop provides for C#.

There exist some tools for linting JavaScript like JavaScript Lint, but linting only checks syntax and not implementation. To do that I found the Jscript compiler build into the .NET Framework to be just what I wanted. It compiles JavaScript and reports if it finds any errors.

To test it out, I wrote a simple C# class that takes an array of JavaScript files to compile. I then called the class from a unit test, so I could make the test fail if the compiler finds any errors with the script files. The class contains a single public method called Compile and here is a simplified example on how to use it from any unit testing framework. You can download the class at the bottom of this post.

[Test]

public void JavascriptTest()

{

  string[] javascriptFiles = Directory.GetFiles(@"D:\Website", "*.js",
SearchOption.AllDirectories);

 

  using (JavaScriptCompiler compiler = new JavaScriptCompiler())

  {

    compiler.Compile(javascriptFiles);

    Assert.IsFalse(compiler.HasErrors, compiler.ErrorMessage);

  }

}

What’s nice is that by doing compile time checking of JavaScripts, I get that extra little security that’s so hard to get when developing JavaScript heavy websites. The Microsoft JScript compiler isn’t perfect, so I still recommend using a linting tool as well. The two approaches cover different scenarios. I hope to have a very simple implementation on using a linting tool soon.

Download

Remember to add a reference to Microsoft.JScript in your Visual Studio project before using this class.

JavaScriptCompiler.cs (2,48 kb)

Internet Explorer 8 introduced a new mechanism for ensuring backwards compatibility with websites built for IE7, so "the web" didn't break with IE8's more standards compliant rendering. You could tell IE8 to render your website as IE7 and therefore avoid having to fix potential problems with markup or stylesheets. You can do that in two different ways:

Using a meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />

or this HTTP header:
X-UA-Compatible: IE=7

This puts IE8 into IE7 rendering mode. You can read more about how and why this was done and made into a standard at A List Apart.

The bonus feature

When IE8 renders a page, it looks for the meta tag or HTTP header in order to determine  whether or  not to render in regular standards mode or IE7 standards mode. So you would think that if you don't add the meta-tag or HTTP header, IE8 will just automatically render in IE8 standards mode, right?

According to this flow diagram on IE8 rendering, this isn't the case. If you don't specify any meta-tag or HTTP-header, IE8 will go through a lot of checks in order to determine how to render your webpage. You can very easily avoid the overhead and uncertainty by specifying to always use IE8 rendering mode.  The diagram tells us to use the meta-tag to specify this directly:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

This meta-tag tells IE8 to skip directly to the DOCTYPE check by bypassing all other checks. If you can't add the meta-tag but can add an HTTP header, use this:

X-UA-Compatible: IE=8

The diagram tells us that the meta-tag is preferable over the HTTP header.

Always target the latest IE browser

Setting the X-UA-Compatible meta-tag/header to IE=8 only targets IE8 and no other browser. But what happens when IE9 ships? Microsoft has been clever enough to support the latest IE browser no matter what version might be. You can set X-UA-Compatible to IE=Edge and it will have effect on IE8 and all future IE versions. Keep in mind that upcoming beta releases and internal builds might not renders correctly, so use the IE=Edge at your own risk.

Button disappears

Another nice thing about directly specifying IE8 rendering mode is that the Compatibility View button disappears from the toolbar. Removing that choice might tell some visitors that what they are seeing is actually how you meant for your webpage to look.

This is one of those little features that gives you a little extra control without compromising anything. I see no reason not to use this on any IE8 standards compliant website today.