Frontend intelligence platform
DevLens
DevLens is a frontend performance platform: website audits, AI analysis, dependency/latency design, offline code lints, bundle analysis, memory profiling, and a GitHub pipeline — built as a Next.js + npm-workspace monorepo with a Pulse/Studio persona toggle and a shift-left CLI.
It’s bring-your-own-key (BYOK) and runs almost entirely in your browser: audits use Google PageSpeed, AI features use Gemini, dependency scans use OSV.dev, and the pipeline uses GitHub — all called directly from the browser with your keys, which never touch our servers. A few capabilities (live heap capture, the runtime scan, the bundlephobia and source-map endpoints) run in small serverless functions. Every report exports to agent-ready Markdown and is saved to local history.
Pulse · Studio · one toggle
Two workspaces
One app, one origin, two surfaces — switch with the header toggle (your choice persists). Same keys and history; no second login.
Pulse — for product/QA: a clean macro view. Plain-language audit (rings + Core Web Vitals), a bundle Budget Scorecard, automated-run history. Engineering tools are hidden.
Studio — for engineers: the full cockpit. Lighthouse + AI + Runtime + Security + CSS + Architecture insights, Architecture, System Design, Code Review, Memory, and the GitHub Pipeline.
Bring your own key
Keys you’ll need
Google PageSpeed — website audits. Enable the PageSpeed Insights API (and, for field data, the Chrome UX Report API) on the key’s project.
Gemini — AI analysis, Architecture, System Design, Code Review, and the memory explanation.
GitHub token (optional) — the Pipeline (read-only: repos + PRs).
Add them in Settings. No key? The Audit page offers one-click sample audits.
What each does · how to use it
Pages & sections
- Dashboard
A read-only observatory that rolls up everything you've run — KPIs, trends, and recent activity. It doesn't run audits itself.
How Generate reports from any tool; the dashboard fills with KPIs (reports saved, audits run, latest performance + delta, Gemini tokens), engine status, Lighthouse/Core-Web-Vitals trend charts per URL, a reports-by-type breakdown, and a recent-activity feed.
KPI rowEngine statusLighthouse & CWV trendsReports by typeRecent activity - Audit
Run a Google PageSpeed/Lighthouse audit of any public URL and dig into it three ways via tabs.
How Enter a URL and Run. Lighthouse tab shows scores, Core Web Vitals, opportunities, render-blocking/JS cost, and CrUX real-user field data. AI Analysis turns the report into structured fix-it cards (Gemini). Runtime runs headless Chrome for accessibility violations + exact unused JS/CSS coverage. Security grades HTTP headers via Mozilla Observatory. CSS reports stylesheet complexity. No key? Use the one-click sample audits.
Lighthouse (scores, CWV, opportunities, render-blocking, CrUX field data)AI Analysis (Gemini fix cards)Runtime (axe-core a11y + DevTools coverage)Security (Mozilla Observatory header grade)CSS (complexity / specificity / !important) - Bundle Analyzer
Inspect a build, audit dependencies, and resolve source maps — in three tabs.
How Bundle: upload a webpack stats.json (parsed in-browser) for totals, vendor/app split, async chunks, duplicate packages, and the largest assets/modules. Dependencies: paste package.json to scan against OSV.dev for vulnerabilities, see lighter-alternative hints, and look up any package's size (bundlephobia). Source Map: upload a .map + a minified line:column to get the original position.
Bundle (stats.json analysis)Dependencies (OSV vulns + alternatives + size)Source Map (minified → original) - Memory Snapshot
Find memory leaks and heavy retainers from a Chrome heap snapshot.
How Capture a live snapshot of any URL (headless Chrome, server-side), upload a .heapsnapshot exported from DevTools → Memory, or generate a local Puppeteer capture script. Get detached DOM nodes, heaviest types/constructors, duplicate strings, leak findings — plus an optional Gemini plain-English explanation.
Capture (live / upload / script)Overview + findingsHeaviest types & constructorsAI explanation - Architecture
Map a feature's module dependencies to surface bundle weight and lazy-loading gaps (Studio).
How Describe the feature and Generate. Interactive React Flow graph plus requirements, state, API layer, hooks, types, testing, and performance notes — framed around dependency weight and code-splitting.
- System Design
Map data-fetching boundaries and caching to cut network latency off the main thread (Studio).
How Describe the system and Generate. Mermaid diagram, then architecture + data flow and strategy areas (routing, caching/SWR, prefetching, pagination, error boundaries, lazy loading) + tradeoffs.
- Code Review
Catch render-loop and reconciliation issues before they ship — offline first, AI second (Studio).
How Paste files. Instant offline oxc-Wasm lints (index-as-key, missing keys, inline prop refs, hook deps) run in a worker before any AI call. Then optionally Review with Gemini for a scored rewrite + inline/side-by-side diff.
- GitHub Pipeline
Connect a repo, see open PRs, and generate the DevLens snapshot workflow that feeds your dashboard.
How Add a GitHub token in Settings, pick a repository, then generate a ready-to-commit .github/workflows/devlens-snapshot.yml. It runs the DevLens CLI in CI (analyze, plus run for any URLs you add) and commits .devlens/history back — the dashboard reads that folder over the GitHub API. No DevLens server.
- Reports
Local history of every report you've generated, across all tools.
How Each generated report auto-saves here (kept ~100, newest first). Filter by type, search, preview the Markdown, copy/download it, or delete. Audit entries can be re-opened or re-run.
- Settings
Your bring-your-own-key configuration and local-data controls.
How Paste your Google PageSpeed key, Gemini key, and (optional) GitHub token — stored only in this browser. See AI token usage, and reset all local data (keys are kept).
Shift-left · monorepo package
@devlens/cli
DevLens is a monorepo: a shared @devlens/core engine + zod @devlens/schema power both the web app and a portable CLI. Run it in CI or pre-commit hooks — keys come from env, never bundled.
devlens run <url> — headless audit (coverage + a11y + heap) → .devlens/history/run_*.json.
devlens gate <file…> — the same oxc perf rules as Code Review; non-zero exit on errors.
devlens assert <stats.json> --budget <KB> — initial-JS budget gate.
devlens analyze --dir <dir> — project AST scan for thread-offload + code-splitting opportunities → Studio’s Architecture tab reads the output.
Programmatic
Serverless endpoints
POST /api/sourcemap — resolve a minified position: body { map, line, column } → original source/line/column/name (+ snippet).
POST /api/audit-runner — headless-Chrome a11y + coverage for { url } (SSRF-guarded).
POST /api/heap-capture — heap snapshot analysis for { url }.
GET /api/bundlephobia?package=name@version — cached package size.
POST /api/css-analyze — CSS complexity for { url } (server-fetched stylesheets).
POST /api/observatory — Mozilla Observatory security grade for { url }.
Open on GitHub