babel-plugin-transform-react-jsx-location

Adds a data-source attribute to JSX tags containing the file name and line number of the original source.

Use this plugin to locate which file is generating an element in your page/app. Simply right click on an element in your favourite browser, then hit Inspect and the location of the source is revealed in the data-source attribute.

This plugin is intended to help with debugging while developing; use in production is not recommended!

elements inspector for the mzabriskie/react-example app

Installation

npm install babel-plugin-transform-react-jsx-location

Usage

Via .babelrc (Recommended)

// without options
{
  "plugins": ["transform-react-jsx-location"]
}
 
// with options
{
  "plugins": [
  	["transform-react-jsx-location", { 
  	    "filename": "compact",
  	    "attributeName": "source",
  	    "exclude": ["div"] // defaults to ["Fragment"]
    }]
  ]
}

Via CLI

babel --plugins transform-react-jsx-location script.js

Via Node API

require('babel').transform('code', {
    plugins: ['transform-react-jsx-location']
})