Code Seek is a frontend development tool that allows you to locate your component's source code with a single click from the browser. It currently supports React, and will support Vue soon.
The plugin has not been published to the application market yet. You can import the dist
package from the root directory of this repository into your Chrome extension.
Follow these steps:
dist
package from the root directory of this repository.Babel configuration reference: .babelrc
This configuration allows you to use the latest JS, JSX, and TS features:
{
"presets": [
["@babel/preset-env", { "targets": "defaults" }],
["@babel/preset-react", { "development": true }],
"@babel/preset-typescript"
]
}
In your Webpack configuration, the devtool: "source-map"
option enables Webpack to generate source maps. Refer to this file: webpack.config.js.
Then, enable the Source Code Seeker:
Open the Inspector (this step is crucial):
Option/Alt-click the component you want to locate:
You will be directed to the source code:
I have provided an example for you to experience the plugin's features:
cd example/react
pnpm install
pnpm start