Web development tool plug-in

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, it is not easy to find the right ones from countless gadgets. This article lists several of the best-to-use C Programs and guides you to activate, install, and use them quickly. The following is a list of tools:
Available tools for the browser (Application Scope in brackets)
Firefoxweb developer toolbar (Multi-Purpose)
Firebug (DOM, CSS, JavaScript, traffic)
Modify headers (Ajax)
Poster (Ajax)
Xray, MRI (CSS)
Firefox accessibility Extension
Livehttpheaders

IE6, ie7ie developer toolbar (DOM, CSS)
Web Accessibility toolbar (readability and more functions)
Xray, MRI (CSS)
Visual Web Developer express edition (JavaScript)
Microsoft Script debugger (JavaScript)

Operaopera Developer Tools (DOM, CSS, JavaScript)
Opera error Console (HTML, CSS, JavaScript)
Xray, MRI (CSS)
Web Accessibility toolbar (readability and more functions)

Safarisafari 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. The Web Developer Toolbar contains a series of tools, from Cookie management to CSS debugging, from navigation lines to screen scales, which can be simply said. 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 complementary tool for 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, allowing you to output code to the console for debugging. Michael sync provides a more advanced operation guide, which allows you to set firebug options 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 to interact 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 are bookmarklets (bookmarklets) that can be applied to IE6 +, WebKit, and Mozilla browsers, including safari, Firefox, Camino, and Mozilla. xray can help you detect every element in the box model. MRI can test and apply selector. Xray: http://www.westciv.com/xray/index.html MRI: http://www.westciv.com/mri/
Firefox accessibility Extension
Mozilla/Firefox accessibility extensions allow users with disabilities to easily browse Web 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's Internet Explorer development toolbar is the best Dom check and CSS debugging tool on IE. Since 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 of 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 edition) can check the site's accessibility (of course, it's possible that it's always impossible to expect computers to read web pages like people ?) 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
The IE development toolbar has the Javascript debugging function. You need to find some tools for JavaScript. 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 (of course in English), which 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 bundled in 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 on the Microsoft website for free. 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 has a tutorial on how to debug JavaScript using Microsoft Script debugger. 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 ). From the perspective, they all have a bright future. This tool is bookmarklets for opera 9 or later. 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. You can activate it in the tool-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 detailed tutorials 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 ). In the Development Department of the apple website, a faq document describes how to enable hidden debugging menus. In Mac OS X, open a terminal and enter:
Defaults write COM. apple. safari includedebugmenu 1 opens preferences in a text editor in windows. plist. The file is usually located at c: \ Documents ents and Settings \ USERNAME \ Application Data \ Apple Computer \ safari \ preferences. plist: Add <key> includedebugmenu </key> <true/> at the end of the file in Safari 1.3 or 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 webkittings extras-bool true in windows, open Documents and Settings \ * your username * \ Application Data \ Apple Computer \ safari \ webkitpreferences. plist to add the following content:
<Key> webkitemediextras </key>

<True/> then exit safari and re-open it. You will see a "Check element" option in the menu!
This article comes from the http://www.weborn.org, the original address: http://www.weborn.org/collection-of-web-developer-tools-per-browser-466/