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

Latest14 min read

The line of code that drew this element

A browser will tell you everything about an element except who wrote it. Inspectro 1.0.1 is on the VS Code Marketplace; this is the problem underneath it, and the three runtimes it takes to answer one question.

  • Architecture
  • React
  • Click-to-source
what you clickedthe line that drew it49.00PriceLabelsrc/cart/LineItem.tsx38function LineItem({ price }) {39 return (40 <Row>41 <Thumb src={img} />42 <PriceLabel value={price} />43 </Row>44 )45}resolves tosrc/cart/LineItem.tsx:42

More articles

  • 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.
    10 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