如何輕快速地得知網站的組成架構呢 ?

身為IT人,瀏覽網頁的時候不免俗會想知道正在瀏覽的網頁是用什麼技術打造而成的,例如說伺服器是用Nginx、前端框架用Vue.js、資料庫使用MySQL、程式語言使用PHP等等的資訊。得知這些資訊可以讓我們進一步對網站的架構更清楚外,也透過觀察的過程中得知現代網站的趨勢,迅速地提升自身的實力。
以下教學將推薦兩款作者常使用的使用,都是免費的且操作簡單好上手 !
feature image 3

1. Wappalyzer

Wappalyzer是一款可安裝於chrome的擴充套件,可再chrome線上應用程式商店安裝,完成後,可在chrome右上方的擴充功能找到它,如下圖

wappalyzer chrome擴充套件位置

Wappalyzer使用方法

在目標網站的頁面點Wappalyzer的擴充套件,即會產出該網站的組成架構,如圖以本網站為例子,本站是由WordPress組起來的,WordPress背後是使用PHP程式語言,因此在Wappalyzer便會顯示出內容管理系統WordPress以及程式語言PHP。當然,下圖只是部份的技術,一個網站可能包含多個不同的技術成分,要視網站而定。

gywangio組成架構

2. builtwith

builtwith是線上的,僅需要將欲查詢的網站網址貼入,它變化幫你分析背後的組成架構,非常的快速,通常作者會跟Wappalyzer搭配使用,以確保資訊完整性 !

builtwith使用方法

將網址貼入下圖紅色框起來的欄位,以本網站為例,再按下右邊的Lookup按鈕即可。

buildwith首頁 1
網站執行完後,跳出以下的畫面便是執行成功,可看到本網站的組成架構,以下僅為部分截圖,一個網站通常不只有這幾種,可能十幾種不同的技術組成。
buildwith結果

結語

Wappalyzer 以及 builtwith 都可以快速地查詢網站組成架構,通常作者會搭配著使用,以確保正確性。Wappalyzer是免費的,builtwith雖然說有付費的版本,不過一般使用者使用面費的版本功能其實就非常足夠了,以上教學希望大家得到幫助 !
divider2 5 scaled