Friday, August 28, 2009

DevTnT 12 - Firefox Plug-In: MeasureIt

MeasureIt is a Firefox that enables you to measure the size of parts of the page you are viewing. MeasureIt shows up as a small button in the lower left corner of the Firefox window.

When you click on the button, the browser window will be overlaid with a whitish layer and the cursor turns into a cross.  Click and drag the cursor over the area you want to measure.

measureit

A floating element will show the size of the select area.  Clicking on the red square with the white cross will close the ruler but keep the whitish overlay. Pressing Esc on the keyboard removes the overlay.

DevTnT 12 – Firefox Plug-In: Screengrab

Screengrab is a plug-in for Firefox that enables you to take a screenshot of (part of) the current web page.  You will find Screengrab in the lower right corner of the browser window.

Screengrab

You can either save the screenshot to a file or copy it to the clipboard.

DevTnT 12 - Firefox Plug-In: WCAG ColorChecker

WCAG ColorChecker is a Firefox plugin that enables you to test the colors of a web page for easy readability with regard to contrast and several Discromatopsia. It installs itself as a button in the lower left corner of the status bar. Clicking on the button opens a side panel. You can select elements or colors on the page using ColorZilla, and ColorChecker will show you its results using either a green check mark or a red cross next to the criteria.

ColorChecker

DevTnT 12 - Firefox Plug-In: ColorZilla

ColorZilla is a Firefox plug-in that enables you to determine which color an element on a web page is using. Click on the Eyedropper tool in the bottom-left corner of your Firefox window. The cursor will turn into a cross and the html element you’re hovering on will have a red border. The color values of the element you click on will be added to the status bar.

ColorZilla2

ColorZilla also contains a color- and palette-manager. You can open it by right-clicking anywhere on the page, pointing to ColorZilla and selecting either Color Picker or Palette Browser.

ColorZilla

DevTnT 12 - Firefox Plug-In: Microsoft .NET Framework Assistant

Microsoft .NET Framework Assistant is a plug-in that is installed as part of a hotfix for version 3.5 SP1 of the .NET Framework. It enables you to install ClickOnce-applications using Firefox.

DotNetFrameworkAssistant

Not everybody is happy about this plug-in being installed automatically. In addition the plug-in cannot be easily uninstalled because it is a computer-level plug-in.  There is a documented way of uninstalling it, though: http://support.microsoft.com/kb/963707/.

DevTnT 12 - Firefox Plug-In: IE Tab

IE Tab is a plug-in for Firefox that enables you to display web pages in a Firefox tab using the Internet Explorer rendering engine. This enables you for example to quickly compare different rendering behaviors or run Microsoft Update from Firefox.

Tabs being viewed using IE Tab don’t display the normal favicon of the site but rather the IE logo. In the screenshot below the left tab uses the Firefox rendering engine while the right tab uses the IE rendering engine.

IETab

DevTnT 12 - Firefox Plug-In: HttpFox

HttpFox is a Firefox plug-in that enables you to monitor HTTP traffic made by the page you are viewing in Firefox. Its  functionality is similar to Fiddler, but is a “native” Firefox plug-in.

httpfox

An additional advantage over Fiddler is that HttpFox can watch traffic to localhost as well.

DevTnT 12 - Firefox Plug-In: FiddlerHook

FiddlerHook is a Firefox plug-in that enables you to use Fiddler with Firefox. You will first need to enable FiddlerHook in Firefox (menu Tools –> Monitor With Fiddler –> Use Fiddler Automatically). Then add a Fiddler button to the navigation bar by right-clicking and selecting Customize. Drag the Fiddler button to the navigation bar, click done and click on the Fiddler button.

Fiddlerhook1

HttpFox is similar to Fiddler, and is a “native” Firefox plug-in.

An interesting advantage of using Fiddler through Fiddlerhook with Firefox when compared with Fiddler with Internet Explorer is that you can watch traffic to localhost.

Fiddlerhook2

PS: you can use Fiddler in IE if you set Fiddler as proxy for IE.

Friday, August 21, 2009

DevTnT 10 – Copy Work Item in Team Explorer

In Visual Studio Team Explorer it might be useful to create copies of work items to start with instead from creating a new one from scratch. Especially if you run two parallel systems with similar issues: e.g. a ticketing system for customers and a bug tracking system for the development.

You can by opening the work item in question and then use the Create Copy of Work Item… command in the Edit menu:

CopyWorkItem1

or in the context menu of the work item:

CopyWorkItem1a

After clicking, the Copy Work Item dialog appears and you can determine the team project that you want to copy the work items to.

CopyWorkItem2

See further information, especially on the implications of the selected Work item type, here.

DevTnT 10 - CTRL+G in Visual Studio

Depending on the current view, there are three different meanings of CTRL+G:

  • in the editor view the Go To Line dialog pops up and you can jump to the entered line number: GoToLineDialog
  • when dealing with work items, the Go To Work Item window pops up and you can navigate to a particular issue: GoToWorkItem
  • in the source control view, CTRL+G opens the Find Changeset dialog which allows you to query for change sets:FindChangesets

Sunday, August 16, 2009

DevTnT 11 - Firefox Plug-In: Current Site IP

Current Site IP is a Firefox plug-in that shows the IP address of the site you are currently viewing in the status bar. This is especially useful when there are separate development, test, staging and production environment and you have to switch between them using host file entries.

CurrentSiteIP

DevTnT 11 - Firefox Plug-In: XPather

XPather is a plug-in for Firefox that shows you the xpath expression for selecting an element on a web page. You can open it by right-clicking on an element and choosing “Show in XPather”. You can then edit the xpath expression; if the expression matches multiple nodes all those nodes are shown in a table.

XPather

DevTnT 11 - Firebug Plug-In: YSlow

YSlow is a plug-in for Firebug (which is a plug-in for Firefox) that will analyze your web page and make recommendations on how to improve its load time. YSlow is developed by Yahoo and is similar to Google’s Page Speed.

YSlow

DevTnT 11 - Firebug Plug-In: Page Speed

PageSpeed is a plug-in for Firebug (which is a plug-in for Firefox) that will analyze your web page and make recommendations on how to improve its load time. Page Speed is developed by Google and is similar to Yahoo’s YSlow.

PageSpeed

DevTnT 11 - Firebug Plug-In: FireFinder

FireFinder is a plug-in for Firebug (which is a plug-in for Firefox) that enables you to enter a CSS selector and will show all items on the page that match the selector in a red or blue border.

FireFinder

FireFinder can use XPath expressions as well. XPather offers much more XPath functionality, though.

DevTnT 11 - Browser Plug-in: Firebug et al.

Firebug is a plug-in for Firefox that enables you to inspect the DOM of the web page that you are currently viewing. It also enables you to inspect the CSS styles of any given element, and trace those styles back to their definitions in CSS files. There is also a script debugger and a console.

FireBug

Firebug also comes as a light version for Internet Explorer, Opera and Safari: http://getfirebug.com/lite.html. It is a JavaScript file that you can either include in your html file (if you are developing the html file) or as a bookmarklet if you don’t own the html file.

Other browsers have their own Firebug-like plug-ins of course: Internet Explorer Developer Toolbar for IE, Dragon-Fly for Opera (Menu Tools –> Advanced –> Developer Tools), Chrome (Page button –> Developer –> JavaScript Console) and Safari (Page button –> Develop –> Show Web Inspector).

Note: if there is no “Develop” menu in Safari, you can enable it using Setting button –> Preferences –> Advanced –> Show Develop menu in menu bar.