This article was sponsored by Modern.IE. Thanks for supporting the sponsors that make SitePoint possible!
There’s no shortage of front end tools to help us test the quality of our code. Some examples of these tools are JSHint and JSLint, to test our JavaScript files, the W3C Markup validator, to test that our HTML code is valid and written according to the specifications, and the W3C CSS validator to verify our style sheets, but there are many more.
Recently on SitePoint, we’ve been highlighting another such tool: Microsoft’s Modern.IE. The service includes the ability to scan your website to identify common coding problems and generate a report (also available as a .pdf file). This report contains the result of each test and some recommendations about how to fix or improve it. This way you can ensure your code adheres to the current best practices, performs well, and implements features specifically designed to target Windows 8. All you have to do is to provide the URL of the web page you want to analyze.
Louis Lazaris wrote a great guide to this scan tool in his article Using modern.IE to Identify Common Coding Problems. His article covered live sites. In this tutorial, we’ll look at how you can perform the scan on a project hosted on your machine.
What’s Modern.IE?
Modern.IE is a service that provides a collection of different tools to test our web pages from different points of view and for different purposes. For example, Modern.IE offers several free Windows virtual machines to run any edition of Internet Explorer from a Windows, Mac, or Linux host.
Another feature is a free screenshot automation tool powered by BrowserStack. This tool loads up a given website on a range of mobile and desktop devices and presents captured screenshots in a few minutes. This means you can get screenshots of your website as it would be seen on the Android browser running on Android, on Firefox and Opera running on Windows 8, or even on devices you might not easily have access, to, like an iPhone 4S using mobile Safari.
If you want to know more about this and other features, you can read the articles Quick Browser Screenshot Testing at Modern.IE by Craig Buckler and Browser Testing with Modern.IE by James George.
Now that you have the context, let’s delve into scanning a local project.
Recently on SitePoint, we’ve been highlighting another such tool: Microsoft’s Modern.IE. The service includes the ability to scan your website to identify common coding problems and generate a report (also available as a .pdf file). This report contains the result of each test and some recommendations about how to fix or improve it. This way you can ensure your code adheres to the current best practices, performs well, and implements features specifically designed to target Windows 8. All you have to do is to provide the URL of the web page you want to analyze.
Louis Lazaris wrote a great guide to this scan tool in his article Using modern.IE to Identify Common Coding Problems. But his article was on a live site, in this tutorial we’ll look at how you can perform the scan on a project hosted on your machine.
What’s Modern.ie
Modern.IE is a service that provides a collection of different tools to test our web pages from different points of view and for different purposes. For example, Modern.IE offers several free Windows virtual machines to run any edition of Internet Explorer from a Windows, Mac, or Linux host.
Another feature is a free screenshot automation tool powered by BrowserStack. This tool loads up a given website on a range of mobile and desktop devices and presents captured screenshots in a few minutes. This means you can get screenshots of your website as it would be seen on the Android browser running on Android, on Firefox and Opera running on Windows 8, or even on an iPhone 4S using mobile Safari.
If you want to know more about this and other features, you can read the articles Quick Browser Screenshot Testing at Modern.IE by Craig Buckler and Browser Testing with Modern.IE by James George.
Now that you have the context, let’s delve into scanning a local project.
How to analyze a local website
Installing the scan tool
The Modern.IE tool to scan a website is available for free on GitHub. To get a copy of the source, you can open the command-line and run the command:
git clone https://github.com/InternetExplorer/modern.IE-static-code-scan.git
You can grab a copy, install it and then start scanning your projects locally using a Git client.
Alternatively, you can click on the Download button on the right side of the page as shown in the figure below.
Once you have downloaded the tool, you’ll need to download and install Node.js (version 0.10 or higher). If you already have a version of Node.js installed, well, you’re one step closer to using this tool.Continue reading %How to Test Your Site Locally with Modern.IE%