零散工具集合（持續更新）

歡迎訪問 幸福拾荒者，一個前端知識總結分享平臺，與你們一塊兒共同成長共同進步！🙏🙏🙏

網站主題

colordrop :在線顏色組合調試工具

ColorDrop 是一個提供設計開發上絕佳的色彩的來源站點，幫助設計師在線調試顏色組合，該網站把四個不一樣的顏色整合在一塊兒，點擊其中一個顏色後會跳出對應的顏色參數(HEX/RGB)，設計師能夠將這些顏色應用於設計項目。

git 倉庫

gogs :一個能夠搭建本身的私人代碼倉庫

命名

codelf：變量命名神器 有一種痛 😖😖😖，不是程序員可能不懂，但若是是程序員必定懂，那就是給變量或函數命名。

html 頭部標籤

HEAD ：html 頭部 標籤 🏷️ 指南 🧭

網站字體

• fontke ：中文字體下載
• igfonts ：字體轉成花樣文字表情 😊
• fontke ：中文字體轉換成網站字體下載
• 字蛛 ：字蛛 🕷️ 是一箇中文字體壓縮器

icon

• easyicon： 一個圖標搜索 🔍 下載 ⏬ 網
• cssicon： 一個 css 實現圖標樣式
• iconfont ：阿里巴巴矢量圖標庫
• 尋圖標 :最多樣化的圖標庫

佔位圖

imageholder ： 生產佔位圖片

圖片優化

• tinypng 一個壓縮 🗜️PNG 的神站 🐼
• zhitu：智圖爲圖片智能選擇合適的圖片格式壓縮 🗜️,

markdown 文檔

• 羽雀 ：語雀- 專業的 ☁️ 雲端知識庫 優雅高效的在線文檔編輯與協同 🔧 工具,
• gitbook：For you, your users and your team
• vuepress：Vue-powered Static Site Generator
• docsify 神奇的文檔網站生成器
• docz：用 MDX 寫 React UI 組件文檔
• storybook： Build bulletproof UI components faster
• apidocjs：apidoc 是一個輕量級的在線 REST 接口文檔生成系統，能夠根據其特定的規則的代碼註釋來生成靜態網頁

editor

• 百度 editor 所見即所得富文本 web 編輯器,
• 經典的 ckeditor Smart WYSIWYG editor components with collaborative editing. Join Microsoft, Mozilla, Adobe and 24k+ other happy customers.
• 經典的 kindeditor html 編輯器 在線編輯器 可視化編輯器
• wysiwyg 爲 Bootstrap 定製的微型所見即所得富文本編輯器
• tower 用的編輯器 一個基於瀏覽器所見即所得的文本編輯器
• summernote 是一個界面比較簡潔美觀的富文本編輯器
• XEditor 是一個基於 jQuery 開發的簡單迷你而且高效的在線可視化 HTML 編輯器
• wangEditor 輕量級 web 富文本編輯器

css

• css-tricks 專一 css
• css-doodle 是一個用來繪製 CSS 圖案的 WEB 組
• tools 在線 css3 動畫製做
• CSS-Inspiration CSS 靈感，展現不一樣 CSS 屬性或者不一樣的課題使用 CSS 來解決的各類方法
• magicCss 一款獨特的 CSS3 動畫特效包
• spritejs 一款簡單的 canvas 繪圖框架
• matrix ：css3 動畫轉換

動畫庫

• popmotion 小巧，靈活的 JavaScript 運動 🏊‍♀️ 引擎
• animate animate.css 是來自 dropbox 的工程師 Daniel Eden 開發的一款 CSS3 的動畫效果小類庫
• Hover.css Hover.css 是一套使用 CSS3 動畫實現的 Hover 特效集錦
• bouncejs Bounce.js 是一個用來生成不錯的 CSS3 驅動關鍵幀動畫的工具
• Effeckt 針對不一樣 UI 的 CSS3 動畫和過渡效果集，包含了豐富的 CSS3 動畫和過渡效果

js

• jsdm 是一個 WEB 前端在線編輯器，可同時編輯 HTML、CSS、JAVASCRIPT 代碼，並即時預覽！
• jsbin WEB 前端在線編輯器
• codepen 一個在線的前端代碼編輯運行的網站
• obfuscator 前端代碼混淆工具

XSS

XSS 根據白名單過濾 HTML(防止 XSS 攻擊)

二維碼生成

• 草料二維碼 草料二維碼生成器

PDF

• PDF24 Tools 免費且易於使用的在線 PDF 工具
• pdfmake Client/server side PDF printing in pure JavaScript
• smallpdf支持 PDF 轉 Word、PDF 轉圖片、PDF 轉 Excel、PDF 轉 PPT、PDF 拆分、PDF 合併以及 PDF 合併等服務

拼音

• pinyin 轉換中文字符爲拼音的工具轉換中文字符爲拼音
• 簡繁轉換 開源的簡繁轉換庫

身份證

身份證 身份證驗證的庫

格式時間金錢

numeraljs 一個用於格式化和數字金錢 💰 的 js 庫

網頁導覽

smartour Smartour 讓網頁導覽變得更簡單

正則

• 正則 //正則大全
• regular
• 正則測試 正則表達式的測試平臺

http2

http2 ：http2 demo 演示

ip

iplist 獲取本地 IP 信息

gif

cockos GIF 截圖工具

管理前端 package

lerna：一款 js 代碼庫管理軟件， 用來對一系列相互耦合比較大、又相互獨立的 js git 庫進行管理

移動端開發調試

• Eruda：移動端 js 調試工具 🔧
• vConsole移動端調試神器 🔧

前端性能監控

• webfunny 經過向 html 頁面中插入一段簡單的 JS 探針代碼，實現無埋點監控前端頁面的用戶行爲，包括但不限於 PV/UV、報錯日誌、請求日誌、靜態資源加載狀況、用戶點擊行爲以及截圖信息等等，目的在於幫助前端開發提升解決線上問題的效率
• fundebug 一行代碼搞定 BUG 監控
• sentry 是一個集中式日誌管理系統
• 性能魔方 爲您的網站服務器提供完整雲應用性能管理(APM)、網站服務器優化、監測、監控,能幫助您最大程度改進用戶體驗
• pagespeed 網頁性能測試分析工具

測試覆蓋率集成

codecov ：測試覆蓋率構建 📦 自動化測試環境

搜索庫

• microjs：迷你前端開發框架和類庫資源收集
• javascripting 最好的資源 javascript 庫、框架和插件

github

• github ：github 官方幫助文檔查詢
• w3cschool ：GitHub 官方幫助文檔中文版

歡迎訪問 幸福拾荒者 瞭解更多前端知識！