制作網(wǎng)頁一般都用什么軟件呢？記事本？notepad？DW？firework？UltraEdit？FrontPage？

相信寫過網(wǎng)頁代碼的人見到這些軟件都不生疏，其實(shí)這些專業(yè)的軟件以為，還有一些比較小巧的軟件，應(yīng)用起來也是很方便了，當(dāng)然功能性可能會(huì)欠缺一些，比如說DW的聯(lián)想功能，只需要輸入一部分標(biāo)簽就可以出現(xiàn)下拉選擇自己要書寫的代碼，但是作為輔助功能還是很好用的，下面就來講一下。

綜合開發(fā)工具

綜合的網(wǎng)站開發(fā)工具幾乎都是瀏覽器的插件，提供了許許多多的功能，例如：

開關(guān) CSS、開關(guān) Javascript、開關(guān) Cache：

可以馬上看到你的網(wǎng)頁在瀏覽器中沒有 CSS、沒有 Javascript 或沒有快取時(shí)的是長(zhǎng)怎么樣子。為什么要看沒有 CSS 和 Javascript 的狀況呢？一切都是為了 Accessibility 啊！

檢視頁面中文件的 DOM 結(jié)構(gòu)和指定范圍的原始碼。

檢視每個(gè)元素或 DIV 的ID、Class、目前的CSS樣式（包括繼承的樣式），也可以將元素或 DIV 的外框顯示出來。對(duì)于找出 CSS 和 Javascript 的問題十分有用。

檢驗(yàn) HTML 和 CSS 語法是否正確、符合 W3C 的標(biāo)準(zhǔn)。

因?yàn)檫@些工具是屬于瀏覽器的插件，所以又分為給 IE 和 Firefox (縮寫為FF) 所使用的版本，包括有：

Internet Explorer Developer Toolbar (IE)

Web Developer Extension (FF)

Firebug (FF)

HTTP 呼叫檢視工具

讓你可以很容易看到任何由瀏覽器所發(fā)出的 HTTP Request 的一切細(xì)節(jié)，包括檔頭資訊、所傳遞的參數(shù)、檔案大小、傳輸速度和時(shí)間…等等。用來觀察 Ajax 呼叫的行為和排錯(cuò)最方便。

HttpWatch (IE)

Firebug (FF)

原始碼工具

其實(shí)大部分的綜合開發(fā)工具就已經(jīng)有這樣的提供功能，讓你單獨(dú)檢視網(wǎng)頁中某個(gè)區(qū)域的原始碼，或是幫你檢查語法的正確性，另外也有單獨(dú)小巧的原始碼相關(guān)工具可以使用。想要鼠標(biāo)滑過去就立刻看到該范圍的原始碼嗎？而不需要在茫?！按a“海中撈針。

Instant Source (IE, 不是免費(fèi)的)

HTML VALIDATOR (FF)

圖形相關(guān)工具

除了用 Photoshop、Fireworks 這類標(biāo)準(zhǔn)的大型軟件來切圖以外，對(duì)于平常一些簡(jiǎn)單的工作，殺機(jī)焉用牛刀呢？

Color Cop：可以吸取畫面上任何地方的顏色色碼。

MeasureIt (FF)：測(cè)量畫面上的像素距離，例如想知道行距、邊界要設(shè)為多少像素時(shí)，就靠他了。

Screen Calipers：這是另一套用來測(cè)量畫面上像素距離的小軟件。

Split Browser (FF)：將 Firefox 同一個(gè)瀏覽器視窗分為上下或左右兩半，讓你可以在同一個(gè)畫面上同時(shí)看到兩個(gè)或多個(gè)不同的網(wǎng)頁內(nèi)容，互相做比對(duì)，而不需要在多個(gè)視窗中切換來切換去。

IE Tab (FF)：雖然是叫做 IE Tab，但這可是 Firefox 的插件。讓你在 Firefox 的瀏覽器視窗中開啟 IE，神奇吧！

MWSnap：免費(fèi)的螢?zāi)蛔D軟件，用來切圖也很方便，只要用秀圖軟件將原始網(wǎng)頁設(shè)計(jì)的整張圖打開、顯示在螢?zāi)簧?，就可以用螢?zāi)蛔D軟件，擷取出某個(gè)范圍的圖形了。

HyperSnap：另一套好用的螢?zāi)蛔D軟件，但不是免費(fèi)的。

Picasa：Google 的免費(fèi)秀圖、圖片管理軟件。

Adobe Labs’ Kuler：Adobe 提供配色參考的網(wǎng)站，想不出要用什么顏色時(shí)，看一看也許會(huì)有不一樣的靈感。

除了以上這些其實(shí)chrome的審查元素功能也是很好的查錯(cuò)排錯(cuò)功能，現(xiàn)在比較主流的瀏覽器基本上都有這個(gè)功能，利用360瀏覽器（極速模式或者極速版）就有。