Web Development Tools

Dev Tools

• MDN Docs (Web 開發教科書)
  • 由 Mozilla (Firefox的團隊) 主導維護的 Web 開發的權威教科書 + 參考字典
  • 語言與標準文件
    提供 HTML、CSS、JavaScript、Web API (像是 DOM、Fetch、Canvas…等) 的官方參考與詳細解說
  • 語法說明
    功能介紹與用途、語法範例參數與回傳值說明、瀏覽器支援資訊、實際示例與範例程式、......
  • 教學文章與指南
    JavaScript 基礎語法、CSS 版型技巧、Web 性能優化、API 標準、......
• Can I use ...? (前端技術瀏覽器兼容性查詢工具)
  • 在搜尋框輸入像是 CSS 屬性、HTML5 元素、JavaScript API 名稱等，網站會告訴你哪些瀏覽器版本支援這個功能、哪些不支援、哪些只有部分支援
    可以用顏色 (綠色＝支援、紅色＝不支援、黃色＝部分支援) 來幫助判斷
  • 跨瀏覽器／跨裝置對比
    支援桌面和行動瀏覽器 (Chrome、Firefox、Safari、Edge 等) 不同版本的比較，方便評估在實際用戶端的相容性
  • 可以看到各個瀏覽器的市場佔比 (例如某功能在支援它的瀏覽器中使用率有多少)

Test Tools

• Wappalyzer (瀏覽器外掛，根據特徵推測網站資訊)
  • 前端框架 (React、Vue、Angular…)
  • 後端技術 (Django、Ruby on Rails、Laravel…)
  • 分析 Server、CDN、Analytics、支付工具
  • 判斷 CMS (WordPress、Shopify…)
  • 使用的 JavaScript library