Best Debugging Tools & Resources for Testing Website Layouts

Once a website reaches the stage where its coded and running in a browser the project is almost complete. Party time? Not yet Wayne, because after expelling that heavy sigh of relief you’ll realize there are likely a few missteps or slight errors in the code. It never hurts to debug areas of your HTML, CSS, or JavaScript to ensure full compatibility with all browsers and screen sizes.

geek stuff android iphone smartphone

This article will focus on some handy tools you can use for testing freshly-minted layouts. Modern standards of HTML5 and CSS3 have allowed for greater control over rendering and layout styles. But support for older browsers has been waning in recent years. As a developer you need to decide which browsers are worth supporting and how much effort you’ll put into debugging potential issues.

Code Validation

Although this process isn’t always required there’s no downside to validating your code. HTML5 and CSS3 have specifications that should be followed to ensure standards-compliant code. This establishes some trust that your page will render properly in all modern browsers.

The W3 Validator is a common tool which can check the code of any live website. There is also a CSS Validator made specifically for CSS stylesheets. Since web standards are put out by the W3C I’d say they’re a trustworthy resource.

html5 w3 validator website

Otherwise you might try a quicker solution and use browser extensions. Validity for Chrome is a free option which checks HTML content on any webpage. There are other choices for Firefox and Opera which are also free to download. The process only takes a few seconds and it will help you locate obscure hiccups in your code.

Responsive Design

Obviously mobile smartphones have taken the World Wide Web in a completely new direction. Designers are now creating websites that adapt naturally to any screen size. CSS3 has made the process easier but it’s still a bushel of work.

Thankfully there are online webapps to help web designers check responsive states of individual layouts. Responsive Test is one such webapp that lets you resize the window to any width of your choosing. In the corner you can also choose between preset resolutions for common devices like tablets, laptops, and smartphones.

responsive test website webapp dynamic

Another cool webapp Responsinator offers device-specific solutions. You can load any webpage into the device windows and they should render as expected. Designing for mobile can be tough when you’re trying to match a laundry list of devices that you don’t even own. Thankfully this handy little tool can help.

Classic Browser Support

Very few people are still running Internet Explorer 6, but somewhere in the caves of Nepal they do exist. Just a decade ago this was a very common problem amongst web designers who needed to support the widest audience possible. Thankfully Microsoft has come a long way since those days but even recent versions of IE have dealt with a fair share of criticism.

The latest version IE11 is much more reliable than previous releases. But unfortunately there are many Windows users who rarely update or just stick with what they got right out of the box. This means a wide collection of users browsing on IE10, IE9, and even down to IE7. Granted the number of users running IE7 is small, but still noticeable.

An online webapp IE NetRenderer is somewhat new but offers a choice for all the older and newer versions. This website could also be useful to developers who only have access to computers running Mac OS X.

ie internet explorer tab extension browser

If you’d prefer a browser plugin might I recommend IE Tab? It’s been released for both Chrome and Firefox with a large assortment of options to choose from. The whole project is open source and has garnered support from a small community of developers. Great choice for anyone who wants to test IE rendering for local HTML files instead of websites already online.

CSS & JS Debugging

Aside from rendering HTML pages you also have to worry about the rendering of CSS styles and JavaScript in different browsers. These are separate items altogether but they share a similar process of debugging after the initial development.

CSS Lint and JS Lint are free tools for debugging your code. You might also try using the browser console window but this isn’t always a great solution. These online linting tools will offer helpful advice about which lines of code are causing problems, possible duplicate lines, or generally incorrect syntax.

After you’ve checked for bugs and you know the code is ready for production it might also be worth minifying the files. CSS and JS code is often separated from the HTML into external files which are included in the main document. By minifying & reducing the amount of whitespace it makes the file sizes smaller and quicker to load.

Of course it would be ridiculous to go through every file and delete each empty character one-by-one. There are tools like JSCompress and Clean CSS which can perform this process automatically. Just remember that it’s a lot tougher to edit code that’s been compressed so you should try to keep two separate versions if possible. Save the original for future edits but use the compressed version live on the web.

Final Thoughts

If you were writing a for-profit dissertation you wouldn’t write the first draft and call it finished right? Well maybe you would, but don’t expect to find that piece in any scientific journals. I feel the rule of editing written documents also applies to editing coded websites. You are looking for mistakes but you’re also looking for ways to improve the code.

I hope these tools will provide a reliable post-development validation process for web developers. Nobody ever said it would be easy to build a website – but there are some logical steps you can follow to make the process a whole lot smoother.

Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

15 WordPress Themes That Will Rock 2015