在研究或探索其他網路產品時，當看到一些好的設計時，我總是很好奇他背後實作的技術、或是使用了什麼我沒看過的第三方服務。
過去我們可能會在網站上點右鍵、打開開發者工具、瀏覽 HTML code 和研究 header 裡面藏了些什麼東西，對於沒有技術背景的人來說實在是很讓人頭痛。在這邊就分享一些每個人都能輕鬆上手的網路技術分析工具、以及幾種實用的使用情境！
這篇文章分三個部分：
1. 網站分析工具們的介紹
2. 給不同職能、角色的使用情境
3. 介紹各種網站技術與名詞解釋
有圖有連結有排版好讀版請見 medium：
http://a0.pise.pw/QAJGQ
▍網站分析工具介紹
我最常使用的網站分析工具是 Wappalyzer，他提供 Chrome、Firefox 瀏覽器插件，當使用者在瀏覽特定網站時，這個插件會透過偵測網站的 HTML、scripts、cookies、headers 來了解該網站背後使用的技術與工具，在瀏覽器上點選這個插件就可以得到如下圖的簡要分析結果。
也因為如此，非網頁架構的軟體、非瀏覽器運作的手機應用程式（App）就不在此工具服務的範疇之內。
這邊的技術或工具不只有程式語言、框架等等，包含行銷團隊常用的數據分析工具、內容管理系統（CMS）、電子商務或購物車工具都會一次呈現出來。
除了一目瞭然看到所有背後的技術與工具外，點選特定的分類（例如：Web frameworks）會帶你回網站並列出這個分類下常用的技術、工具，按照市場份額（marketshare）來排序；點選技術或工具本身（例如：Ruby on Raills）會帶你回到網站並列出使用這個技術或工具的前 10 大流量的網站。
不過這個流量是根據追蹤插件的流量來計算的，所以不完全準確，而這也是他用「比例」來顯示的原因，它所提供的僅是一個相對數據，僅供參考。
這類型的服務不只有 Wappalyzer 有提供，我使用它是因為它是我第一個接觸的這類工具，長久以來習慣了也喜歡它的介面和體驗。
其他類似工具包含：功能與介面都很全面的 SimilarTech、一樣用插件提供服務的 WhatRuns、介面看起來非常陽春老牌的 BuiltWith 與 W3Techs、反其道而行著重從技術找網站的 snov — techcheck 等工具。
以 SimilarTech 來說，查詢特定網站背後的技術時，甚至可以看到最近網站的變更，雖然我是覺得研究網站或競爭品牌是不用這麼像跟蹤狂啦…
如果看完這篇文章覺得這類型的工具對你有幫助，不妨去試試看以上幾種類型找出最適合你的吧！
▍使用情境
以下常見的場景可以運用這個工具來提昇我們的工作品質。
身為產品團隊的一員
任何會去研究其他網路產品的團隊成員都能透過這個工具看見更深入一層的資訊。請注意，產品的官方網站 Landing Page 和實際產品 Core Product 的內涵很多時候是大不相同的，點進部落格、FAQ 頁面也有機會發現截然不同的面貌。
產品經理可以用它來了解特定網站背後的寫法、串接的第三方工具來進行競品分析，或單純為自己的產品找尋靈感。技術與開發團隊在實作新產品前，也可以參考其他類似產品使用的語言與架構。
其他需要跟主產品串接、或會為自己團隊需要而題需求的團隊夥伴也能用上，例如行銷人員可以用它來發現一些其他網站使用的行銷工具、內容管理系統（CMS）；客服人員也可以研究其他網站使用的用戶溝通工具，或是一些能夠增加客戶信任感的串接元件。
在這個網路產品從四面八方橫空出世的年代，並不是產品中的每一個零件都一定得自己寫，把全身上下家當都放在自家 server 的時代已經過去了，可以好好參考其他網站是如何利用第三方工具來解決問題，並聰明地將內部資源運用在提升核心功能與優勢的品質上，專業的東西就讓專業的來。
如果是尋找更偏行銷、客戶服務的第三方工具，或是單純想逛逛找些靈感，我也很推薦 SimilarTech — Web Technologies 的頁面。
身為商業團隊的一員
這裡的商業團隊指的是要在外打江山、開拓新客戶的部門。
如果你本身就是一個被列在這些分析網站上的「技術/工具」之一，以電子商務的開店平台為例，在 Ecommerce 分類中就可以很輕易地看到所有場上的競爭品牌，馬上就可以看看自己過去的競品分析與市場分析是否有遺漏任何的重要玩家。
而在點進每個工具後，可以看到目前在使用它的前十大網站。
這十個網站對你來說可能不是什麼大新聞，但厲害的是它可以讓你得到有使用這個工具的大名單。當然，名單是從這個瀏覽器插件有偵測到的為準，所以還是很難一網打盡所有的網站。
點選「Get the full dataset」後，你會被帶到一個需求頁面，可以找到使用特定工具/技術的網站（也就是你的潛在客戶啦），甚至還可以用一些簡單的 Filters 來篩選出更精確的網站名單，包含網站使用的語言、國家（用 TLD 判斷）、想要篩選出的名單數量。名單的內容也非常簡單，就是網站連結、網站語言（如果它有偵測到）、被 Wapplizer 偵測到的網站瀏覽次數。
阿你可能會想說為什麼要篩選？當然是因為這個服務要錢啦＄＄＄費用是按照名單數量來計算的，看看這精美的價格，Shopify 全部共 225,666 筆名單要價 410 美元，如果只要前 200 筆資料的話費用是 70 美元，所以各位想要挖角競爭品牌客戶名單的團隊們可以徵酌一下啦！
身為求職者
如果你是擅長特定程式語言、框架、工具的軟體工程師，在求職的前可以先看看想要應徵的網站使用的程式語言或框架，或是在最一開始用上述的方式撈出一批值得投遞履歷的公司名單。
如果你是產品經理，在面試新工作的時候除了徹底研究該產品的市場、使用情境、功能、商業模式等等，稍微了解背後的架構也可能會帶來出其不意地發現。
身為團隊招募者
從另一個角度來看，若是很積極的在招募擅長特定程式語言的工程師的招募團隊，也可以去撈目前有在使用這些語言的產品團隊名單，然後直接去 LinkedIn 上搜尋這些公司的工程師並試圖挖角到自己的團隊內部。
這裡也想提提作為創業者或是開發新產品的團隊，選擇語言或框架的時候，除了語言本身能不能快速且有效的打造產品來作為選擇的判斷依據外，未來能不能招募到擅長使用該語言的工程師也很重要。
身為網路產業新手
而如果你是還沒打定主意要深耕哪一種程式語言的軟體工程師，也許這些分析網站上的排名可以給你一些想法，或是先偷偷去看看你鍾意的產品團隊在用哪種語言開發。當然每個時代的潮流都會變、語言與工具會推陳出新、在不同國家與產業也會有非常大的差異，我在這邊就不加入論戰。
這個工具還有一個很好用的地方，就是能讓新手一窺網路產品背後的架構，可以說是一本百科全書的目錄了。
以上分享～對入門詞彙有興趣的朋友歡迎再到文章內文瀏覽～～～