Chris Bowen's Blog : Tools

A Guide to the Internet Explorer 8 Developer Tools

cbowen — Wed, 30 Sep 2009 22:47:00 GMT

This is a follow up post for a talk I recently gave at the The Ajax Experience conference in Boston about using the developer tools included with Internet Explorer 8.

Want to see the tools in action? I have a screencast on Internet Explorer 8 from a dev perspective on Channel 9. I also cover new features and compatibility, but skip to 24:30 for just the developer tools:

Getting Started with the Developer Tools

Simple enough! In IE8, hit F12 or choose Tools-> Developer Tools to start.

You can either run the tools in browser or press the double window icon at top right to detach for a second monitor or to use side by side with the browser.

The tools offer a full menu and four tabbed sections of features: HTML, CSS, Script, and Profiler.

Working with HTML and CSS

The first tab (HTML) gives access to inspecting the structure of the page, selecting and searching elements and HTML, modifying values, saving locally-made changes, and more. Tip: click the button that looks like a mouse pointer to quickly select a page element (or press CTRL+B).

The right-hand pane shows a per-element CSS summary (Style) and hierarchy/trace (Trace Styles), offers a visual layout tool, and a way to set custom attributes. Tip: Trace Styles is particularly effective way to diagnose style inheritance issues (e.g. “why is that text red!?”).

The second tab (CSS), displays current CSS classes and styles, allowing you to view specific CSS files in use by the page, make changes, and search.

For details, see Debugging HTML and CSS with the Developer Tools on MSDN.

Debugging Script

The Script tab lets you work with script, setting breakpoints, debugging through code and breaking on errors.

To debug, just set any breakpoints you need (you can choose other files using the drop-down list) then press “Start Debugging”. You can also enable Break on Error mode (CTRL + Shift + E). Once at a breakpoint, step into/through with the buttons or F10, F11, and Shift+F11.

There’s a console in the right-hand pane which supports Console.Log/Warn/Info/Error output from your script. The console also supports direct script execution. Tip: this is a great place to learn/test commands from various Ajax and Javascript libraries.

The pane also lets you view breakpoints, local and watch variables, and the call stack.

See Debugging Script with the Developer Tools for more.

Profiling Script

One of the most useful features is the ability to analyze code to measure it’s performance. Just select the fourth tab (Profiler) and click “Start Profiling”. Use the part(s) of the application you’d like to analyze, then click “Stop Profiling”.

You’ll see a summary report showing functions, how many times they were called (Count), timing. Inclusive time is the function plus any called functions, and exclusive time is that function only. Tip: there are other columns as well (% time, min/max time, etc.), but by default they’re collapsed, so click between column headers to expand them.

Use the Current View drop-down to switch between a list of functions or a call tree view.

You can also click the “Export Data” button to save the profiling report externally (e.g. to load into Excel).

See Profiling Script with the Developer Tools for more.

Menu Options

On the right side of the menu, you’ll see options to change the Browser Mode and Document Mode. This lets you modify the browser behavior and page settings to test under different rendering and display conditions. See this MSDN article for more.

Don’t forget to look through the many options in the various menus. For example:

Image and Link reports
Element outlining (tables, divs, etc.)
Cache management
Pop-up blocker, script, and CSS disabling
Tools to resize the browser, measure items, and select colors
Options to send a page for validation
Clear/view cookies

Questions

Some details for questions asked during and after the session:

The Search bar supports the W3C Selectors API, but you need to type an “@” symbol before your expression, otherwise it’s treated as a literal text search.
The script profiler works on a usage basis, profiling all code executed between using the “start profiling” and “stop profiling” commands. I have not seen a way to affect which scripts code is profiled during that time (like you can with using the Profiler APIs to affect Team System’s instrumentation profiling).

Internet Explorer Resources

Finally, a summary of resources to get you underway:

IE 8 Home
IE 8 Developer Center
My screencast on IE8 for developers
IE 8 Dev Tools Tutorial sample site
IE 8 Dev Tools Articles
For keyboard fans, the Keyboard Shortcuts guide

I hope you enjoy using the developer tools!

-Chris

Free Antivirus Protection with Microsoft Security Essentials

cbowen — Wed, 30 Sep 2009 08:15:29 GMT

A short and simple post…

Need antivirus and antimalware protection? Want it for free? Then download Microsoft Security Essentials now:

Microsoft Security Essentials provides real-time protection for your home PC that guards against viruses, spyware, and other malicious software.

Microsoft Security Essentials is a free* download from Microsoft that is simple to install, easy to use, and always kept up to date so you can be assured your PC is protected by the latest technology. It’s easy to tell if your PC is secure — when you’re green, you’re good. It’s that simple.

-Chris

Roundup of 11 Recent Microsoft Technology Releases

cbowen — Tue, 03 Feb 2009 19:55:51 GMT

There have been quite a few developer and technology releases in the past couple of weeks, so in case you’ve missed any, I’ve collected pointers to 11 of them in this post:

Internet Explorer 8 Release Candidate 1 (RC1)
- IE Team Post
- Release Notes
ASP.NET MVC Release Candidate 1 (RC1)
- Many new improvements including tooling, view enhancements, form post handling, unit testing, file handling, AJAX and others.
- Scott Guthrie’s Detailed Post
- Phil Haack’s Post
Updates for Windows Azure:

Windows Azure SDK January 2009 CTP
- “The Windows® Azure™ SDK provides developers with the APIs, tools, documentation, and samples needed to develop Internet-scale applications that run on Windows Azure.”
Windows Azure Tools for Visual Studio January 2009 CTP

“Windows Azure Tools for Microsoft Visual Studio extend Visual Studio to enable the creation, building, debugging, running and packaging of scalable services on Windows Azure.”

Live Framework Tools January CTP

Read James Senior’s post for details and note that you’ll need to sign up for the appropriate services before you can download the CTP, described in Lynn Langit’s getting started with Azure post

Microsoft Tag Beta
- “With the Microsoft Tag application, just aim your camera phone at a Tag and instantly access mobile content, videos, music, contact information, maps, social networks, promotions, and more. Nothing to type, no browsers to launch!"
Microsoft Windows SDK for Windows 7 and .NET Framework 3.5 SP1: BETA
- "The Windows SDK for Windows 7 and .NET Framework 3.5 SP1: BETA provides the documentation, samples, header files, libraries, and tools (including C++ compilers) that you need to develop applications to run on Windows 7 BETA and the .NET Framework 3.5 SP1”
- BTW, you can access all SDK’s from this portal.
Managed Extensibility Framework Preview 4 Release
- “The Managed Extensibility Framework (MEF) is a new library in .NET that enables greater reuse of applications and components. Using MEF, .NET applications can make the shift from being statically compiled to dynamically composed. If you are building extensible applications, extensible frameworks and application extensions, then MEF is for you.”
Community Technology Preview of Visual Studio 2008 extensions for SharePoint v1.3
- “The Visual Studio extensions for SharePoint (VSeWSS) provide project templates for developers using Visual Studio 2008 to create, debug, package and deploy SharePoint projects including Web Parts, Data Lists, Content Types, Event Receivers, Templates, Modules and other SharePoint artifacts.”
Microsoft Web Platform Installer 1.0
- “The Web Platform Installer (Web PI) is a simple tool that installs Microsoft's entire Web Platform, including IIS, Visual Web Developer 2008 Express Edition, SQL Server 2008 Express Edition and the .NET Framework. Using the Web Platform Installer’s user interface, you can choose to install either specific products or the entire Microsoft Web Platform onto your computer. The Web PI also helps keep your products up to date by always offering the latest additions to the Web Platform.”
Microsoft Visual Studio Learning Pack 2.0
- “The Visual Studio Learning Pack 2.0 is a software package created by Microsoft to help students learn about computer programming. Improvements in this release include support for Visual Studio 2008 Express and more support for Visual Basic.”

Plus a couple of new guides for good measure:

Patterns & Practices Application Architecture Guide 2.0
XAML Guidelines Draft
- Rudi Grobler’s post (includes additional videos)

Enjoy!
-Chris

Presentation Tip - Randomizing Giveaways

cbowen — Sat, 11 Oct 2008 06:03:50 GMT

A simple tip for those times when you have things to give away randomly to your audience and forgot your bag of dice...

Random.org!

This site features a Random Sequence Generator which is simple, but effective.

Just have your audience count off, enter the count, then call out the first X numbers based on how many giveaways you have. Because it's a full sequence, you won't get duplicates and you'll have extra numbers if someone leaves or doesn't want a prize.

-Chris

P.S. Here's an earlier post with five other presentation tips.

Photosynth is Live - Take it for a Spin

cbowen — Thu, 21 Aug 2008 17:34:02 GMT

The Microsoft Live Labs project Photosynth has just gone live, letting you create your own synths.

What's a synth? Consider taking a whole bunch of your pictures of a certain place, dropping them in Photosynth, and getting a 3D representation of the spatial relationships between those pictures that you can then navigate around.

Or... just think of using tape to join your pictures together. In 3D.

Well, I suppose it's easier to just look at one than to describe it!

Some related stores:

ZDNet - Mary-Jo Foley relates some interesting insights from the team
CrunchGear - Featuring a nice video showing it in action
SiliconValley
PCMag

Enjoy!

-Chris

Office 2007 Search Commands Add-On

cbowen — Fri, 27 Jun 2008 09:40:56 GMT

Prompted by recent feedback on a Roadshow visit, I set off to research a bit about the "Fluent" (ribbon-based) interface in Office 2007. Though it surfaces more functionality to users, it can clearly take some time for those used to the menus of earlier Office versions to get up to speed.

While there are transition guides and videos - for example, here, here, here, and here, it turns out there's an even easier answer.

The Office Labs team has released a Search Commands add-on for Office 2007 (for Word, Excel, and PowerPoint). Search Commands adds a new ribbon with a simple search textbox. Type part of the name of a command you're looking for, and the ribbon will show buttons for each of the matching results!

The results also integrate guided help, which are step-by-step automations of common processes in Office, helping you each step of the way.

Examples

Searching For "Color" in PowerPoint:

Searching for "Export" in Excel

Search Commands will even offer spelling correction suggestions for the command names you type:

Searching for "Effect" in Word

Definitely a welcome addition to Office, helping even experienced users to locate tools quickly. Head to the Office Labs site for details.

-Chris

Tips from My Technical Presentations

cbowen — Tue, 27 May 2008 21:18:55 GMT

My role involves spending a good deal of time with technical audiences. Recently, I've been getting reactions like this - "I enjoyed your presentation! I have an odd question - how did you zoom in like that?" or "How did you set those colors in Visual Studio?"

So, I'm posting some tips so I can direct people here for more information.

1) Use ZoomIt for Screen Zooming

It's never a good thing to feature content on your screen that the audience can't see. It's frustrating for them, and hinders conveying the very message you're trying to present.

Fortunately, there's a very easy answer. For areas where you can't already have proper font sizes and colors (see below), use ZoomIt, a free tool from TechNet!

Read my post on ZoomIt for details.

ZoomIt is just great. Obviously, you can zoom, but you can also draw lines, boxes, ellipses and text anywhere on the screen. It also has a break timer you can use to quickly count down that break between your sessions.

2) Change the Default "Highlight" Color in Visual Studio

The default blue highlight for selected text in Visual Studio looks fine on a computer, but when projecting, selecting text can actually make it harder to read - it's likely that nobody past the first few rows can read what you've just selected.

To fix this, go to Tools->Options->Environment->Fonts And Colors, then in the "display items" list, choose "Selected Text" and change the background color to bright yellow or green (think highlighter) and the text to black.

3) Use a Code Color/Font Scheme That's Easy to View

This is clearly subjective, but I've found that changing the fonts and colors from the default results in code that's easier on the eyes. Many people have told me they prefer this, nobody has said they had trouble with it.

I've uploaded the settings file for my colors and fonts to SkyDrive (see the above code picture for a preview.) You can easily apply them to your own Visual Studio settings using "Tools->Import and Export Settings". I'd recommend you back up your current settings using the Export option before trying this out.

I use the Consolas font in Visual Studio, which you can download here.

Also, check out Scott Hanselman's great post on alternate Visual Studio themes.

4) Create Quick-Change Font Size Macros

In Visual Studio, it's easy to create your own keybindings to IDE features. I've added CTRL-SHIFT-[+/-] to mine which quickly increments or decrements the editor font size.

The screenshot at right shows the decrease font macro I've wired up. Go to Tools->Options->Environment->Keyboard, then type "Font" into the Show Commands Containing textbox to find the font-related commands.

Then you can just ask the audience if they can see, quickly bump the font a bit and you're good to go.

5) Have Emergency Backup Plans... and Pictures... and Video

Let's face it, sometimes demos don't work as planned. Pilot error, beta software, phases of the moon - you need a contingency plan. I'll typically run through my demos and take screenshots of the key points, adding them to the end of my presentation deck.

In some cases, you might even consider recording the whole demo, using a tool like Camtasia. Play the video (without sound) and narrate what's happening for the audience. Your audience will appreciate having content rather than watching you flail about, trying to diagnose a problem.

This also applies to websites that you may want to show, should you find yourself without web connectivity. Either save a local copy of the page (in IE, File->Save As->Web Archive, single file (*.mht)) or just take a screenshot.

Hope you find these tips useful. Do you have others?

-Chris

Presentation Zooming with ZoomIt

cbowen — Mon, 31 Mar 2008 02:47:00 GMT

After my Heroes Happen Here talk in Boston about web development with Visual Studio 2008, I got a few emails from people asking me how I was able to zoom in to areas of my screen during my demos.

There's a handy and free utility, ZoomIt, originally a SysInternals utility, that's available on TechNet at:

www.microsoft.com/technet/sysinternals/Miscellaneous/ZoomIt.mspx

Put it in your startup folder and you'll always be a keystroke from it's features:

Zooming in - CTRL+1
- Use the mouse to move the zoom around.
- Use the up and down arrows to zoom farther in or out.
Drawing - CTRL+2

Change colors with "r", "y", "o", "g", b".
Add text with "t"
Draw shapes with shift, control, and tab keys.
Press "w" to enter whiteboard or "k" for blackboard mode.

Countdown Clock - CTRL+3

For when you want to say "Let's take a 10 minute break"
Advanced options let you play a sound on expiration and set opacity

Enjoy!

-Chris

World of Warcraft Meets Visual Studio 2008

cbowen — Thu, 20 Dec 2007 17:16:28 GMT

In an bit of good timing for some holiday season downtime, Dan Fernandez has announced the first release of AddOn Studio for World of Warcraft on CodePlex.

World of Wacraft supports user-generated utilities and interfaces, called AddOns. Now we can use Visual Studio to help create our own:

AddOn Studio for World of Warcraft is an open-source development tool aimed to bring the Visual Studio experience to building World of Warcraft addons. This is the first release of the project and we have lots more ideas around how we can better improve addon development in the future.

AddOn Studio is a good example of what can be done with the Visual Studio 2008 Shell to create customized editing environments based on Visual Studio. It offers the VS2008 design surface and has editor and IntelliSense support for both LUA and FrameXML, used by World of Warcraft add ons.

Check out Dan's post for more details and a link to an interesting demo video. I also recommend running through the helpful tutorial that's included with the install.

I haven't played World of Warcraft since about Tech*Ed 07, when my "friends" Patrick Hynds and Duane Laflotte evilly tempted me back in, but something like this (and seeing what new AddOns the community can produce) might pull me in yet again.

Well, if only for a month...

-Chris

Office 2007 Document Inspector

cbowen — Thu, 16 Aug 2007 17:46:47 GMT

I have a new favorite feature in Office 2007. I often need to send documents to contacts, but I want to ensure there's no extra information tagging along for the ride (revision history, document properties, speaker notes in PowerPoint, etc.)

You used to have to resort to macros or manual removal, but in Office 2007, there's a built-in tool called the Office System Document Inspector that will cleanse Word, Excel and PowerPoint documents of comments, annotations, history, etc.

To launch the Inspector, click the "big office button" in Word, Excel, or PowerPoint, choose "Prepare", then Inspect Document:

The Document Inspector will then display, with options that vary based on the type of document you've opened. For example, in PowerPoint you'll see:

Choose which information you'd like to find and remove, then click Inspect. The Office Developer Center has more information on this tool.

Hope you find this useful!

-Chris

Technorati tags: Office, Tools

Reflector 5.0 Released

cbowen — Thu, 22 Feb 2007 19:56:04 GMT

Lutz Roeder posts word that he's released version 5.0 of his (free) Reflector tool. If you haven't heard of Reflector, it's truly one of the top 10 tools that every .NET developer must have.

Adding to the already indispensable functionality of Reflector are a number of great add-ins that are available on CodePlex.

-Chris