Web front-end development Essentials tool recommended

http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/Whether you do front-end development or Web page refactoring, the front-end tools are playing a very important role, here to recommend some excellent, And is widely used in front-end development tools. The following mainly for everyone

Recommended are the auxiliary development tools and Web Debugging tools.

1. Auxiliary development tools for front-end development of essential tools

Recommended here are some of the front-end development can be you improve the development efficiency of the gadget, both small and convenient;

One,, color, volume size, screen recording tools

• FastStone Capture

Main uses:, color, volume size, screen recording tools; Recommended Index: * * *. In addition, we can also consider the color picker adesclrpicker,takecolor

FastStone capture is a flexible and simple screen capture software, take color, magnifying glass, ruler, capture,,, screen recording all done. It can grab a picture of a window or object, or capture it in full screen or in rectangular mode, or even grab a picture in any shape you draw. It also supports floating bars, hot keys, resizing, clipping, text commenting, printing, and mail sending, among other features. Supports all major picture formats, including BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO, and TGA, with unique smoothing and burr processing technology to make the picture clearer, providing zoom, rotate, cut, and color adjustment functions. Just click on the mouse to grab anything on the screen, support drag and drop, you can import pictures directly from the system, browser or other programs, the collection function allows you to better collect more wonderful pictures.

FastStone capture also integrates a color, magnifying glass, ruler (can measure the width of the element), which is very useful and convenient for front-end development. FastStone capture also has a simple image editing function, and can directly copy the image pasted into Photoshop, very convenient.

Second, look at the picture software

• ACDSee3.1 Landscaping and Picaview plugins

Main uses: Picture and picture property browsing; Recommended index:

ACDSee3.1 SR-1, one of the fastest, most powerful, and most convenient Windows image viewing programs! ACDSee is an integral body of many tools. The full-featured image viewer can quickly display images at higher quality. The image browser can be used to efficiently find images and organize them. ACDSee also offers several image processing features, including a handy photo enhancement program. ACDSee3.1 SR1 comes with Picaview, is the right mouse button directly preview the image of the software, you can easily browse pictures and picture properties.

2. Front-end development of the necessary tools for Web Debugging Tools

In front-end development we often want to debug the page, the main HTML, CSS debugging and JS debugging, here to organize some tools:

First, Firefox web debugging plugin

. Firefox plugin Firebug

Mainly used for HTML, CSS Debugging and JS debugging; Recommended Index: * * * *

Having been engaged in web development for several years, it is increasingly felt that there is a higher demand for web development now. To write nice HTML code, to write elaborate CSS stylesheets to show each page module, to debug JavaScript to add some more lively elements to the page, to use Ajax to give users a better experience. A good web Developer is sure to bookmark this firebug plugin.  

Firefox plugin web Developer 1.1.6

 

Mainly used for HTML, CSS, JS View and editing, recommended index: Firefox on the development and debugging of Web site is the perfect choice. The Web Developer Toolbar contains a range of tools, from cookie Management to CSS debugging, from navigation lines to screen rulers, which are simply too much to say. Behind Firebug's Web development designer tools. Features are numerous and robust. Look at this dazzling plugin settings window to see how powerful it is. Recommended Web developers and web designers to use, to help you easily adjust and improve the page;

Kindle

Fox plugin JavaScript Debugger Venkman:

Mainly used for JavaScript debugging; Recommended Index: * * * *

A Mozilla-based browser's JavaScript debugging environment is an extension of Mozilla's browser. Venkman based on the Mozilla JavaScript debugging API (JS/JSD), the JS/JSD API forms the basis for Netscape JavaScript Debugger 1.1. This debugging tool is available in the Netscape browser 4.x system. Venkman is currently a popular JavaScript debugging tool. Highly recommended this just downloaded a Mozilla free debugger JavaScript Debugger. This debugger, formerly known as the Netscape JavaScript debugger, is an additional product of Mozilla. The Venkman JavaScript debugger is both a graphical and a console debugger. Once you have downloaded and installed the Venkman JavaScript debugger, you can use the Tools | Web Development | JavaScript Debugger menu to start it. This add-on allows you to view and debug JavaScript in a source file or Web page.

Venkman Related downloads:https://addons.mozilla.org/zh-CN/firefox/addon/216

Second, IE Web Debugging plug-in

Superpreview Microsoft's Web Development debugging tool

Mainly used for HTML, CSS debugging and each browser (currently only for IE6-IE8) page rendering test; Recommended Index: * * *

Superpreview is part of the Expression Web 3 that Microsoft will launch, primarily for debugging pages, and the current Expression Web Superpreview allows users to compare their site's appearance in IE 6 with IE 7, ie 8, while Firefox, Safari, Google Chrome, and more will be supported in the future full version.

Internet Explorer Collection lets you have IE1-IE8 at the same time

Primarily used for page rendering testing of various versions of Internet Explorer browser (IE1-IE8); Recommended Index: * *

Internet Explorer Collection can make your computer install IE1-IE8 at the same time, but this tool is not very good for vista system support.

IE Developer toolbar and IE8 developer tools

Mainly used for HTML, CSS Debugging and JS debugging; Recommended Index: * *

Although this thing changed the fashionable name, but it is not a new thing, its predecessor is "Iedevtoolbar". However, it was just a plugin for IE. And in IE8, the browser has automatically integrated this thing, not only changed a little turtle name, but also enhanced a lot of functions. Developer tools can also be called from the IE8 Tools menu, or by clicking the F12 shortcut key directly.

Microsoft's Internet Explorer Developer Toolbar is the best Dom check and CSS debugging tool on IE. Because IE has a high market share and is full of defects throughout the rendering model (such as the infamous haslayout margin overlap bug), debugging IE is a necessary step for web development-without this tool, IE's debugging will become a nightmare. Although IE Developer toolbar is slightly mentally retarded than firebug, he can at least help you tame IE's monster.

. IE Debugging Tools IE webdeveloper

Mainly used for HTML, CSS Debugging and JS debugging; Recommended Index: * * *

IE Webdeveloper allows you to check and edit your HTML DOM, display error messages, log messages, display site source code, monitor DHTML events and HTTP traffic. If you are a developer or designer, but usually like to use IE, ie webdeveloper is a good choice. Its features can be compared to the Firebug under Firefox, and even some features are stronger than Firebug,ie Webdeveloper allows the HTML DOM to be browsed, transmitted, and updated directly in the browser window. The software can analyze the Web page in real time and display it as a tree style that allows you to view table styles, JavaScript scripts, tables, and other page elements. The software can also highlight selected page elements interactively in the browser, so you can locate their code in the actual Web page. View style elements, locate Div, and more. and support one-click (including Html/xhtml/css/javascript tutorial, etc.). Although it is not as handy as Firebug, it solves the problem of insufficient debugging tools on IE.

Ietester-also has IE6, IE7, IE8 (Vista compatible)

Primarily used for page rendering testing of various versions of Internet Explorer browsers; Recommended Index: * * * *

Use IETester to better solve, test the Web compatibility of multi-ie version of the requirements. Ie5.5--ie8bet A1 has been supportedfor the time being, I think that's enough. Still struggling to find IE6 and IE7 coexistence or IE7 and IE8 coexistence of friends, you can try this software.

Front-end debugging tool Debugbar

Mainly used for HTML, CSS Debugging and JS debugging; Recommended Index: * * *

Here I would recommend a debugbar; everyone must know ietester, we all use IETester to test each version of the page compatibility, in fact, the new version of the IETester (click to download the latest version of the IETester v0.3.2 There is also a very powerful page debug plugin: Debugbar.

Debug with vs2008 Javacscript

Mainly used for JS debugging; Recommended Index: * * *

Faced with a large segment of JavaScript scripts, it was always a headache and could not find a way to debug the code. If there is any error or exception, always analyze it from the beginning and insert a lot of alert (), which is cumbersome to debug. Another feature of JavaScript in Visual Studio 2008 is that it provides more powerful JavaScript debugging capabilities, which makes it much easier to use JavaScript and build AJAX applications. Again, this feature is available in the free visual Web Developer Express version and in Visual Studio.

Web front-end development Essentials tool recommended