DevTools Logo

AI Code Explainer

AI Code Explainer

Cloud AI first with on-device WebLLM fallback

Code

Light syntax

Examples

Closure wrapper

Input
const once = (fn) => { let done = false; return (...a) => (done ? undefined : ((done = true), fn(...a))) }

A closure over mutable state — ask what the second call returns to test the explanation.

Effect with cleanup

Input
useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id) }, [])

React subscription/cleanup pairing; verify the model explains the empty dependency array.

Generator

Input
export function* range(n) { for (let i = 0; i < n; i++) yield i }

Lazy iteration — a good probe for whether the model explains yield vs return.

About this tool

Concise cloud AI explanations for functions and small classes. Source identifiers in the result are checked against the submitted code.

How to use

  1. Paste a snippet

    One function or a small class works best; the model's context is small.

  2. Review cloud processing

    Code is sent to the DevTools server and a selected cloud AI provider; remove secrets before generating.

  3. Generate

    Get a plain-English summary plus notes on return values and side effects.

  4. Verify

    Check the explanation against the source — small models misread tricky branches.

Use cases

Onboarding to unfamiliar code

Get a first read on a helper before tracing it by hand.

Reviewing PR snippets

Summarize what a pasted hunk does while reviewing a larger diff.

Learning idioms

Generators, closures and recursion explained in plain English.

Common mistakes

Mistake:Pasting whole files.

Fix:The model only sees a small window — paste the single function or class you care about.

Mistake:Assuming it knows your imports.

Fix:It cannot resolve project types; include signatures or types in the snippet.

Mistake:Treating the explanation as documentation.

Fix:Verify behavior with a test — the model can describe plausible but wrong control flow.

Frequently asked questions

References & standards