babel-plugin-jsx-source-loc

Adds a data-source-loc prop to every JSX element, so that you can quickly look up where an element was rendered in the React Dev Tools. This is primarily intended for dev mode, not production.

Example

Input

function MyComponent() {
  return (
    <div className="foo">
      <Alert variant="danger">
        {names.map(name => (
          <Card key={name}>{name}</Card>
        ))}
      </Alert>
    </div>
  )
}

output

function MyComponent() {
  return (
    <div className="foo" data-source-loc="src/MyComponent.js:3:4">
      <Alert variant="danger" data-source-loc="src/MyComponent.js:4:6">
        {names.map(name => (
          <Card key={name} data-source-loc="src/MyComponent.js:6:10">
            {name}
          </Card>
        ))}
      </Alert>
    </div>
  )
}

Usage

npm i --save-dev babel-plugin-jsx-source-loc

And add "babel-plugin-jsx-source-loc" to your babel configuration.