MSDN Magazine - March 2008 - (Page 11)

Easy Web Debugging, Extending Reflector, and More SCOTT MITCHELL 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 Firebug Displays HTML, CSS, JavaScript, Images, and Flash Information 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. getfirebug.com 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, multipart 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 forwardlooking topics such as product roadmaps. He offers tips, tricks, and gotchas march2008 11 Blogs of Note http://www.getfirebug.com

Table of Contents Feed for the Digital Edition of MSDN Magazine - March 2008

MSDN Magazine - March 2008 Contents Toolbox CLR Inside Out Data Points Advanced Basics Office Space Introducing ASP.NET MVC Loosen Up CI Server Performance Office Development Test Run Security Briefs Extreme ASP.NET Foundations .NET Matters {End Bracket}

MSDN Magazine - March 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.