DevScope - 網頁開發診斷工具 作者: POLPROG

DevScope 是一套專業的瀏覽器開發工具，用於按需檢查與診斷目前網頁。
無需在多個分散工具之間切換，即可分析頁面結構、CSS、效能、網路活動、安全標頭、無障礙、SEO、儲存空間、JavaScript 執行階段與已偵測框架。

🧩 DOM 與元素檢查

• 分析 DOM 深度、複雜度、重複 ID、脫離節點、行內樣式與語意結構
• 直接在頁面上選取元素，並使用醒目提示覆蓋層與麵包屑導覽
• 查看常見結構反模式的可執行改善建議

🎨 CSS 檢查與即時編輯

• 查看計算樣式、盒模型以及實際生效的屬性
• 偵測 specificity 衝突與潛在版面問題
• 即時編輯樣式、立即查看變更並重設單一屬性

⚡ 效能與 CORE WEB VITALS

• 查看 Core Web Vitals、繪製時間、資源時間與長任務
• 分析 JavaScript 執行訊號以及不同類型資源的使用情況
• 識別載入緩慢的資源與可能的效能瓶頸

🌐 網路、儲存與執行階段

• 依類型與狀態整理網路請求並檢查時間細節
• 查看 LocalStorage、SessionStorage、Cookie、IndexedDB 與 Cache API
• 檢查執行階段錯誤、主控台訊息、事件監聽器、計時器與腳本活動

🔐 安全性與無障礙

• 檢查 HTTPS、混合內容、CSP、HSTS、Permissions-Policy 與 X-Frame-Options
• 執行面向 WCAG 的 ARIA、對比度、landmark、標籤與替代文字檢查
• 使用清楚的結果與建議決定修正優先順序

🔎 SEO 與框架偵測

• 檢查 meta 標籤、Open Graph、canonical URL、結構化資料、標題層級與可索引性
• 偵測 React、Vue、Angular、Svelte、jQuery、Next.js、Nuxt.js、Tailwind CSS、Bootstrap 等
• 查看可用版本資訊與可能已過時的相依套件

🏥 網站健康報告

• 產生依 P0、P1 與 P2 分組的優先級結果
• 使用 0 到 100 的 DX Score 快速了解技術健康度
• 在一份報告中查看穩定性、網路、效能與 DOM 品質

📊 匯出與比較

• 將報告匯出為 JSON、CSV 或 Markdown
• 建立快照並比較結果以發現回歸問題
• 匯出個別模組以進行有針對性的分析

🛠 面向真實除錯工作

可將面板停駐在右側或底部，也可使用浮動模式、調整大小，並透過 Ctrl+Shift+D 快速切換。

Shadow DOM 隔離有助於降低對被檢查頁面的影響。支援淺色與深色主題、系統同步以及 15 種語言介面。

🔒 隱私優先

擴充功能不會收集個人資料、追蹤瀏覽活動、使用分析或 telemetry，也不會連接外部伺服器。

所有頁面分析都在裝置本機完成。偏好設定保存在瀏覽器中並留在本機。

🏢 關於作者

DevScope 由 POLPROG 開發，這是一家波蘭科技公司，專注於開發重視隱私的瀏覽器擴充功能、Web 應用程式與行動應用程式。

網站: https://polprog.pl/
DevScope 產品頁面: 查看產品頁面
Chrome 版本: 在 Chrome Web Store 中查看