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.