常常會(huì)聽到群里或論壇里討論哪個(gè)軟件強(qiáng)大、哪個(gè)軟件方便等等。其實(shí)這個(gè)無(wú)論是WEB前端開發(fā)還是WEB程序的開發(fā)，都離不開開發(fā)的工具，當(dāng)然，現(xiàn)在 有不同的系統(tǒng)平臺(tái)，對(duì)應(yīng)不同系統(tǒng)平臺(tái)的軟件也有不少，每個(gè)人使用的平臺(tái)、使用的習(xí)慣也不同，自然也就有不同的軟件使用。由此也多了一個(gè)什么軟件好用的說(shuō) 法，但個(gè)人覺得，無(wú)論什么軟件，適合自己就好，不需要過(guò)分的追求。俗話說(shuō)：“工谷善其事，先必利其器。”一個(gè)用得順手的工具，確實(shí)能為我們的開發(fā)帶來(lái)方 便，更重要的是會(huì)讓我們更加享受工具開發(fā)過(guò)程中所帶來(lái)的樂趣?！　”救藦氖戮W(wǎng)頁(yè)重構(gòu)這一塊，也有一些自己經(jīng)常使用的工具，今天與大家分享一下腳本之家所用的工具，給大家做個(gè)參考，讓有需要的人可以更有參考和選擇的理由。我相信，每個(gè)人的選擇都有他的理由的。以下的只是我的選擇和排序。
NO1、記事本

　　相信接觸電腦的人沒有人不認(rèn)識(shí)記事本的吧，沒錯(cuò)，這個(gè)就是系統(tǒng)的自帶的記事，不過(guò)本人沒用過(guò)LINUX和APPLE的系統(tǒng)，不知里面是否也是自帶了記事本的。這個(gè)記事本雖然很簡(jiǎn)陋，甚至可以用丑來(lái)形容，但是卻是非常合心的小工具。
　　有時(shí)候手頭上沒有任何的其他工具軟件，這時(shí)候就可以用記事本來(lái)代勞了，直接在里面手寫代碼。當(dāng)然，這個(gè)只是暫時(shí)性的代替，寫代碼還是有更好的工具的。
　　記事本除了來(lái)用可以緊急替代，平時(shí)里還有其他作用的。有時(shí)候，我們想從網(wǎng)頁(yè)上保存一些文字下來(lái)到WORD里面，直接復(fù)制就把HTML和相應(yīng)的樣式什么的都一并復(fù)制進(jìn)來(lái)了，影響了美觀，當(dāng)然有經(jīng)驗(yàn)的人知道可以采用“選擇性粘貼”，但沒經(jīng)驗(yàn)的人是一下子復(fù)制進(jìn)來(lái)后就不知怎樣處理了，這時(shí)候可以先將復(fù)制的東西粘貼在記事本里，再?gòu)挠浭卤纠飳⑽淖謴?fù)制到WORD里，這樣就完全的將HTML的標(biāo)簽及樣式完全的去掉了，成了完完全全的純文本了。
NO2、EditPlus(下載)

　　這個(gè)現(xiàn)在是我至愛的一個(gè)寫代碼的工具，不僅功能齊全，自定義程度高，程序文件還非常小，可綠色攜帶，配置可以移植，語(yǔ)法、模板都可根據(jù)自已的書法習(xí)慣來(lái)進(jìn)行自定義，還可以定制自定義的著色等等優(yōu)點(diǎn)，讓我用上了就愛不離手了。無(wú)論是HTML/Javasctipr/CSS，還是/ASP/PHP/C/C++/Perl/JAVA等語(yǔ)言，基本都是通殺的，當(dāng)然，我也只是基本用前三種語(yǔ)言而已。另外還有可以進(jìn)行代碼收縮、縮進(jìn)、查看行數(shù)、列數(shù)等功能也非常的實(shí)用，更重要的有一個(gè)基本上是無(wú)限次數(shù)的撤消或重做的功能，可以上你在任意的時(shí)候都可以回到所需要的狀態(tài)，一些文件比較等小功能還有待更加深入的挖掘。
　　當(dāng)然，這個(gè)軟件也是有一些缺點(diǎn)的，例如，沒有可視化功能，當(dāng)然這個(gè)并不是在要可視化里面編輯，只是想可以實(shí)現(xiàn)在可視化里點(diǎn)擊一下就能快速定位到代碼部分，這樣方便查找（哈哈，這個(gè)只是個(gè)人的一個(gè)想法而已）。還有就是不能智能代碼收縮，只能根據(jù)代碼的縮進(jìn)量來(lái)進(jìn)行判斷，所以有時(shí)候收縮代碼不太準(zhǔn)確，特別是頁(yè)面長(zhǎng)、代碼量非常大的時(shí)候，有時(shí)候要定位某個(gè)部分的代碼找起來(lái)也比較費(fèi)時(shí)。還有一個(gè)就是替換的功能試用了感覺不是那么智能和準(zhǔn)確，明明輸入準(zhǔn)確的搜索要替換的條件，且眼睛也都定位到了相應(yīng)的代碼部分，但軟件就是死活不認(rèn)（呵呵，可能他也會(huì)有睜眼瞎的時(shí)候），搜索替換的時(shí)候，也非常的迅速，簡(jiǎn)直是“迅雷不及掩耳之勢(shì)”，一下子全部都替換了還沒反應(yīng)過(guò)來(lái)，還要撤消一下看看是否執(zhí)行了操作。
　　當(dāng)然雖然還有這些缺點(diǎn)，但這個(gè)工具安裝程序才2M多一點(diǎn)，安裝解壓后也才不過(guò)3M左右，實(shí)在強(qiáng)大，缺點(diǎn)相對(duì)優(yōu)點(diǎn)已經(jīng)算是吹毛求疵了，哈哈，本人至愛。
　　另外本人也根本自己的使用習(xí)慣，配了一個(gè)著色的方字案和相應(yīng)的語(yǔ)言文件（包括了HTML和CSS的講法），著色可看上面的圖，具體的語(yǔ)法和模板請(qǐng)自行下載親測(cè)。
NO3、FastStone Capture(下載)

　　這個(gè)是一個(gè)輔助類的小工具，但是這個(gè)小工具雖然“麻省雖小，卻也是五臟俱全”，非常的優(yōu)秀，也可以綠色攜帶。這個(gè)小軟件有非常多的功能，有各種各樣方式的截圖，錄制屏幕、屏幕放大鏡、屏幕尺、屏幕取色等等的功能，本人常用的就截圖、屏幕尺、取色等功能，包括本博中的所有截圖，基本上都是出自這個(gè)軟件的。屏幕尺和取色工具可以在寫頁(yè)面的時(shí)候用來(lái)進(jìn)行效果圖的精確的查看和進(jìn)行取色。非常得心和方便的小工具。
NO4、Topstyle(下載)

　　這是一個(gè)寫CSS的工具，有自動(dòng)提示功能，當(dāng)不想每個(gè)字母都自己來(lái)敲的時(shí)候，這個(gè)工具就可以派上用場(chǎng)了。工具是支持其他語(yǔ)言的，只不過(guò)我一直只用來(lái)寫CSS。工具還有預(yù)覽、針對(duì)不同的瀏覽器的檢測(cè)等其他一大堆的功能，但本人基本不用的，只用一項(xiàng)就已足夠了。
　　此工具也有一些缺點(diǎn)，就是不支持自動(dòng)換行，有時(shí)候一個(gè)類會(huì)寫得很長(zhǎng)，得拖動(dòng)橫向的滾動(dòng)條到右邊去看，很不方便，個(gè)人覺得這個(gè)很有必要進(jìn)行優(yōu)化。希望軟件有做該軟件漢化的人或其他的人看到可以向軟件作者反映進(jìn)行優(yōu)化一下。軟件是英文版的，因?yàn)楸救耸褂玫氖菨h化版的，所以對(duì)中文支持有些問題，部分文字會(huì)看不到（當(dāng)然CSS不可能是中文的，是注釋啦，如果有一天，樣式也能用中文來(lái)寫，那個(gè)時(shí)候就強(qiáng)悍了，呵呵），估計(jì)英文版的也會(huì)是這樣情況，所以可以諒解、忽視。
NO5、Dreamveaver

　　這個(gè)是一個(gè)功能非常強(qiáng)大的開發(fā)工具，在使用這么多的寫代碼的工具中，這個(gè)是最完善和強(qiáng)大的了，主流的語(yǔ)言都支持，需要有的功能也基本上全有了，這里就不再多說(shuō)，相信開發(fā)的人都知道這個(gè)軟件的強(qiáng)大了。其中個(gè)人最喜歡的就是智能收縮的，不會(huì)像EditPlus那邊是根據(jù)縮進(jìn)來(lái)進(jìn)行收縮的，而是完全的做到了根據(jù)標(biāo)簽來(lái)進(jìn)行自動(dòng)關(guān)閉收縮，這個(gè)是非常有用的；另外一個(gè)，就是可以在視圖編輯里點(diǎn)擊相應(yīng)的位置，切換到代碼視圖里就能快速定位到代碼所在的地方，這個(gè)也是非常的好用的；還有一個(gè)就是智能的提示功能，會(huì)提示你寫的標(biāo)簽不正確的時(shí)候會(huì)給出提示，或者代碼變色，讓你很容易的定位到相應(yīng)出錯(cuò)的代碼部分gmf有一個(gè)就是強(qiáng)大的搜索功能，可以對(duì)單文件、多文件、站點(diǎn)文件、目錄文件夾進(jìn)行查找來(lái)替換，這點(diǎn)是我使用過(guò)的工具中擁有最強(qiáng)悍的搜索功能的（我在幻想，要是EditPlus也有這四個(gè)功能該多強(qiáng)大啊，哈哈）。其他還有數(shù)不清的功能大家可以自行繼續(xù)深入發(fā)掘，哈哈?？偟膩?lái)說(shuō)，Dreamveaver算是一個(gè)比較強(qiáng)大和完善的工具了。無(wú)論是新手老手，相應(yīng)都不會(huì)陌生的。
　　當(dāng)然，作為一個(gè)如此優(yōu)秀的工具，該怎么使用也是非常值得一提的。老手當(dāng)然基本都是用代碼模式的，視圖模式一般只是用來(lái)進(jìn)來(lái)點(diǎn)擊定位到代碼位置的，這個(gè)不用提了；新手更多時(shí)候使用的是視圖或設(shè)計(jì)模式，因?yàn)橥ㄟ^(guò)直接點(diǎn)擊和選擇就能實(shí)現(xiàn)一些頁(yè)面的效果，但這樣是非常不利于學(xué)習(xí)語(yǔ)言的，只知表面不知其中，個(gè)人建議一定要切換到代碼模式里一個(gè)代碼一個(gè)代碼的敲（當(dāng)然有代碼提示已經(jīng)省掉了我們很多的敲打了），這樣學(xué)習(xí)起來(lái)才會(huì)有效果，絕對(duì)不要相信那個(gè)什么所謂得的教程或書本來(lái)點(diǎn)擊這里那里的來(lái)“插入”來(lái)完成網(wǎng)頁(yè)，這完全是誤人子弟的，會(huì)讓你走很多彎路，到最后來(lái)發(fā)現(xiàn)，自己會(huì)的只是使用這個(gè)軟件而已，而語(yǔ)言還是永遠(yuǎn)沒有學(xué)會(huì)。這是本人親身的體驗(yàn)，希望各位新同學(xué)引以為戒。
NO6、FireWork

　　其實(shí)這個(gè)和PhotoShop的功能上都是非常相似的，F(xiàn)ireWork本來(lái)是出自Macromedia公司的，后來(lái)給ADOBE公司收購(gòu)了，并且和PhotoShop一同出面在Master Collection（開發(fā)套裝）中，會(huì)讓人產(chǎn)生一些疑惑，為什么都是同樣的圖片處理軟件，不整合到一個(gè)軟件中呢？其實(shí)這兩個(gè)軟件雖然相似，但功能和側(cè)重是有所不同的，ADOBE公司不整合在一起肯定是有他的道理的，具體可以自得去深入了解一下，本文重點(diǎn)不在此。
　　此工具本人最常用的也就是切圖用來(lái)輸出圖片是最方便的，可以很方便的對(duì)圖片進(jìn)行各種規(guī)格的輸出，是用得最順手的一個(gè)切圖工具。其他的功能基本很少用甚至沒用過(guò)，這里就不再多說(shuō)了。
NO7、PhotoShop

　　PhotoShop這個(gè)大名鼎鼎的工具真的是讓人如雷貫耳，現(xiàn)在基本上涉及設(shè)計(jì)的各個(gè)行業(yè)都在使用，其中的強(qiáng)大自然是不言而喻。PhotoShop可以讓張飛變美女，可以讓各種各樣生活中的不完美在PhotoShop中變得完美，讓各種幻想都可以變成現(xiàn)實(shí)，其鬼斧神工之效確實(shí)是無(wú)人能敵。
　　當(dāng)然作為前端開發(fā)的我也不可能會(huì)錯(cuò)過(guò)這個(gè)軟件，但由于本人不擅長(zhǎng)設(shè)計(jì)，所以用得馬馬虎虎，基本上是只用于一些圖片處理和優(yōu)化輸出等等。具體可以查閱一下我寫過(guò)的文章《前端工程師新手必讀》圖片優(yōu)化部分，里面的一些觀點(diǎn)也許有錯(cuò)誤，現(xiàn)在也有在求真當(dāng)中，各位有需要的自行深入研究。
　　FireWork和PhotoShop現(xiàn)在雖然同出一家，但里面的一些區(qū)別至今我仍無(wú)法搞清楚的。如我的另外一篇文章里說(shuō)到的一個(gè)觀點(diǎn)：PNG24是否支持透明度？FireWork輸出的PNG24和PhotoShop輸出的PNG24都不透明，而PhotoShop中輸出的PNG24+透明為什么在FireWork和別的看圖軟件顯示的都是PNG32。這個(gè)問題困擾了我很久，問了一些業(yè)界的包括做設(shè)計(jì)的也搞不清楚這個(gè)問題，所以打算向ADOBE公司里咨詢一下。具體本人也在整理這方面的資料，有結(jié)果后會(huì)再跟大家公布。
　　另外，ADOBE公司的這些軟件都很強(qiáng)大很優(yōu)秀，但是也有有一個(gè)很大的弱點(diǎn)，就是軟件非常的龐大，一個(gè)軟件安裝包至少也有好幾百M(fèi)，大的上好幾個(gè)G，我的ADOBE Master Collection CS5（開發(fā)套裝）中，光鏡像文件兩個(gè)就有13G了，所以安裝也要花上半天的時(shí)間，機(jī)器配置不好的話跑起來(lái)更卡，特別是切圖寫代碼的時(shí)候，開這兩三個(gè)軟件就已經(jīng)開始跑得吃力了，無(wú)奈公司里的電腦只有2G的內(nèi)存，集顯，有時(shí)候跑得那個(gè)卡啊。
NO8、Firefox、Chroom、Mathon3



　　Firefox、Chroom、Mathon3這三個(gè)基本成為主要的瀏覽器，當(dāng)然還有萬(wàn)惡的系統(tǒng)原生IE6在機(jī)器上用來(lái)測(cè)試，利用這些工具配合頁(yè)面的開發(fā)和調(diào)試非常有用，HTML、Javascript、DOM、網(wǎng)絡(luò)情況什么的都不在話下，如果你還沒有加入到WEB標(biāo)準(zhǔn)瀏覽器行列中來(lái)的話那就趕快來(lái)吧。當(dāng)然測(cè)試的話僅僅是除了這些瀏覽器是不夠的，反正市面上的主流瀏覽器都裝上一個(gè)，測(cè)試時(shí)你會(huì)有不同的發(fā)現(xiàn)，什么Safari、Opera、世界之窗、搜狗、360………我都忘了裝了多少個(gè)了。另外針對(duì)不同的版本IE系統(tǒng)，用虛擬機(jī)來(lái)裝了不同的系統(tǒng)平臺(tái)上的不同的版本的原生瀏覽器來(lái)備測(cè)，有時(shí)候也是需要的，有時(shí)候同一版本的瀏覽器在不同的系統(tǒng)平臺(tái)上也會(huì)有不同的表現(xiàn)的，哈哈，在這里簡(jiǎn)直就是一個(gè)瀏覽器收集之家了。
NO9、MarkMan

　　一款很有愛的工具，和作者宣傳的口號(hào)一樣很有愛，可以進(jìn)行坐標(biāo)、尺寸、顏色、文字等標(biāo)注，支持保存文件二次編輯等非常友好的功能，很方便很喜歡。不過(guò)作者辛辛苦苦開發(fā)了一年我作品一夜之間就被TX的某個(gè)部門山寨了，還鬧得挺大的，作為原創(chuàng)，支持！
　　軟件已整理收藏了，有需要的朋友也可以下載收藏。
　　以上是本人經(jīng)常使用的一些關(guān)于WEB前端開發(fā)的工具，另外的還有一些其他的工具不太常用的就不介紹了，以上的這些工具其實(shí)都有很多的替代方案，不要一味追求新、強(qiáng)大，新且強(qiáng)大的軟件你的機(jī)器還不一定跑得起來(lái)，所以，我的一個(gè)選擇原則：適合、順手就好。

最新評(píng)論