⑴ 前端工程師都有用哪些比較靠譜的小工具
1、TakeColor 取色器
對於前端開發來說，和顏色、圖片打交道是難免的，有的時候想要在ps外面獲取顏色.
2、CoolFormat 源代碼格式化工具
CoolFormat，不僅僅適用於前端，因為它支持很多語言源代碼的格式化，可以在上面的開始菜單中選擇你要格式化的語言種類，這里我選擇的是js，然後將一串很亂的js代碼粘貼到下面的文本框裡面，點擊快速格式化.
3、做筆記的小幫手——有道雲筆記
其實這有道雲筆記不算是小工具了，在這之前，我一直都是用txt記事本記東西的
⑵ 前端開發都需要哪些工具
每個前端開發人員都有自己喜歡的開發工具，用這些工具能讓編碼更容易並且「令人愉快」。分享一些我認為真的很棒的很棒的Web開發工具！
1.Glitch
https://glitch.com
好的，這不僅僅是一個工具，還是一個非常棒的編碼平台以及一個很棒的技術社區。我可以在內置代碼編輯器的幫助下託管我的項目。支持多種語言，但最適合NodeJS。
2.Shadows
https://brumm.af/shadows
這個網站提供生成平滑陰影的CSS代碼，可以創建平滑的邊框陰影。它看起來真的很流暢，令人滿意。
3.Coolors
https://coolors.co
這是一款非常好的在線工具，可以為項目生成匹配的顏色方案。如果不喜歡當前的方案，按下空格鍵，它會重新生成一個配色方案，直到你滿意~
4. Blobmaker
https://blobmaker.app
Blobmaker可幫助你隨機生成各種尺寸，不同顏色和形狀的SVG Blob。你可以用作背景或創建看起來很酷的動畫。
5.Getwavs
https://getwaves.io
與Blobmaker相似，Get Waves能夠隨機生成不同顏色和不同數量的波浪。用作網頁的頁腳或頁眉看起來不錯。
6. Undraw.co
https://undraw.co
開放源代碼項目的SVG插圖集，可用來做登錄頁面，404頁面等，當然普通頁面也能用!上面的插圖可以不帶歸屬地版權的使用，無需支付任何費用。
7. Marcdown
https://liyasthomas.github.io/marcdown
由Liyas Thomas提供的在線實時的Markdown網頁編輯器，它可預覽Markdown代碼，將其發布到GitHub上。它提供一個非常漂亮的暗黑模式。還可離線工作，這使得它顯得更出色。
8.postwoman
https://postwoman.io
這是Liyas Thomas構建的另一個工具。Postwoman是一個API請求構建工作。開發者可以不使用代理來測試 API。這是一個漸進式Web應用程序，可以保存到桌面來用。它是輕量級的產品，基本上可以是Postman的在線替代品。
9. Screely.com
https://screely.com
它可以幫助你創建超級漂亮的網站截圖模型。如果你不是MacBook用戶，但需要更好的網站圖片作為自述文件，它非常適合我們。
10. CSS網格生成器
https://cssgrid-generator.netlify.com/
這是Sarah Drasner的創建的優秀網站，它使用CSS創建動態網格布局。
以上是10款web前端開發工具分享，希望對你有幫助。
⑶ web前端開發常用工具有哪些
1、jQuery
jQuery由於其無限的教程，沒有跨平台/瀏覽器問題，優秀的用戶界面，大量的插件以及它的輕量，快速和快速學習等特點而脫穎而出。超過70％的受訪者選擇jQuery作為他們的前端庫，它是一個快速，輕量級和簡潔的JavaScript庫，主要用於HTML文檔遍歷、事件處理、動畫和用於快速Web開發的Ajax交互。從本質上講，jQuery最適合需要快速開發的應用程序。
2、Bootstrap
超過65％的開發者選擇Bootstrap作為他們最喜歡的框架來使用，它是一個用HTML、CSS和JS開發的開源工具包。Bootstrap的廣泛流行主要是因為它的簡單使用、優秀的社區以及大量的文章和教程、第三方插件和擴展、主題構建器等。
3、Angular
如果你打算構建一個動態且強大的單頁應用程序，Angular就是你需要的框架。Angular是高度模塊化的，因此非常適合與團隊分開大型工作，並且使測試和調試變得輕松。功能優先的方法使Angular更加專注於功能，使開發人員的工作更輕松。此外，它還有來自Google社區的出色工具和支持。
4、NPM
NPM是Node的包管理器。藉助NPM，開發人員可以安裝各種模塊進行Web開發，共享和借用軟體包，並管理私有開發。它由網站、命令行界面（CLI）和注冊表三個不同的組件組成。
5、Webpack
Webpack是現代JavaScript應用程序的模塊打包程序，它將前端開發所需的所有資源（如JavaScript、字體和圖像）集中到一個地方。如果你正在開發復雜的前端，這特別有用。你可以去通過部署具有的WebPack Web應用程序，以獲取有關的WebPack起來和運行。
除了以上工具，還有Sass、React等，根據企業所用工具的不同，你需要掌握的工具也不一樣。
⑷ web前端開發工具排名是什麼
編輯器: sublime, webstorm, atom, vim等
調試工具: 瀏覽器自帶的devtools，移動端頁面遠程調試等
構建工具: gulp, grunt, webpack
包管理工具: bower
遠程伺服器工具: filezilla/shell
工具主要作用就是幫工程師減少工作量，自動化處理，如壓縮css, 合並js/css, 上傳cdn, 圖片優化, 管理jquery等三方庫
前端入門操作都是非常簡單
1、學習css，這個css沒有包含css3，通常我們看到對於web前端工程師要求是要會使用css+div或css+html對界面進行布局，因此 css是輔助html來展示以及布局的，稱之為css樣式。上面說的css+div中的div就是html主要用在布局上的，div是核心要掌握的東 西。
而且css是一定需要配合div進行使用，所以學css要熟悉掌握position、height、float、width，並對於界面的最大最小、能 使用百分百、margin、overflow、padding等。這些關繫到布局樣式的一定要能夠熟練掌握，實在不明白可以到杭州有碼互聯咨詢 下，有碼講師都是有超過三年以上的項目經歷。
2、html是web前端開發工具中最為基礎和最簡單的，在html中要掌握的有form table、span、p、div、ul li 、font這各類標簽。 尤其是table和div，table雖然也能布局使用，但是不方便，通常是用table和數據打交道的。而div是用來布局。
3、學習web前端開發的話要是能夠會些java、php等後台語言更是加分了。因為web前端的界面數據都是在後台那過來的，要是會後 台語言的話，就更節約時間，不僅知道如何於後台交互數據是最好的，也知道怎麼寫前端的代碼會更加規范。就不會出現寫法和後 端的數據不匹配，要重現編寫的尷尬現象了。
4、掌握js，也許前面提到的大家都覺得還可以。但一說到js就暈了吧？事實上js的入門非常的簡單，只要能夠會根據某個name、 或id拿到網頁的樣式、值和dom。以及會給某些name或id的元素標簽賦值、追html、追加數據，在按照邏輯推斷。至於效果無疑就 是彈框、跳轉、隱藏等。再把這些結合到其他的，代碼其實就一點也不不會難了。學會了基礎的js之後，其他的方面結合學習資料 多看多用基本上是沒問題的。
5、學習jquery.jquery是把js封裝了一套的一個js插件。最終就是希望代碼簡化、操作更方便。jquery入門也不難，它需要學的和 js一樣，不同的是換成了jq的代碼。其他結合別的學習資料就可以了。
6、最後是學習css3+html5了，這個目前是最流行的了，如果是搞後端的話，在工作裡面也不怎麼會用到，一般是在網站中出現問 題了，那就需要用到css3+html5去修改一下。
⑸ 前端開發常用哪些工具軟體
前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：
1、WebStorm
幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。
2、IntelliJ idea
頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。
2、HBuilderX
HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。
⑹ 現在比較好用的前端開發工具有哪些啊
1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。