DevScope - Advanced Dev Tools 제작자: POLPROG

DevScope — Advanced Developer Tools for Real-World Debugging

DevScope is a professional browser extension for developers and technical teams who want fast, structured insight into any webpage — without switching tools, digging through scattered panels, or losing context.

It turns what you see in the browser into actionable diagnostics: structure, performance signals, network behavior, security headers, accessibility checks, and SEO structure — all presented in a clean, dockable panel you can resize and use while you work.

No tracking. No telemetry. 100% local.

🛠 Designed for Professionals

DevScope is built for:

• Frontend developers debugging complex UI and layout issues
• QA engineers validating pages quickly and consistently
• Performance-focused teams investigating slow interactions
• Security-minded reviews (headers, HTTPS, CSP)
• Accessibility and SEO audits without external tools
• Tech leads reviewing production pages and prioritizing fixes

⚡ Key Highlights

• 16+ analysis modules in a single extension
• Site Health Report with priority levels (P0 / P1 / P2)
• DX Score (0–100) for quick technical health assessment
• Dockable layouts: Right / Bottom, plus Floating modes
• Resizable interface with developer-friendly ergonomics
• Live inspection + real-time layout & style editing
• Network request details + endpoint replay (with editable parameters)
• Export reports in JSON / CSV / Markdown
• Snapshot & comparison workflow for regressions
• 16 supported languages
• Dark / Light themes (+ system sync where enabled)
• Keyboard shortcut: Ctrl+Shift+D
• Shadow DOM isolation — minimal interference with inspected pages
• Runs entirely offline — no data leaves your device

🔍 Core Modules

🧩 DOM Analyzer

• Deep DOM tree analysis
• DOM depth & complexity metrics
• Duplicate ID detection
• Orphaned / detached nodes
• Inline style detection
• Semantic structure checks
• Anti-pattern detection with actionable hints

🎨 CSS Inspector

• Computed styles (what actually applies)
• Specificity conflict detection
• Layout diagnostics + box model insights
• Unused rule detection (heuristic)
• Live editing support for rapid iteration

🖱 Inspect Mode (Live Editing)

• Click-to-select elements
• Breadcrumb navigation
• Clear highlight overlay (margin/padding visualization)
• Live layout & style editing with instant updates

⚡ Performance Profiler

• Core Web Vitals overview
• Paint & render timing signals
• Resource timing breakdown
• Long task detection
• JavaScript execution metrics

🌐 Network Overview

• Requests grouped by type + status (2xx / 4xx / 5xx)
• Timing analysis & domain mapping
• Endpoint inspection (headers / payload / response)
• Request replay with editable parameters

🔐 Security Scanner

• HTTPS validation
• Security header audit
• CSP inspection
• Mixed content detection

♿ Accessibility Audit

• WCAG checks
• ARIA validation
• Contrast and landmark structure review

🔎 SEO Analyzer

• Meta + Open Graph validation
• Structured data detection
• H1–H6 hierarchy analysis
• Indexability checks

🗂 Storage Inspector

• LocalStorage / SessionStorage / Cookies
• IndexedDB / Cache API
• One-click clear actions

🐛 Error Tracker

• Runtime errors
• Console warnings/messages
• Unhandled promise rejections

🧮 JS Runtime Monitor

• Script/runtime insights
• Memory usage signals (where available)
• Event listener enumeration

📦 Bundle Analysis

• Script / CSS / image sizes
• Duplicate detection

🧠 Framework & Dependency Detection

• React, Vue, Angular, Svelte & 50+ libraries
• Version detection
• Outdated dependency alerts

🏷 Heading Analysis

• H1–H6 hierarchy validation
• Missing / duplicate heading detection

✅ HTML Quality

• Semantic checks
• Deprecated tag detection
• Empty container warnings
• Best practices validation

📊 Advanced Insights

🏥 Site Health Report

Automatic prioritized diagnostics:

• P0 — Critical issues
• P1 — Important improvements
• P2 — Optimization opportunities

📈 DX Score (0–100)

A unified technical score based on:

• Console errors & stability signals
• Network failures and slow endpoints
• Performance metrics and long tasks
• DOM complexity and structural quality

🔒 Privacy First

DevScope works entirely offline.

• No analytics
• No telemetry
• No tracking
• No external servers
• No data collection

All analysis is performed locally in your browser. Your data never leaves your machine.