Engineering

Building Inspectro

The architecture behind a runtime inspector for frontend developers, the problems we hit building it, and what we got wrong on the way.

raw feed

Latest10 min read

What Flutter DevTools taught me about web tooling

I spent years inside a debugger that knew what a component was. Then I moved to the web and had to relearn debugging as eight disconnected tools.

  • Origin
  • DevTools
  • Flutter
Read the article
Chrome DevToolswhat the browser knowsNo names. Nothing to search for.Your sourcewhat you actually wroteNamed — but not running.Inspectro · Inspectorthe two, connectedNamed, running, mapped to source.<div><div class="css-1x3kf9p"><div class="css-9ka2bd"><span class="css-b2f01">49.00</span><button aria-label="Add one">+</button></div>// src/cart/LineItem.tsxfunction LineItem({ price, qty }) { return ( <Row> <PriceLabel value={price} /> <QuantityStepper qty={qty} /> </Row> )}ProductPageCartSummaryLineItemPriceLabelQuantityStepperPROPS — editable, liveprice49qty2currency"GBP"SOURCE — one click awaysrc/cart/LineItem.tsx:42the gapBrowser DevTools know the nodes. Your editor knows the components. Neither knows both.Columns 1 and 2 show an example app. Column 3 shows Inspectro's Inspector.