Introduction to software development tools 6. Web development tools

1. editplus

I will use editplus to write XHTML pages, CSS, JS files, and even write down such a thing. I feel that it is not only powerful, but also rare: green, lightweight, Fast startup, and stable

1.1 configuration file template

Set up the configuration file of editplus to stop repetitive manual work. If we often create a file that contains repeated text orCodeThen, we can create a template and then create a file through the template. In this way, we can get rid of repetitive physical labor every time.

1.2 handy sidebar

The Sidebar contains the "quick directory path" and "quick Clipboard" functions. The "quick Clipboard" function can store some code snippets, common texts, and other texts. When you need the text, you only need to double-click it to easily add it to the position of the cursor. By default, some HTML and CSS codes are available. If there are too many "Clipboard" databases, you can create one of your most commonly used "Clipboard" databases.

1.3 gorgeous Automatic completion Function
When you press "UA" and press a space, the code on the right appears in the editor, and the mouse stays between the double quotation marks of the first href. Using the Automatic completion function of editplus will greatly improve your work efficiency. In addition, we can create different "auto-completion" based on different file types. For example, if it is an XHTML file, "B" + space "is In the CSS file, "B" + space "is" border: 1px solid red ;". Very user-friendly.
You can use this setting to use the automatic completion function of editplus.

1.4 highlighted syntax files

Many development tools have the syntax highlighting function. Although editplus is small, it also has this function. As with the automatic completion function, you only need to specify the highlighted syntax file for different file types. Commonly used file types such as CSS and HTML. editplus already comes with highlighted syntax files. If the built-in highlighted syntax file does not have what you need, you can download it from the editplus official website.

2. colorpic

A free software that is used to pick up the color. You can group the color when you move the mouse to the desired color. In this way, you can finish all the required colors at one time, and then use it slowly.
The CTRL + G shortcut is used to pick up the color and re-pick the color.

3. firebug, iedevtoolbar, ie Developer Tools, httpwatch, etc.

3.1 Microsoft iedevtoolbar

This is a free IE Plug-in specially designed for Web developers. iedevtoolbar can help us analyze the layout structure of the website and help us learn and analyze the CSS of the page. Its main functions include:
1. View codedom in a tree structure and view the attributes of each element. You can click and select an element. This is useful when we create and debug webpages;
2. generate an image report, that is, generate a detailed report for the images displayed on the page, so that we can find the image path and the image size by ourselves;
3. Highlight the borders of tables, table units, and Div. This is also useful when we adjust the layout;
4. The page ruler allows you to measure the length on any page. This greatly improves our work efficiency and does not need to capture images for a certain length and then use the drawing tool.

Official website free download
Http://www.microsoft.com/downloadS/details.aspx? Familyid = E59C3964-672D-4511-BB3E-2D5E1DB91038 & displaylang = en

3.2 httpwatch

Powerful webpage data analysis tools. integrated in the Internet Explorer toolbar. including the webpage summary. cookies management. cache Management. send/accept a message header. character query. post Data and Directory management functions. report output.

Official Website
Http://www.httpwatch.com/download/
It has two versions:
Httpwatch basic edition (free of charge, with some functional limitations)
Httpwatch Professional Edition

4. ietester

Ietester is an essential tool for a great web designer. With this tool, you can know the display and compatibility of webpages on IE6, IE7, or IE8, let's see if the hard-working CSS style or website layout can be normally displayed in various major browsers. Ietester displays the Web browsing screen of the specified IE browser version on different tabs in the form of "tab by page.

5. Script Compression

JavaScript and CSS compression are designed to reduce the number of bytes transmitted while maintaining the execution performance of the script (you can reduce the size of the original file or use gzip. Most product-level network servers use gzip as part of the HTTP protocol ).

Http://dean.edwards.name/packer/

Yui compressor (http://developer.yahoo.com/yui/compressor/), a jquery compression script tool officially recommended.