blog
Application Development, Technology, Web Content Management, Web Development, Browsers, software, Tools
Tools for Troubleshooting Web Sites and CMS Systems July 28th, 2010
Over the years I’ve learned that sometimes trouble comes where you least expect it.
Content Management Systems (CMS) have many different touch points: the physical servers, the server software, connections between servers, the Internet pipe to the user, and the end users’ computers are all involved. Any number of these could be a potential trouble area if there are issues. There are a number of fantastic tools to help isolate bottlenecks, and anyone involved in using, deploying, or maintaining a Web site should be aware of them because it will just make life easier. When a user is looking at a Web page in the browser, sometimes it’s not obvious where the issue is coming from. It’s easy to immediately point at some code on some server somewhere, but what if it’s not that simple?
While some colleagues and I were attending the Sitecore Dreamcore conference in April, several tools were discussed which got me thinking about day to day tools no CMS or Web developer should be without. Some of these were tools I often take for granted, and still others came up that I didn’t even know about. Of course if you’re working in ASP.NET you can debug in Visual Studio, but what about before you even get to that level? What’s actually happening over the pipe or in the Web browser for instance?
Firebug for Firefox
Firebug is a critical tool for any Web developer in my mind. This is an extension for Mozilla Firefox, and has proved to be the tool all others are beginning to be compared against. It features comprehensive tools for looking at network traffic, in-memory DOM states, live page changes, source code inspection, a robust JavaScript Debugger and profiler, console output, and Cascading Style Sheet (CSS) evaluation and inspection. If you haven’t used Firebug in your Web development, you’re seriously missing out.
Firebug Lite
Use Firebug in any browser with Firebug Lite, a pure JavaScript solution. For Sitecore projects, I always forget that Sitecore ships with Firebug Lite out of the box. It’s actually amazing to me how close to the full Firebug tool the Firebug Lite tool has come. You can even apply Firebug Lite to just about any Web page on the Internet using a handy bookmarklet.
Safari Web Inspector
At the Sitecore conference Derek Roberti also reminded us about the Safari Web Inspector. Like Firebug, it features tools to inspect the DOM of the page and the time between requests and responses on the server — an important way to look at HTTP traffic if you’re looking at performance bottlenecks. One example he used noted was if the Media Library was performing badly while generating media from the database — those requests would be slow while everything else would be fine. Interesting. Keep in mind that as a WebKit-based browser, a version of the inspector ships with Google Chrome as well.
Fiddler Web Debugger
Another tool, which I believe originally came out of Microsoft, is the Fiddler Web Debugger. Much like the Safari Web Inspector, Firebug will evaluate HTTP traffic requests, headers, and responses. But Fiddler does a whole lot more. It will record and even replay requests.
Charles Web Proxy
A personal favorite of mine is the Charles Web Proxy, which is cross platform and is another HTTP inspector. You really can’t go wrong with sniffing HTTP traffic and I think it’s critical to have at least one tool like these in your arsenal.
.Net Reflector
This tool is exceptionally handy for any ASP.Net developer as it will de-compile and inspect any .Net based DLL to see all built-in objects, their methods and properties in a searchable, drill-down UI. I’ve used it to do things as simple as locate exceptions in third-party code, but obviously it could be used for much, much more.
Server-Side Tools
Of course Sitecore and other CMS tools are mostly server-based and so no toolset would be complete without some great server-side monitoring tools.
Wireshark
This is an Open Source tool which looks and inspects just about every single protocol request made against servers.
AVICode
This is an exceptionally robust server-based agent which monitors all ASP.Net Web requests on a Web server or group of servers. It can monitor all DB connections, SQL statements, call stacks, exceptions, requests, and responses in real time, providing HTTP payload information and query data as it’s happening. This monitors a live server while your public is actually using your application, live, in real time. Their toolkit even goes as far as injecting a small snippet of unobtrusive JavaScript in responses to performance monitor request and response times, AJAX data, and catch error conditions and the code which generated the errors on the client.
Dynatrace
Finally, another suite of tools which apparently was discussed at the Velocity Conference a few weeks ago was the Dynatrace product suite, which seems similar to AVICode in many ways. They however have a free offering that sounds more along the lines of Firebug for debugging Ajax requests.
And the List Goes On
Obviously there are server, network, and performance monitoring tools galore around these days. These were just a small list of ones I’ve been thinking about. Others on the client side include MSIE’s Developer Tools (getting a major facelift in IE9) and Opera’s DragonFly. You could spend all day looking for tools and not getting any actual debugging done: More than 440 tools are listed here in a number of categories.
Happy debugging!
One Comment for "Tools for Troubleshooting Web Sites and CMS Systems"
-
Great post, Rob!
I would like to add Process Monitor as another extremely useful tool, saved me days, literally!
Well suited for such process level things as blocked threads due to missing FS permissions, etc.Alex Shyba on July 29th, 2010 at 11:08 am
