Toolbox
Easy Web Debugging, Extending Reflector, and More
Scott Mitchell
Contents
Client-Side Web Development
Blogs of Note
Extend Lutz Roeder's Reflector
The Bookshelf
Client-Side Web Development
While the design-time experience of Visual Studio® truly simplifies the task of writing HTML, CSS, and JavaScript for a Web application, it's not perfect. The designer paints a fairly accurate picture of how a page will look in a browser, but it's not always exact and, of course, it can't support scenarios where HTML or CSS is dynamically added. Furthermore, the designer doesn't execute client-side script. Consequently, testing a Web page's appearance and client-side script involves quite a bit of switching back and forth between the designer and the browser.
Fortunately there are tools available to inspect and modify the markup, CSS, and script of a rendered Web page directly in the browser. One such tool is Joe Hewitt's Firebug 1.05. Firebug is a free, open-source add-on for the Mozilla Firefox browser that displays information about a page's HTML, CSS, JavaScript, images, and Flash content in a tabbed interface.
With Firebug, there's no more need for View/Source, as the page's HTML elements are displayed in a searchable tree view. Mousing over a node in the tree highlights the corresponding region in the browser, and selecting a node displays its CSS styles as well as its Document Object Model (DOM) attributes. Firebug also lists the page's CSS definitions and JavaScript.
In addition, the HTML and CSS can be edited in Firebug, with the effects immediately reflected in the browser. With the click of a mouse, you can add or remove HTML elements, modify attributes, and create, update, or disable CSS definitions. These are in-memory modifications within the browser—you still need to return to Visual Studio to more permanently apply the changes—but Firebug provides immediate feedback and makes testing and debugging layout and CSS changes much faster.
Firebug is also useful for finding and fixing script errors. A dropdown list enumerates the external JavaScript files used by the page, and selecting an item displays its script in a powerful JavaScript debugger. The debugger supports breakpoints, includes a watch window, and allows you to step through the executing JavaScript. In short, it's a must-have tool that belongs in every Web developer's toolbox.
Price: Free, open-source.
Firebug Displays HTML, CSS, JavaScript, Images, and Flash Information
(Click the image for a larger view)
Blogs of Note
One of my favorite bloggers is Scott Guthrie, General Manager in the Microsoft Developer Division. What I like best about his blog is his in-depth, multi-part tutorial series. Scott has written detailed tutorials on data-driven Web sites, the ASP.NET Modal View Controller (MVC) Framework, and LINQ to SQL. Each tutorial includes step-by-step instructions and an abundance of screenshots, making it easy for developers of all skill levels to follow along. And there's no shortage of critical details; all the information you need is right there.
Scott also blogs on other forward-looking topics such as product roadmaps. He offers tips, tricks, and gotchas for Visual Studio, the Microsoft® ASP.NET AJAX Framework, working with data, security, performance, LINQ, Silverlight®, and other technologies. And once a month he shares his favorite blogs, articles, and books.
Another great quality of Scott's blog is his responsiveness to reader comments. If you are a developer using any of the products Scott helps create, this is one blog you need to subscribe to.
Price: Free.
Scott Guthrie Announces .NET Code Release (Click the image for a larger view)
Extend Lutz Roeder's Reflector
Reflector for .NET version 5.0 (aisto.com/roeder/dotnet) is a free class browser, analyzer, and decompiler for the Microsoft .NET Framework that has been around since the early days of the .NET Framework 1.0. Reflector displays the types, methods, properties, and events for any managed assembly. In addition to a simple class browser interface, Reflector can analyze how a particular type, method, or property is called by other methods and properties, and how it depends on other methods and properties. Moreover, Reflector can decompile a method or property into corresponding C# or Visual Basic® code.
Reflector is a powerful tool for inspecting and analyzing managed assemblies. As a decompiler, it can be used to examine and retrieve the source code of a .NET assembly whose code has been lost. Its analyzer can quickly highlight dependencies among methods and properties. Best of all, Reflector was designed to support add-ins, and a number of developers in the .NET community have taken the time to create and share 30 powerful Reflector add-ins at codeplex.com/reflectoraddins.
The Code Metrics add-in computes a number of code quality metrics on the selected assemblies, providing an overview of the largest, most used, and most complex types, methods, and properties, among other information. The Graph Add-In visually represents assembly dependencies using a dependency graph and can illustrate type hierarchies using class diagrams. And the Diff Add-In is useful for comparing differences between two versions of an assembly.
Other useful Add-Ins include FileDisassembler, which saves an entire assembly's decompiled source code to .vb or .cs files; SQL2005Browser, for browsing the .NET assemblies stored in a SQL Server® 2005 database; and CodeSearch, which enhances Reflector's search capabilities to search for strings and regular expressions in the decompiled code.
Price: Free.
Reflector: aisto.com/roeder/dotnet
Reflector Add-Ins: codeplex.com/reflectoraddins
Code Metrics Add-Ins in Reflector (Click the image for a larger view)
The Bookshelf
Most books that teach SQL do so with dry prose and focus on business and accounting scenarios. O'Reilly's Head First SQL by Lynn Beighley turns this approach on its head, and to great effect. The topics covered in Head First SQL are familiar: the fundamentals of the SELECT, INSERT, UPDATE, and DELETE queries; JOINs; subqueries; data normalization; data and relational integrity; and so on. But the unique presentation in Head First SQL makes it fun to learn and easy to remember.
I'm a big fan of O'Reilly's entire Head First series, whose titles present various technologies in a visually captivating manner. Unlike the typical computer book, Head First titles dispense with the traditional layout of screen shots interspersed amongst paragraphs of text and replace it with a bevy of figures, diagrams, and code snippets. And the overdone corporate examples found in most books are replaced with more interesting ones that tell a story. For example, instead of the archetypical employee database example, Head First SQL follows Greg as he converts his paper-based matchmaking system into a database-driven one.
Head First SQL shines in its ability to explain concepts in a way that makes even the most complicated scenarios seem like common sense. The chapter on JOINs is the most lucid and digestible description I've read yet. The same is true for the chapter on subqueries.
Head First books are a great way to learn a new technology, but they don't typically contain the depth of information found in those stodgy computer books. While paragraph after paragraph of text may be less engaging than the fun layout found in the Head First books, mastering a technology or explaining an especially complex or profound topic often requires the more traditional approach. In short, if you or a colleague needs to get up to speed rapidly on your SQL skills, consider picking up a copy of Head First SQL, but you shouldn't expect the depth of material needed to truly master the topic.
Price: $44.99.
Send your questions and comments for Scott to toolsmm@microsoft.com.
Scott Mitchell author of numerous books and founder of 4GuysFromRolla.com, is an MVP who has been working with Microsoft Web technologies since 1998. Scott is an independent consultant, trainer, and writer. Reach him at Mitchell@4guysfromrolla.com or via his blog at ScottOnWriting.NET.