為企業(yè)提供網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)站優(yōu)化、全網(wǎng)整合營銷推廣、競價托管、品牌運營等營銷獲客服務。創(chuàng)新互聯(lián)擁有網(wǎng)絡(luò)營銷運營團隊，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗助力企業(yè)精準獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認可！

本文目錄一覽

• 1，Web前端用什么工具調(diào)試
• 2，現(xiàn)在比較好用的前端開發(fā)工具有哪些啊
• 3，前端工程師都有用哪些比較靠譜的小工具

1，Web前端用什么工具調(diào)試

Web前端開發(fā)中，為編寫高效的HTML/CSS/JavaScript，優(yōu)化Web前端性能，不可避免要分析HTTP請求頭和響應頭，調(diào)試HTML/CSS/JavaScript。這時候，我們就需要用到一些Web前端的開發(fā)調(diào)試工具。以下的工具，是Web前端工程師最常用的：1.FireBug2012年以前，火狐貍幾乎是所有前端開發(fā)者最喜歡的瀏覽器，基于FireFox的插件FireBug成了Web前端工程師開發(fā)調(diào)試網(wǎng)頁的選利器。
2.Chrome Developer Tools自從2011年FireBug的開發(fā)者J.Barton跳槽到Google，負責開發(fā)Chrome Developer Tools后，Chrome Developer Tools就有了本質(zhì)性的變化。于是，Web前端開發(fā)工程師最喜歡的瀏覽器又變成了Chrome，Chrome Developer Tools也就順理成章成為開發(fā)調(diào)試網(wǎng)頁的不二利器了。
3.Fiddler 2FireBug和Chrome Developer Tools雖好，只是分別針對FF和Chrome，那么有沒有針對所有瀏覽器或者針對HTTP協(xié)議的調(diào)試工具呢？那就是Fiddler 2了。這些工具都提供了種類繁多的功能，要完全掌握并非易事。初學者打開一看，密密麻麻的，往往有無從下手的感覺。其實呢，工具的使用很簡單，無它，唯手熟爾。初學者有無從下手的感覺，是因為不了解工具背后的原理而已。

2，現(xiàn)在比較好用的前端開發(fā)工具有哪些啊

作為一個前端開發(fā)工程師，使用一款自己上手且功能強大的開發(fā)工具是非常重要的，但是面對這么多開發(fā)工具，到底哪個比較好呢？下面我個人推薦幾款自己感覺還不錯的前端開發(fā)工具，希望作為大家的參考。
1、hbuilder作為一個編程的菜鳥，對于英語真的是有心無力，尤其是一些國外的開發(fā)工具都是英文界面，我就非常的不喜歡。hbuilder是國產(chǎn)的一款前端開發(fā)工具而且是免費的，對于英語不好的前端工程師是一個不錯的消息。hbuilder的官方大致是這么解釋為什么要開發(fā)hbuilder的：HTML最開始其實不是一個編程語言，確實用不著什么ide。但是發(fā)展到現(xiàn)在，7w多個語法，js越來越龐大，真開發(fā)一個達到原生水準的App，不是用以前的文本編輯器能搞定的。目前竟然沒有一個開發(fā)工具能把7w多HTML5語法提示齊全，這不科學，在原生開發(fā)里這是不可想象的，xcode之于iOS，eclipse之于Android，vs之于winphone，在語法提示、轉(zhuǎn)到定義、重構(gòu)、調(diào)試等方面都非常高效。作為同時熟悉原生和HTML5開發(fā)的我們，我們在開發(fā)HTML5時明顯感受到效率低下。于是有了hubuilder。確實是hubuilder支持左右的前端語法代碼提示，這個是我最喜歡的它的一個原因，而且還有強大的其他語言支持和開發(fā)webapp等功能，強大到?jīng)]朋友。缺點也是有一些的，就是其有些穩(wěn)定，有時可能會有些卡頓的現(xiàn)象，希望官方修復。
2、sublime textsublime text是一個輕量級的編輯器，也是支持各種編程語言，sublime text所有的強大功能都是支持插件的，而且快捷鍵十分的好用，可以極大的減少開發(fā)的勞動程度，使用sublime就是要使用其快捷鍵和插件。該軟件的優(yōu)點的輕量級但是功能強大，缺點是對于項目的管理等不是很方便，代碼提示不如hubuilder強大。
3、dreamwave這是一款很經(jīng)典的前端開發(fā)工具了，以前人們使用的是它的可視化開發(fā)工具，但是現(xiàn)在它只能是作為一個代碼編輯器來使用的，當然一些可視化的功能現(xiàn)在也是用的上，如要插入Flash視頻等還是使用可視化簡單一些，畢竟不是所有人都能純手寫哪些意義不大的代碼，優(yōu)點是人們熟悉穩(wěn)定，支持一些可視化的插入操作，缺點是代碼提示不好，不能進行快速的開發(fā)只能是作為學習使用?？偨Y(jié)：以上只是前端開發(fā)工具中個人比較熟悉的，除此之外還有很多優(yōu)秀的前端開發(fā)工具如webstorm等，大家可根據(jù)自己的喜好選擇自己習慣的工具進行開發(fā)。

1、HBuilder功能簡介：HBuilder是專為前端打造的開發(fā)工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數(shù)據(jù)、可以方便的制作手機APP、最保護眼睛的綠柔設(shè)計等特點。支持HTML、CSS、JS、PHP的快速開發(fā)。從開放注冊以來深受廣大前端朋友們的喜愛。
2、Sublime Text功能簡介：Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。
3、PS功能介紹：Dobe Photoshop，簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。
4、Dreamweaver功能介紹：dreamweaver是個由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。
5、WebStorm功能介紹：WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國JS開發(fā)者譽為“Web前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
6、Visual Studio Code功能介紹：Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，軟件功能非常強大，界面簡潔明晰、操作方便快捷，設(shè)計得很人性化。軟件主要改進了文檔視圖，完善了對 Markdown的支持，新增PHP語法高亮。
7、wampServer功能介紹：WampServer，是Windos Apache Mysql PHP集成安裝環(huán)境，即在window下的apache、php和mysql的服務器軟件。PHP擴展、Apache模塊，開啟/關(guān)閉鼠標點點就搞定，再也不用親自去修改配置文件了，WAMP它會去做。再也不用到處詢問php的安裝問題了，WAMP一切都搞定了。
8、Atom功能介紹：ATOM，是一個現(xiàn)代的文本編輯器,平易近人,但可刪節(jié)的核心工具定制做任何事,也可以使用有效不沾一個配置文件。

現(xiàn)在比較好用的前端開發(fā)工具有：Dreamweaver：HTML開發(fā)工具，編寫靜態(tài)頁面和CSS樣式；Notedpad++：Windows操作系統(tǒng)下的文本編輯器，有完整的中文接口、支持多國語言編寫；Visual Studio Code（vscode）：一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展；sublime text：跨平臺編輯器，也是HTML和散文先進的文本編輯器；支持Windows、Linux、Mac OS X等操作系統(tǒng)。

整套的開發(fā)，從“設(shè)計”開始，這需要圖像處理軟件photoshop以及其他一些軟件，接著是html和css的架構(gòu)，可不要認為css很容易，有的架構(gòu)很難的，接著是js與jquery，想讓你的頁面好看，這兩個非常非常重要，軟件用dreamware，需要耐心，這不是一朝一夕的事，祝你成功！

剛剛試用完微軟的Modern.IE前端，感覺不錯，呵呵，試試吧

3，前端工程師都有用哪些比較靠譜的小工具

1.node.js + npm， 這個是前端工具的一個平臺，沒有他們就沒有以下的工具，建立開發(fā)環(huán)境，下載開發(fā)工具，運行開發(fā)工具的利器2. bower, 庫依賴管理器，類似于npm，但針對瀏覽器JavaScript的依賴管理，減少尋找?guī)?，下載庫和升級庫的煩惱 3.grunt，流程自動化管理工具，將你非編程的開發(fā)步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發(fā)布和開發(fā)各種無壓力。以下大部分開發(fā)工具，都有g(shù)runt的相對應的插件，也就是說他們都能利用grunt進行自動化運行 4.liveReload, 本來是一套解決方案，自從grunt watch出現(xiàn)后，我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單，只要發(fā)現(xiàn)目標文件中有任何一個文件有改動，立刻通知瀏覽器刷新頁面，這樣就免除了手動按F5。如果和grunt watch合用，就是只要發(fā)現(xiàn)任何文件有改動，立刻運行自動化流程中的所有任務，然后通知瀏覽器刷新。
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統(tǒng)中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發(fā)新系統(tǒng)的css比較好），一套css預編譯語言，可以把less語法轉(zhuǎn)成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網(wǎng)頁。測試，抓圖，網(wǎng)頁流程自動化利器。配合casperjs的語法簡化功能真強庫后，控制Phantomjs就更加容易了 7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發(fā)css的時候，快速對n多個頁面進行觀察，看其前后變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非?？斓摹Ｖ档胏ss開發(fā)時擁有 8. phantomCSS，這個和grunt photobox類似，都用于css開發(fā)的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然后進行前后比較，更加注重細節(jié)上的差異，這個比較合適組件開發(fā)時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的加載。有g(shù)runt的插件 11. browserify允許你在瀏覽器里面使用CMD標準模塊，但本人認為它的另外一個優(yōu)勢是合并代碼，開發(fā)時候可以把代碼模塊化，分成很多很多小文件，然后有調(diào)理的放到相對應文件夾下，然后最后合成單一文件。本人曾經(jīng)利用browserify開發(fā)greasemonkey代碼，大大簡化了greasemonkey的開發(fā)難度和增強了greasemonkey代碼的質(zhì)量。browserify有g(shù)runt插件，這樣又減少的開發(fā)步驟。
12. Karma， google開發(fā)的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由于前端瀏覽器眾多，就算你有l(wèi)ive-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然后把單元測試在個個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背后使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。還有些有名氣的工具，應該不錯，但是自己沒有用過，所以也就沒有提，但可以參考一下yeoman 項目初始化工具buddy.js 魔術(shù)數(shù)字檢查器 Image minifier.壓縮圖片工具html-minifier html壓縮jade html預編譯語言jsdox JS代碼注釋文檔生成器jscs JS代碼風格檢查器

庫依賴管理器，應該開發(fā)新系統(tǒng)的css比較好），也就是說他們都能利用grunt進行自動化運行 4，這樣就免除了手動按F5，建立開發(fā)環(huán)境，下載開發(fā)工具，使你的JS代碼可以更加快速的加載。有g(shù)runt的插件 11. browserify允許你在瀏覽器里面使用CMD標準模塊，但本人認為它的另外一個優(yōu)勢是合并代碼，還是非?？斓?。值得css開發(fā)時擁有 8. phantomCSS，這個和grunt photobox類似，都用于css開發(fā)的，差別是photobox是全局觀察差別，就是速度慢，更加注重細節(jié)上的差異，這個比較合適組件開發(fā)時候使用，lessc是less語言編譯器.UglifyJS，壓縮JavaScript代碼，運行開發(fā)工具的利器2. bower。
13.clean-css (grunt cssmin)，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然后把單元測試在個個瀏覽器中自動運行一遍。但比起手動對比來看，就算你有l(wèi)ive-reload這樣自動化工具，但是還是要手動打開各種瀏覽器。它的目的很簡單，立刻通知瀏覽器刷新頁面，只要發(fā)現(xiàn)目標文件中有任何一個文件有改動，類似于npm，但針對瀏覽器JavaScript的依賴管理，減少尋找?guī)欤螺d庫和升級庫的煩惱 3.grunt，流程自動化管理工具，將你非編程的開發(fā)步驟減到最小，應該不錯，但是自己沒有用過，讓這個步驟也能自動化了，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然后進行前后比較，還沒有專門用過，這樣又減少的開發(fā)步驟。
12，grunt watch+liveReload或者grunt connect1.node，網(wǎng)頁流程自動化利器，而是配合測試單元框架的一個工具，在利用live-reload即時刷新功能，可以讓你開發(fā)css的時候，自從grunt watch出現(xiàn)后，我們只要安裝他的chrome或者firefox插件就行了. Karma， google開發(fā)的一個單元測試運行器，這個自己本身不是一個單元測試框架，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題，所以也就沒有提.js + npm， 這個是前端工具的一個平臺，沒有他們就沒有以下的工具.liveReload, 本來是一套解決方案。由于前端瀏覽器眾多。不過缺點也比較明顯。配合casperjs的語法簡化功能真強庫后，發(fā)布和開發(fā)各種無壓力。以下大部分開發(fā)工具，都有g(shù)runt的相對應的插件，快速對n多個頁面進行觀察，看其前后變化。測試，抓圖,可以使得免除你F5無盡地獄，一套css預編譯語言，可以把less語法轉(zhuǎn)成css語法，控制Phantomjs就更加容易了 7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，沒有界面的瀏覽器，用js腳本控制其操作網(wǎng)頁. jshint，用jshint檢查一下是沒錯的 。
10。本人曾經(jīng)利用browserify開發(fā)greasemonkey代碼，大大簡化了greasemonkey的開發(fā)難度和增強了greasemonkey代碼的質(zhì)量。browserify有g(shù)runt插件，配合grunt less，編寫大型css文檔毫無壓力。
6。如果和grunt watch合用，就是只要發(fā)現(xiàn)任何文件有改動，立刻運行自動化流程中的所有任務，然后通知瀏覽器刷新。
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統(tǒng)中的css，（而Sass語法比較特殊，開發(fā)時候可以把代碼模塊化，分成很多很多小文件，然后有調(diào)理的放到相對應文件夾下，然后最后合成單一文件.Phantomjs。在部署你JS前。
9， 我用的是grunt cssmin，但是grunt cssmin實際上背后使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。還有些有名氣的工具

你好 很高興回答你的問題 主要有：fetcher: 一個 http client，可以發(fā)送各種 http 請求，用來調(diào)試 api 很方便charles: mac 下的 fiddler，比 fiddler 還好用些，目前不支持 retina 屏幕frank deloupe: 支持 retina 的屏幕拾色器xscope: 每個前端工程師心中都有一把尺kaleidoscope: 最好用的 diff 工具ia writer: markdown 寫文檔的工具，開始寫文檔的那天就是一個前端工程師走向成熟的標志tower: git 的 gui 工具，支持 github，而且比 github 自己的客戶端功能要強大，推薦使用 git 又對 terminal 命令沒有強迫癥的人使用dash: 各種語言和工具、框架的文檔fetcher 替換成了 postman: 尤其是 packaged app 的版本，功能上比 fetcher 有很大提升iterm2 + oh my zsh: 終端其實對前端開發(fā)并不是必須的東西，完全不用也有各種 gui 工具可以幫助你完成任務，但是用過的人才知道這個看起來最原始的東西卻能極大提高生產(chǎn)力。skitch: 其實截圖工具在 qq 有了 mac 版本之后就不是那么重要了，但是 skitch 卻始終在我的工具名單上，除了強大的標注功能外，還能和 evernote 整合，一旦習慣了就很難離開。controlplane: 最初用這個 app 是想在不同的 wi-fi 環(huán)境下自動切換 location 達到不用手動切換代理的目的，后來發(fā)現(xiàn)這個 app 的功能非常強大，拿來模擬各種網(wǎng)絡(luò)環(huán)境、切換測試網(wǎng)絡(luò)等等都是可以的

本文名稱：前端工程師用什么工具，Web前端用什么工具調(diào)試
本文鏈接：http://www.rwnh.cn/article18/iscogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、企業(yè)建站、軟件開發(fā)、手機網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)