Archify icon

Archify

Archify 是 Chrome 瀏覽器擴充功能,可從即時網頁揭示元件、API、函式庫與其他執行時訊號。專為前端工程師、QA 工程師與技術創辦人設計,無需離開瀏覽器即可了解應用運作。

Archify

總覽

Archify 是一個瀏覽器擴充功能,用來從外部理解網頁應用是如何組成的。它不著重於原始碼,而是檢視即時頁面,直接在瀏覽器中揭示元件、API、函式庫、主機線索與其他執行時訊號。

這個產品的目標對象是需要快速追蹤行為、且不想離開當前檢視頁面的開發者。它強調本機分析、以證據為基礎的判讀,以及保守輸出:當某個細節無法驗證時,Archify 會顯示 unknown,而不是捏造結果。

Archify 的功能

元素層級與整頁檢查

將滑鼠停在元素上,或點擊工具列圖示來檢查整個頁面。Archify 會辨識技術堆疊、主機、追蹤器與附近的腳本,再將它們對應回所選元素。

本機執行時分析

產品會讀取執行時訊號,例如框架內部、網路呼叫、DOM 與表單欄位監聽器。頁面說明這一切都在瀏覽器本機完成。

附有信心分數的結果

偵測到的項目會搭配信心分數與證據顯示。當 Archify 無法驗證某項內容時,會顯示 unknown,而不是猜測。

廣泛的技術偵測

首頁列出的偵測涵蓋範圍包括框架與執行環境、UI 函式庫與樣式系統、分析與像素、電商平台、CMS、代管供應商、驗證工具與防護機制。

敏感欄位可視性

Archify 可揭示哪些內容會接觸敏感欄位,包括哪些第三方腳本會監聽表單與付款輸入,以及涉及哪些外送網域。

請求與狀態追蹤

工作流程強調將可見的 UI 動作追溯到其影響的元件、API 呼叫、儲存項目與路由。

Archify 的常見用法

  • 除錯前端問題

    將 UI 症狀追溯回可能造成問題的元件、API 呼叫,以及儲存或路由變更。當可見的錯誤無法直接指出來源時,這特別有用。

  • 審視客戶端暴露面

    檢查結帳、登入或表單流程,看看哪些腳本會監聽敏感欄位,以及涉及哪些外送網域或第三方服務。

  • 研究外部應用程式

    在不開啟程式碼庫的情況下,查看公開網站看起來使用了哪些技術堆疊、代管、分析工具與 UI 框架。這有助於競品研究與技術盡職調查。

  • 為 QA 報告補充技術細節

    將元件、請求與狀態脈絡附加到錯誤報告中,讓 QA 提供比單一截圖更具可行性的說明。

  • 快速取得架構概覽

    當你想快速了解一個應用,而不想切換到 source maps、多個 DevTools 面板或其他稽核工具時,可以直接把瀏覽器本身當作檢視介面。

Pros and Cons

Pros

  • 在瀏覽器中本機執行,不需要帳號。
  • 表層檢查設計得很快:將滑鼠停在元素上,或使用工具列圖示即可檢查頁面。
  • 可同時顯示應用的多層資訊,包括元件、API、儲存、路由與附近腳本。
  • 附上信心分數與證據,因此結果不是以猜測方式呈現。
  • 涵蓋廣泛的網頁技術,包括框架、UI 函式庫、分析工具、電商平台、CMS、代管、驗證與防護機制。

Cons

  • 網站說明只有在開發版本中才能取得精確的元件名稱;壓縮過的正式版程式碼可能只能得到元件類型與信心分數。
  • 它無法在瀏覽器內建頁面上執行,例如 chrome:// 或擴充功能商店。
  • 首頁將其定位為 DevTools 的補充,而不是完整替代品。

FAQ

Archify 是免費的嗎?

是。首頁說明 Archify 為免費且開源,採用 Apache-2.0 授權,不需要帳號、付費牆或試用。

資料會離開瀏覽器嗎?

不是。產品說明分析會在瀏覽器本機執行,不會經過伺服器、遙測或分析,且不會儲存或傳輸頁面內容。

它可以偵測哪些框架與元件?

它可偵測 React、Next.js、Vue、Angular 與 Svelte 等框架,以及許多其他技術。若要取得精確的元件名稱,網站註明開發版本提供最多細節;而壓縮過的正式版程式碼可能只會顯示元件類型加上信心分數,而不是捏造名稱。

它能在任何網站上使用嗎?

它適用於你選擇檢查的任何網頁,但因瀏覽器政策限制,無法在瀏覽器內建頁面(例如 chrome:// 頁面或擴充功能商店)上執行。

它可以取代 DevTools 嗎?

不能。網站說明 Archify 顯示的是架構與執行時關係,而 DevTools 顯示的是實作;兩者被定位為互補,而非可互換。

Quick Facts

分類
開發者工具
產品類型
瀏覽器擴充功能
平台
Chrome
主要使用者
前端工程師、QA 工程師、技術創辦人
來源網域
archify.salahxd.dev
價格
依 Apache-2.0 授權的免費開源