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
IE6, IE7
Opera
Safari


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!
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Large collection of Web development tools

  • Aptana + Firefox3 + plug-in debugging JS

    1 to enter: http://www.aptana.com/docs/index.php/Debugger_Error_Page 2 enter: If you use Firefox 3.0 + browser, see Firefox 3.0/Firebug 1.2 support ASAP Issue for details. For problems with Firefox 1.5 + browser, see Firefox 1.5 + / Aptana Debugger A ...

  • javascript examples cookie management

    <script> / / Write cookies function Author: Zhai Chun-hoi function SetCookie (name, value) / / two parameters, one is the cookie name, a value are ( var Days = 30; / / This cookie will be saved for 30 days var exp = new Date (); / / new Date ( ...

  • Best posts of 2008 for developers

    The second in series of best posts of 2008 for designers, developers and bloggers. This second post contains a collection of more than 2008 tips, tricks, scripts, examples and tools for developers. Whether you're a beginner or pro, you could use ...

  • JSVM2 use

    JSVM (JavaScript Virtual Machine acronym), a JavaScript framework for basic, sourceforge open source project, by the ten thousand-Hua Chang (wch3116) was launched by the end of 2003, using the BSD License license agreement. JSVM not a JavaScript Libr ...

  • What is REST Architecture

    REST-style architecture is a new Web application for the development of style, is the world's most successful Internet Hypermedia Distributed System Architecture, it allows people to really understand the original Http protocol. With the REST arc ...

  • Firebug Guide (b) --- how to use the Firebug command line API to provide debugging js procedures (on)

    Console Tab Overview This tag is mainly used to print the log only. It can also be a time when debugging in javascript as a command-line window to use (similar to Microsoft Visual Studio in the window immediately (immediate window)). And the use of i ...

  • Firebug Guide (four) --- how to use the Firebug command line API to provide debugging js procedures (below)

    Introduction: Firebug command line are in one of the most useful features. If you have been using Visual Studio (referred to as VS) the experience of development projects, they should know you in the use of VS debugging procedures, "the immediat ...

  • Basic knowledge of CSS

    In this paper, the source for the original http://www.blueidea.com/tech/site/2006/3358.asp Near the time for the preparation of CSS Reference Manual First, with regard to CSS style sheets 1. In the study before css What you should master the basic kn ...

  • I heard good Ruby and Rails site

    1. Ruby Inside is said to be the best news station, the subscriber number 16xxx [img] http://www.rubyinside.com/simg/logo.gif "alt =" [/ img] http://www.rubyinside.com/ 2. Rails Inside is also a news station, the subscriber number of 3xxx [ ...

  • extjs development environment set up and practice

    1, download and extract the extjs 2, download eclipse and Eclipse AJAX Toolkit Framework (ATF) I have been accustomed to using eclipse as a development environment, a variety of open-source plugin so that eclipse has all-around performance, operating effi

Leave a Reply

Recent
Recent Entries
Tag Cloud
Random Entries