Large collection of Web development tools

Author: Klaus Komenda , Translation: butwho
English original: Collection of Web Developer Tools, per Browser
Original found: Translation made-Collection of Web Developer Tools for major browsers
Chinese translation: Large collection of Web development tools - each have copies of the browser!

Web site developers a great distress, that is, there are too many to cope with the browser. Fortunately, some of the world's smart people who can come up with a more easily edit and debug a good tool for web page code. However, from the numerous small tools which identify Pretty . This article presents a number of best of web development tools, and guide you to quickly activate the installation, use them. The following is a list of tools:

Browser	The tools available (in parentheses is the scope of application)
Firefox	Web Developer Toolbar (Multipurpose) Firebug (DOM, CSS, JavaScript, traffic) Modify Headers (Ajax) Poster (Ajax) XRAY , MRI (CSS) Firefox Accessibility Extension LiveHTTPHeaders
IE6, IE7	IE Developer Toolbar (DOM, CSS) Web Accessibility Toolbar (Readability, and more) XRAY , MRI (CSS) Visual Web Developer Express Edition (JavaScript) Microsoft Script Debugger (JavaScript)
Opera	Opera developer tools (DOM, CSS, JavaScript) Opera Error Console (HTML, CSS, JavaScript) XRAY , MRI (CSS) Web Accessibility Toolbar (Readability, and more)
Safari	Safari Debug Menu (JavaScript) XRAY , MRI (CSS) Web Inspector (Safari 3) (CSS, DOM)

Web Developer Toolbar

Firefox on the web site development and debugging of the choice. Web developer toolbar Contains a series of tools, from the cookie management to debug CSS, from the navigation line to the screen scale, function is more able to finish my speech. Download Toolbar Web Development Address: http://chrispederick.com/work/web-developer/

Firebug

Firefly is a Firefox extension of the good one, can be used as web developer toolbar Supplementary tools. You can use Firebug-line inspection, monitoring, editing web pages on HTML, CSS, JavaScript code. He also provides a script console, so that JS made more simple to edit. Console object contains the A lot of options , Allows you to output to the console and then the code for debugging. Michael Sync Provide One More advanced Operational Guidelines That it can know that you set up detailed options Firebug. In addition, Firebug, there is a bandwidth monitor, allows you to clearly see some of the code accounts for the number of bandwidth. Firebug to download Address: http://www.getfirebug.com/

Modify Headers

Modify headers Is an add, modify and filtering tools for HTTP request header. You can use this tool into a bogus Web site for mobile devices, it can even be an Ajax request forgery. Download Modify Headers Address: http://modifyheaders.mozdev.org/

Poster

You can Poster expansion With Web services or other interactive web resources, it allows you to send HTTP requests, set the format and content of the request entity. This allows you to detect the effect of Web interaction. Poster Download Address: http://code.google.com/p/poster-extension/

XRAY & MRI

X-ray And Magnetic Resonance Imaging Can be used in IE6 +, Webkit and Mozilla-based browser bookmarklets ( Why called Bookmarklets ), Including Safari, Firefox, Camino and Mozilla. Xray model test kits can help you in every element, MRI and applied to test selector. Download XRay Address: http://www.westciv.com/xray/index.html MRI Download Address: http://www.westciv.com/mri/

Firefox Accessibility Extension

Mozilla / Firefox accessibility extension of People with disabilities easier to browse Web content. Developers can use this to expand to examine their structure and style of web accessibility. Download Firefox Accessibility Extension Address: http://firefox.cita.uiuc.edu/

IE Developer Toolbar

Microsoft The development of the Internet Explorer toolbar IE is the best DOM inspection and CSS debugging tools. Because IE has a high market share and in the rendering model is full of defects (such as the notorious BUG overlapping margin hasLayout ), Debugging IE is an essential step in web development - do not have this tool bar, IE will become the debugging a nightmare. Although the IE Developer Toolbar mentally a little bit better than Firebug, but he can help you at least the first monster to tame this IE. IE Developer Toolbar Download Address: http://www.microsoft.com/downlo ... aylang = en

Web Accessibility Toolbar

The Web Accessibility Toolbar (Href = "http://www.paciellogroup.com/resources/wat-about.html"> Opera version) can check the site's accessibility (of course it is possible to read and can not count on the computer can be like human beings Reading the page, right?) In addition, this tool also provides other functions, such as dead links, and check the box to change the browser size and so on. The Web Accessibility Toolbar download Address: http://www.visionaustralia.org.au/ais/toolbar/

Visual Web Developer Express Edition

IE Toolbar Development Wood has JavaScript debugging features, you have to find other tools to engage JS. You can use Microsoft Script Debugger (mentioned below) or a free download of the heavyweight Visual Web Developer Express Edition . Bernie where the tool Tutorial (Of course, in English), which tell you in detail how to use this tool for debugging JavaScript code. You can also use Microsoft Script Editor to edit JS code - Unfortunately, this is not a free tool (at home, this does not seem a big problem). He was tied up in the Office 2003 installation package, and Microsoft does not provide a separate download. Because of this, not here to talk too much about it. Jonathan Boutelle Provided Some of the tools Tutorial .

Microsoft Script Debugger

You can free of charge in the Microsoft Web site Download this tool , MSDN also has a relevant document . This tool than Visual Web Developer Express Edition weak a lot, but still be able to handle a number of IE on the minds of those people touched the tips, such as "lack of object" category. Jake Howlett There is a "How to use Microsoft Script Debugger Debug JavaScript" Of course. For safety reasons, after the installation of the best script debugger to restart your computer. Microsoft Script Debugger Download Address: http://www.microsoft.com/do..laylang=en

Opera developer tools

Opera has The two development tools : Opera development console (Opera Developer Console) and Dom snapshot tools (DOM Snapshot). From the screenshot, they are promising. Opera 9 is the tool used above bookmarklets . But I did not let them in the successful operation of the Opera 9.10. Opera developer tools to download Address: http://dev.opera.com/tools/

Opera Error Console

Opera error console is a built-in feature, you can tool - Advanced - Error console to activate the it. Shell window it shows the current error page or a warning message, or you can filter certain types of information, such as HTML, CSS, XML or Javascript warning. You can find opera website Detailed tutorial error console .

Safari Debug Menu

Safari's debug capacity is very weak, but at least show a Javascript console allows some simple Javascript debugger (Firebug and the Opera with a similar error console). Apple site in the development department, there is a Document Frequently Asked Questions Explaining how to activate a hidden Debug menu. Under the Mac OS X, open a terminal and type:

defaults write com.apple.Safari IncludeDebugMenu 1

In windows, using a text editor to open Preferences.plist, this file is C: Documents and SettingsUSERNAMEApplication DataApple ComputerSafariPreferences.plist, add in the final document: <key>IncludeDebugMenu</key> <true/> in Safari 1.3 and above, you can enter the Debug menu and then Hooks "Records of accidents Javascript" option. Then select the "Show JavaScript Console". This record can be used Javascript error console.

Web Inspector

Mac OS to be activated in the Safari Web Inspector (Safari 3 and above can be used), open a terminal window and enter the

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

In windows, open your Documents and Settings * username * Application DataApple ComputerSafariWebKitPreferences.plist, add the following:

<key>WebKitDeveloperExtras</key>

<true/>

And then quit Safari and re-open in the menu you will see a "check test" option, that is it!

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Recent

• dwr3 api
• primefaces "does not have a writable property
• STxihei download
• set sun.jnu.encoding linux
• webview redirect
• android emulator install flash player
• how to use UTF 8 encoding in struts 1
• couchdb jqgrid array colmodel
• moovflow html
• java microsoft wdm image capture (Win32)

Recent Entries

• Implementation using xslt with javascript page picture of the dynamic changes of the effect of
• Demand management is to sub-levels
• Object reference on the first chapter - reading notes
• Inner class
• alfresco in the authorization
• Java Surface Question: Fifth Jin
• org.hibernate.LazyInitializationException: could not initialize proxy - no Sessi
• django's philosophy is reminisce
• [Change] Maven 2.0: Compile. Test. Deploy. Run
• Using insert into select from the data volume increase

Tag Cloud

Random Entries

• Top game design talk on how to become a Master Game Designer (software people should look)
• weblogic-ejb-jar.dtd can not parse without interne
• Creating Type - Builder Model
• Bill Venners dialogue with Martin Fowler (Reconstruction)
• Windows Phone 7 will be or not to support Native Code
• list set map difference
• struts2 numeric formatting
• OO system designers the Road
• Get the structure of the database table JAVA
• Not an internal or external command operable program