A collection of web development tools-Each browser has a share!

Author: Klaus komenda
, Translation: butwho

Collection of Web Developer Tools, per Browser

Original article discovery: Collection of Web Developer Tools for major browsers

A large collection of web development tools-Each browser has a share!

A major headache for website developers is that there are too many browsers to cope. Fortunately, there are some smart people in the world who can work out some good tools to facilitate editing and debugging web code. However, we have to ignore it.
It is really not easy to find the right tool in the data. This article lists several of the best web development tools available and guides you to activate, install, and use them quickly. The following is a list of tools:

Browser	Available tools (Application Scope in brackets)
Firefox	Web Developer Toolbar (Multi-Purpose) 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 functions) 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 functions)
Safari	Safari Debug menu (JavaScript) Xray , MRI (CSS) Web Inspector (Safari 3) (CSS, DOM)

 

Web Developer Toolbar

The best choice for developing and debugging web sites on Firefox. Web Developer Toolbar
It includes a series of tools, from Cookie management to CSS debugging, from navigation lines to screen rulers, and the functions are simply too endless. Web development tools: http://chrispederick.com/work/web-developer/

Firebug

Firefly is one of the best extensions on Firefox, and can be used as a Web Developer toolbar.
. You can use firebug to check, monitor, and edit HTML, CSS, and JavaScript code on the webpage online. He also provides a script console to simplify JS editing. The console object contains a lot of options
Allows you to output code to the console for debugging. Michael sync
Provide
More advanced operation guide
It knows that you have set the firebug option in detail. In addition, there is a bandwidth monitor on firebug, allowing you to clearly see how much bandwidth some code occupies. Firebug: http://www.getfirebug.com/

Modify Headers

Modify Headers
Is a tool that can add, modify, and filter HTTP request headers. You can use this tool to impersonate a mobile device to log on to a website. It can even forge an Ajax request. Modify headers: http://modifyheaders.mozdev.org/

Poster

You can use poster Extension
Interacts with Web services or other web resources. It allows you to send HTTP requests and set request entities and content formats. This allows you to detect the effect of web interaction. Poster: http://code.google.com/p/poster-extension/

Xray & MRI

X-ray
And MRI
It is a bookmarklets (called bookmarklets) that can be applied to IE6 +, WebKit, and Mozilla-based browsers.
), Including safari, Firefox, Camino, and Mozilla. Xray can help you detect every element in the box model. MRI can be used to test and apply selector. Xray: http://www.westciv.com/xray/index.html
MRI: http://www.westciv.com/mri/

Firefox accessibility Extension

Mozilla/Firefox accessibility Extension
Allows people with disabilities to easily browse the webpage content. Developers can use this extension to check their structure and style of web pages easily. Firefox accessibility extend: http://firefox.cita.uiuc.edu/

IE developer Toolbar

Microsoft Internet Explorer development Toolbar
It is the best Dom check and CSS debugging tool on IE. IE has a high market share and is full of defects in the entire rendering model (such as the notorious haslayout margin overlap bug)
Debugging IE is an essential step for web development-without this toolbar, debugging IE will become a nightmare. Although ie developer toolbar is a little less retarded than firebug, it can at least help you to tame IE. IE developer toolbar: http://www.microsoft.com/downlo... Aylang = en

Web Accessibility Toolbar

The Web Accessibility Toolbar
(
Href = "http://www.paciellogroup.com/resources/wat-about.html"> opera) Available
In order to check the website's accessibility (of course, it is possible that the computer will not always be able to read the webpage like a person ?) In addition, this tool provides other functions, such as checking dead links and changing the browser frame size.
The Web Accessibility toolbar: http://www.visionaustralia.org.au/ais/toolbar/

Visual Web Developer express Edition

IE development Toolbar
Wood has JavaScript debugging function, you have to find some tools to engage in Js. You can use Microsoft Script debugger (as mentioned below) or download this heavyweight Visual Web Developer express edition for free.
. Bernie has a tutorial on this tool.
(When
It tells you in detail how to use this tool to debug JavaScript code. You can also use Microsoft Script Editor to edit
JS Code-unfortunately, this is not a free tool (it does not seem a big problem in China ). He is bound to the office
2003 installation package, and Microsoft does not provide separate download. Because of this, we will not mention it here. Jonathan boutelle
Provides some tutorials on this tool.
.

Microsoft Script Debugger

You can download this tool for free on the Microsoft website.
, There is also a related document on msdn
. This tool is much weaker than visual web developer express edition, but it can still handle some confusing prompts on IE, such as "lack of objects. Jake Howlett
How to use Microsoft Script debugger to debug Javascript
. To ensure security, you 'd better restart your computer after installing the script debugger. Microsoft Script Debugger: http://www.microsoft.com/do..laylang=en

Opera Developer Tools

Opera has two development tools
: Opera developer console and Dom snapshot tool (DOM snapshot ). From the perspective, they all have a bright future. This tool is bookmarklets used in opera 9 or later versions.
. However, I did not allow them to operate successfully on opera 9.10. Opera development tools: http://dev.opera.com/tools/

Opera error Console

The error console is a built-in function of opera.Tools-advanced-error Console
. It can display error or warning information on the current webpage in a pop-up window, or you can filter some type of information, such as HTML, CSS, XML, or Javascript warning. You can find the detailed tutorial on the error console on the Opera website.
.

Safari Debug menu

Safari's debug capabilities are weak, but displaying at least one JavaScript console makes JavaScript debugging easier (similar to firebug and the opera error console ). There is a faq document in the Development Department of the apple website.
Describes how to enable hidden debugging menus. In Mac OS X, open a terminal and enter:

defaults write com.apple.Safari IncludeDebugMenu 1

In Windows, open preferences. plist in a text editor. The file is usually located in C: documents and
Settingsusernameapplication dataapple
Computerpolicipreferences. plist, add the following at the end of the file:<key>IncludeDebugMenu</key> <true/>
In safari 1.3 and later versions, you can go to the Debug menu and select the option "record JavaScript accidents. Select "Show javascript console ". This allows you to use the console to record JavaScript errors.

Web Inspector

To activate Safari Web Inspector (available in Safari 3 or later) on Mac OS, open the terminal window and enter

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

In Windows, open Documents and Settings * your username * Application dataapple computersafariwebkitpreferences. plist and add the following content:

<key>WebKitDeveloperExtras</key>

<true/>

Then exit safari and open it again. You will see a "Check element" option in the menu, that is, it!

** Knowledge expansion: bookmarklets?

Specifically, I am not very clear about it. What are new terms? Here
Find an explanation:

The bookmarklet mentioned in the preceding statement is an internal acceptance ticket.
The Zookeeper of the Javascript program. The method used is the same as that used by zookeeper. The difference is that zookeeper is used to remember the location of zookeeper, while bookmarklet is used to remember certain programs or
Method.
On the other hand, bookmarklet compares JavaScript statements to protocol, just like HTTP or FTP, and requires
The bookmarklet must rely on the browser to activate the function.

It seems that greasemonkey and other things are related to bookmarklet?