[ 웹 프로그래머 / 디버그 툴 / developer toolbar / http watch / fiddler2 ] 웹 프로그래머 디버그 툴 TOP 6

[ 웹 프로그래머 / 디버그 툴 / developer toolbar / http watch / fiddler2 ] 웹 프로그래머 디버그 툴 TOP 6


웹 프로그래머 분들이 사용하시면 좋을거 같은 디버그 툴들 모음입니다. ㅎ

IE의 developer toolbar부터 watch , fiddler2까지..

ㅎㅎㅎㅎ다는 사용못해봤지만..몇개는 사용해봤다라는.. 

1. Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:

• A Document Object Model inspector pane
• Multiple validation – automatically opens validation services in multiple browser tabs at the same time
• Syntax coloring of source code

Related Resources:

• “Using Microsoft IE Developer Toolbar” by Arkady Lesniara
• “15 Seconds: An Introduction to the Internet Explorer Developer Toolbar” by John Peterson

Download:

• IE Developer Toolbar on Microsoft Developer Center

2. Web Accessibility Toolbar

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very usefulregardless of whether you’re testing for accessibility or not.

Some features:

• Greyscale function – renders pages into grayscale so that you can test color contrast.
• Color Contrast Analyzer - a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for “color visibility” as suggested by the W3C consortium.
• Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.

Related resources:

• “Using the Web Accessibility Toolbar” on webcredible: user research & design
• “Using the AIS Web Accessibility Toolbar“ on WebAim: Web Accessibility in Mind

Download:

• Web Accessibility Toolbar from Vision Australia

Documentation:

• Toolbar Functions

3. HttpWatch (Basic Edition)

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load,amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:

• Page Level Time Chart – gives you a visual representation of the web page’s performance
• Errors Log Summary - notifies you of any HTTP errors encountered.

Download:

• HttpWatch from HttpWatch official website

Documentation:

• HttpWatch Features Summary

4. WebCollect

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has aneyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:

• Copy full screen – enabling you to copy a web page without having to crop or resize the image
• Capture Rectangle Area – which allows you to copy just parts of a web page.
• Support for most digital image file types such as JPG, PNG, and GIF.

Download:

• WebCollect Toolbar 3.2 from CNET Download.com

5. Fiddler2

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:

• Session Inspector – which also provides you with headers and web forms data.
• Set break-points – so that you can experiment with inbound/outbound data.
• Performance Statistics – including world-wide estimated download times

Related resources:

• “Performance Tuning with Fiddler” on MSDN.
• FiddlerScript Editor – allows you to edit script rules on fiddler.

Downloads:

• Fiddler2 from offical website
• Microsoft .NET framework (required)

6. Web Development Helper

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

Some features:

• Trap script errors – to see call stack errors.
• Detailed request headers

Downloads:

• Web Dev Helper from CodePlex – this page also contains the PDF documentation file for the Web Developer Helper
• Microsoft .NET framework (required)

IE still can’t match the Firefox’s number of extensions for web developers but these extensions help even out the field a little bit. 

출처 : http://www.hgw.me/top-6-internet-explorer-extensions-for-web-developers/