diff --git a/404.html b/404.html index eefbb16..fc4a9ea 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file +404: This page could not be found

404

This page could not be found.

\ No newline at end of file diff --git a/_next/static/chunks/nextra-data-en-US.json b/_next/static/chunks/nextra-data-en-US.json index 0b1d3f9..fcfa4c5 100644 --- a/_next/static/chunks/nextra-data-en-US.json +++ b/_next/static/chunks/nextra-data-en-US.json @@ -1 +1 @@ -{"/docs/editor-settings":{"title":"IDE / Editor config","data":{"":"The react-dev-inspector could launch your local IDE/Editor application with file path, but which one will be open?In fact, it uses an environment variable named REACT_EDITOR to specify an IDE application.For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code in your shell config like .bashrc or .zshrc.\nNote: Don't forget restart shell or IDE to reload the updated environment variables.\nNote: if you do NOT specify the environment variable of REACT_EDITOR, react-dev-inspector will temporarily set it to code by default.\nThis means that VSCode will be used as the default editor. \nThis setting is designed to be broadly applicable for a wide range of users.","vscode#VSCode":"Install VSCode command line tools, follow the official docs,\nyou need to run the command: >Shell Command: Install 'code' command in PATH\nSet env to shell, like .bashrc or .zshrc","webstorm#WebStorm":"Just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)\nORInstall WebStorm command line tools:\nThen set env to shell, like .bashrc or .zshrc:","nvim--vim#Nvim / Vim":"Yes! you can also use nvim/vim if you want, just set env to shell"}},"/docs":{"title":"Introduction - React Dev Inspector","data":{"the-problems#The Problems":"Hey folks, have you ever run into any of these issues 🤔:\nYou've got to fix some bugs in your team's project, but you have no idea where the heck page/component's code is located.\nYou're eager to dive into an open-source project that interests you, but it's hard to find where the code for the page/component is implemented.\nYou may thinking about a component and want to quickly peek at its code, but don't want to memorize or manually expand those never-ending deep file paths.\nThat's exactly why react-dev-inspector was created.","react-dev-inspector#React Dev Inspector":"react-dev-inspector is the tool for seamlessly code navigation from browser to IDE.With just a simple click, you can jump from a React component on the browser to its source code in your local IDE instantly.\nThink of it as a more advanced version of Chrome's Inspector.It's designed to work in any environment:\nno browser restrictions, no framework limitations.\ndoesn't matter whether your code is running locally, remotely, or even in a container.\nalso flexible enough to handle both development and production build modes.\nIt's not just built for app, also designed to be integrated into tools you developed or ready to develop,\nlike browser extensions and developer toolkits.","quick-look#Quick Look":"Just check out this demo below and you'll get it in a snap.","try-it-online#Try It Online":"Wanna try out the demo right now? Sure, here is the online demo:","how-to-use-and-configure#How to Use and Configure":"According to the working pipeline below, the Part.1 and Part.2 are what you need configure to use.Basically, it's includes:\nadd the component in your page\nintegrate the middleware in your framework's dev-server\nCheck their documentation link for details.","how-it-works#How It Works":"Here is the working pipeline of react-dev-inspector:","inject-jsx-source#Inject JSX Source":"The compiler's plugin records source path info into React components during development stage.\nNote: Most frameworks offer this feature out-of-the-box,\nwhich means you usually don't need to manually configure it additionally.","inspector-component#Inspector Component":"The react-dev-inspector provide a component to reads the source info,\nand sends it to the dev-server when you inspect elements on browser.","dev-server-middleware#Dev Server Middleware":"The react-dev-inspector provide some middlewares for dev-server in most frameworks to receives source path info from API,\nthen call your local IDE/Editor to open the source file."}},"/docs/integration":{"title":"Server-Side Integration","data":{"":"react-dev-inspector provides a pure middleware and many integrated plugins for popular frameworks,\nyou can choose one of them to integrate into your project.","frameworks-integration#Frameworks Integration":"All behind those interaction plugins is the @react-dev-inspector/middleware{:ts},for other frameworks, you can use the middleware directly in your framework's dev-server.","inspector-middleware#Inspector Middleware":"This package mainly just provides a launchEditorMiddleware,\nthat is an Express.js / Connect.js compatible request middleware.","usage-examples#Usage Examples":"For example, use with webpack-dev-server / webpack-dev-middleware:\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares."}},"/docs/integration/_snip-declaration":{"title":" Snip Declaration","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component,\nand call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1."}},"/docs/integration/create-react-app":{"title":"Create-React-App Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your create-react-app project.","setup-customize-cra#Setup customize-cra":"Before setup with react-dev-inspector, let's assume you have use customize-cra\nand react-app-rewired\nto override the create-react-app config in your project,\nbecause create-react-app doesn't provide configuration capabilities of its own.If not yet, please follow the customize-cra document to work at first.Now you should already replace the react-scripts with react-app-rewired in your package.json file likes:\nand already have a config-overrides.js for customize-cra.","setup-react-dev-inspector#Setup react-dev-inspector":"Install the middleware package and add it to your config-overrides.js:","example#Example":"Example project code you can find in examples/cra5-with-rewired,\nor see online demo via:"}},"/docs/integration/rspack":{"title":"Rspack Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Rspack project.","setup#Setup":"At first install the package:\nThis package provides a launchEditorMiddleware,\njust add it in your rscpack.config.ts by devServer.setupMiddlewares:\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.","example#Example":"Example project code you can find in examples/rspack."}},"/docs/integration/nextjs":{"title":"Next.js Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Next.js project.","setup#Setup":"At first install the package:\nThis middleware package just provides a launchEditorMiddleware,\nyou need to add it to Custom Server of Next.js,\nand update the dev script in package.json.Here provide a example template for your to create a server.mjs as custom server:\nThat is because the launchEditorMiddleware can it CANNOT running in Next.js Edge Runtime,\nthat need you to use it in the Custom Server.","example#Example":"Example project code you can find in examples/nextjs-custom-server,\nor see online demo via:"}},"/docs/integration/umijs":{"title":"Umi Plugin","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your UmiJS project.","umi4-setup#Umi4 Setup":"At first install the plugin package:\nThen add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:\nThe plugin includes @react-dev-inspector/babel-plugin,\nwhich will automatically be disabled when using srcTranspiler: 'swc' in umi4 config or when in production build mode.","umi3-setup#Umi3 Setup":"Same as setup with Umi4, but change the plugin package to:\nThen add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:\nThis plugin has include a @react-dev-inspector/babel-plugin\nwhich will automatically disable when production build mode.","example#Example":"Example project code you can find in examples/umi4\nand examples/umi3,\nor see online demo via:"}},"/docs/integration/vite":{"title":"Vite Plugin","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Vite project.","setup#Setup":"At first install the plugin package:\nThe @react-dev-inspector/vite-plugin{:ts} now export a inspectorServer that compatible with vite@5 / vite@4 / vite@3 / vite@2,\njust add it into vite.config.ts and that's all done.","example#Example":"Example project code you can find in examples/vite4,\nor see online demo via:"}},"/docs/integration/webpack":{"title":"Webpack Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Webpack project.","setup#Setup":"At first install the package:\nThis package provides a launchEditorMiddleware,\njust add it in your webpack config's middlewares.\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.\nFor example, use with setupMiddlewares in Webpack 5 likes:\nUse with devServer.before in Webpack 4 likes:"}},"/docs/migrate-v1-to-v2":{"title":"Migrate From V1 to V2","data":{"breaking-changes#Breaking Changes":"Replaced Imports:\nimport { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'{:ts} \n-> import { launchEditorMiddleware } from '@react-dev-inspector/middleware'{:ts}\nimport { inspectorServer } from 'react-dev-inspector/plugins/vite'{:ts} \n-> import { inspectorServer } from '@react-dev-inspector/vite-plugin'{:ts}\nReplaced references path:\n'react-dev-inspector/plugins/babel'{:ts} -> '@react-dev-inspector/babel-plugin'{:ts}\n'react-dev-inspector/plugins/umi/react-inspector'{:ts}\n-> '@react-dev-inspector/umi3-plugin'{:ts}\n-> '@react-dev-inspector/umi4-plugin'{:ts}\nDeprecated and Removed:\nthe babel plugin and middleware in package react-dev-inspector/plugins/webpack{:ts} was splited to two packages:\n@react-dev-inspector/babel-plugin{:ts}\n@react-dev-inspector/middleware{:ts}\nimport type { InspectorConfig } from 'react-dev-inspector/plugins/webpack'{:ts}\nthe babel plugin config type changed to \nimport type { InspectorBabelPlugin } from '@react-dev-inspector/babel-plugin'{:ts}\nimport { ReactInspectorPlugin } from 'react-dev-inspector/plugins/webpack'{:ts}\nthe dev server middleware changed to launchEditorMiddleware{:ts}, \nimport { launchEditorMiddleware } from '@react-dev-inspector/middleware'{:ts}"}},"/":{"title":"React Dev Inspector – Seamless Browser-to-Editor Code Navigation","data":{}},"/docs/compiler-plugin":{"title":"Compiler Plugin","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page serves as Part.0 of configuration guide, which focuses on adding a plugin the the compiler within your development framework.\nThe plugin will record source path information into React components during the development phase.\nNote: The 0 of Part.0 implies that this section is generally OPTIONAL.\nMost React frameworks offer this feature out-of-the-box,\nwhich means you usually don't need to manually configure it additionally.\nThe Component of react-dev-inspector can read the source path from element's custom data attributes data-inspector-\nor read from React's fiber._debugSource, some compiler with plugins can provide these information.","babel#Babel":"There are some supported Babel plugins available should you need them to record source path information into React components during the development phase:","babelpreset-react#@babel/preset-react":"@babel/preset-react is a Babel preset that compiles JSX and other stuff to React,\nand most React frameworks used it as built-in preset, so maybe you don't have to install it.If you are already using @babel/preset-react, make sure it have enabled the development option, that will provide precise code location information for debugging React apps.\nWith development and runtime: 'automatic' options enabled, it will append @babel/plugin-transform-react-jsx-development into plugins.\nwhile set runtime: 'classic' (for react < 16.14.0), it will append legacy @babel/plugin-transform-react-jsx-source as instead.\nFurthermore, you can also manually add these plugins to your Babel configuration if required.","babelplugin-transform-react-jsx-development#@babel/plugin-transform-react-jsx-development":"If you are already using @babel/preset-react, it will be automatically enabled by the development option so you don't have to install it.@babel/plugin-transform-react-jsx-development could inject the source params to _jsxDEV function,\nwhich will be transform to fiber._debugSource by React.","babelplugin-transform-react-jsx-source#@babel/plugin-transform-react-jsx-source":"The legacy plugin @babel/plugin-transform-react-jsx-source could inject __source props to JSX Elements,\nwhich will be transform to fiber._debugSource by React.","react-dev-inspectorbabel-plugin#@react-dev-inspector/babel-plugin":"@react-dev-inspector/babel-plugin could inject some custom data attributes start with data-inspector-,\nwhich will eventually appear on the DOM element.\nThe difference is that @react-dev-inspector/babel-plugin will inject the relative path for aesthetic reasons,\nwhile the @babel/plugin-transform-react-jsx-development\ninjects the absolute path.","setup-examples#Setup Examples":"If you wish to use a Babel plugin, please manually add it to your framework's Babel configuration, here ara some examples:\nFollow the docs of vite plugin-react,\nadd plugin to @vitejs/plugin-react's config:\nIf you are using @vitejs/plugin-react-swc, you don't need any plugin.\nFollow the docs of Nextjs Babel configuration,\nadd plugin to .babelrc.js or babel.config.js:\nIf you are using swc in Next.js, you don't need any plugin.\nIncludes in @react-dev-inspector/umi4-plugin and @react-dev-inspector/umi3-plugin, see their documentation for details.\nIn the those umi plugins, the babel plugin will automatically be disabled when using srcTranspiler: 'swc' in umi4 config or when in production build mode.","swc#SWC":"No additional plugins are required when using SWC, since SWC handles this feature itself\nthrough the jsc.transform.react.development configuration,\nwhich is usually set automatically in most frameworks.If in your project scaffold it's not automatic set, you need to manually make sure to enable it in your swc configuration (like .swcrc):","esbuild#esbuild":"No additional plugins are required when using esbuild,\nsince esbuild can indeed generate the debugSource when transforming JSX via jsx-dev option, which is usually set automatically in most frameworks.If in your project scaffold, it's not automatic set,\nyou need to manually make sure your esbuild has run unber jsx option with 'automatic' and jsx-dev option with true:","esbuild-loader#esbuild-loader":"Example for configurate esbuild-loader in webpack's module.rules:"}},"/docs/inspector-component":{"title":"Inspector Component","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page is the Part.1 of configuration, we will add the Inspector UI component in your project\nthat provider interaction on browser, like this:\nTriggered by hotkeys, also able to be controlled by component props.\nSee the default settings or change them below.Also provides a panel to show hierarchy from the inspected element to root.\nIt’s triggered by a right-click when inspecting (version >=v2.1.0).\nCalled InspectContextPanel due to it's like the mouse context-menuTry it on the Showcase page to see the effect.","setup#Setup":"At first install the package:\nThen import the react-dev-inspector in your project entry file, like one of main.tsx, App.tsx or index.tsx:\nNow, we've completed the simplest setup way in this Part.1 🎉.To begin developing your project, you'll gain access to the Inspector UI in the browser\nvia default keyboard shortcuts:\nCtrl + Shift + Command + C on macOS\nCtrl + Shift + Alt + C on Windows / Linux\nBy default, clicking inspected element in the browser will trigger the to send an API network request to dev-server,\nthat will call your local IDE/editor to open the source file.For the next Part.2, you'll need to do set up a Middleware on Server-Side to handle these API requests.Certainly, you also have the option to override these shortcuts by configuring the props of the component.\nFor more advanced controls, refer to the Props section below.","props#Props":"This section refers to the interface of InspectorProps\nfor component.","keys#keys":"Type: keys?: string[] | null{:ts}\nDefault: \n['Ctrl', 'Shift', 'Command', 'C']{:ts} on macOS \n['Ctrl', 'Shift', 'Alt', 'C']{:ts} on other platforms\nActivity toggle hotkeys for component, supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keysSetting keys={null} {:tsx} explicitly means that disable use hotkeys to trigger it.","active#active":"Added in: v2.0.0\nType: active?: boolean{:ts}If setting active prop, the Inspector will be a Controlled React Component,\nyou need to control the true{:ts} / false{:ts} state to active the Inspector.If not setting active prop, this only a Uncontrolled component that\nwill activate/deactivate by hotkeys.","onactivechange#onActiveChange":"Added in: v2.0.0\nType: onActiveChange?: (active: boolean) => void{:ts}Callback trigger by active state change, includes:\nhotkeys toggle, before activate/deactivate Inspector\nEscape / Click, before deactivate Inspector\nNote: onActiveChange will NOT trigger by change of active prop key.","disable#disable":"Added in: v2.0.0\nType: disable?: boolean{:ts}Whether to disable all behavior include hotkeys listening or trigger.\nNote: react-dev-inspector will automatically disable in production environment by default.","inspectagents#inspectAgents":"Added in: v2.1.0\nType: inspectAgents?: InspectAgent[]{:ts}\ninterface InspectAgent{:ts}\nDefault: built-in [new DomInspectAgent()]{:ts}\nclass DomInspectAgent{:ts}\nAgent for get inspection info in different React renderer with user interaction.","oninspectelement#onInspectElement":"Added in: v2.0.0\nType: onInspectElement?: (params: OnInspectElementParams) => void{:ts}\ninterface InspectParams{:ts})\nDefault: built-in gotoServerEditor{:ts} util function\nCallback when left-clicking on an element, with ensuring the source code info is found,\nthe default gotoServerEditor callback will request the dev-server to open local IDE/editor from server-side.\nNote: By override the onInspectElement prop, the default gotoServerEditor will be removed,\nthat means you want to manually handle the source info, or handle how to goto editor by yourself.\nYou can also use the built-in gotoServerEditor util funtion in onInspectElement to get origin behavior (open local IDE on server-side),\nit looks like:\nOr simply use other built-in utils likes gotoVSCode, gotoVSCodeInsiders, gotoWebStorm to open IDE/editor by URL-scheme,\nwhich not need any server side configuration:","onhoverelement#onHoverElement":"Type: onHoverElement?: (params: InspectParams) => void{:ts}Callback when hovering on an element","onclickelement#onClickElement":"Type: onClickElement?: (params: InspectParams) => void{:ts}Callback when left-clicking on an element.","children#children":"Type: children?: ReactNode{:ts}Any children of react nodes, to support usages like both of:\nand","disablelauncheditor#disableLaunchEditor":"Deprecated after: v2.0.0\nType: disableLaunchEditor?: boolean{:ts}\nDefault: true{:ts} if setting onInspectElement callback, otherwise is false{:ts}.\nWhether to disable default behavior: \"open local IDE when click on component\".\nDeprecated \ndisableLaunchEditor is deprecated after v2, please use onInspectElement callback instead for fully custom controlling."}}} \ No newline at end of file +{"/docs/editor-settings":{"title":"IDE / Editor config","data":{"":"The react-dev-inspector could launch your local IDE/Editor application with file path, but which one will be open?In fact, it uses an environment variable named REACT_EDITOR to specify an IDE application.For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code in your shell config like .bashrc or .zshrc.\nNote: Don't forget restart shell or IDE to reload the updated environment variables.\nNote: if you do NOT specify the environment variable of REACT_EDITOR, react-dev-inspector will temporarily set it to code by default.\nThis means that VSCode will be used as the default editor. \nThis setting is designed to be broadly applicable for a wide range of users.","vscode#VSCode":"Install VSCode command line tools, follow the official docs,\nyou need to run the command: >Shell Command: Install 'code' command in PATH\nSet env to shell, like .bashrc or .zshrc","webstorm#WebStorm":"Just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)\nORInstall WebStorm command line tools:\nThen set env to shell, like .bashrc or .zshrc:","nvim--vim#Nvim / Vim":"Yes! you can also use nvim/vim if you want, just set env to shell"}},"/docs":{"title":"Introduction - React Dev Inspector","data":{"the-problems#The Problems":"Hey folks, have you ever run into any of these issues 🤔:\nYou've got to fix some bugs in your team's project, but you have no idea where the heck page/component's code is located.\nYou're eager to dive into an open-source project that interests you, but it's hard to find where the code for the page/component is implemented.\nYou may thinking about a component and want to quickly peek at its code, but don't want to memorize or manually expand those never-ending deep file paths.\nThat's exactly why react-dev-inspector was created.","react-dev-inspector#React Dev Inspector":"react-dev-inspector is the tool for seamlessly code navigation from browser to IDE.With just a simple click, you can jump from a React component on the browser to its source code in your local IDE instantly.\nThink of it as a more advanced version of Chrome's Inspector.It's designed to work in any environment:\nno browser restrictions, no framework limitations.\ndoesn't matter whether your code is running locally, remotely, or even in a container.\nalso flexible enough to handle both development and production build modes.\nIt's not just built for app, also designed to be integrated into tools you developed or ready to develop,\nlike browser extensions and developer toolkits.","quick-look#Quick Look":"Just check out this demo below and you'll get it in a snap.","try-it-online#Try It Online":"Wanna try out the demo right now? Sure, here is the online demo:","how-to-use-and-configure#How to Use and Configure":"According to the working pipeline below, the Part.1 and Part.2 are what you need configure to use.Basically, it's includes:\nadd the component in your page\nintegrate the middleware in your framework's dev-server\nCheck their documentation link for details.","how-it-works#How It Works":"Here is the working pipeline of react-dev-inspector:","inject-jsx-source#Inject JSX Source":"The compiler's plugin records source path info into React components during development stage.\nNote: Most frameworks offer this feature out-of-the-box,\nwhich means you usually don't need to manually configure it additionally.","inspector-component#Inspector Component":"The react-dev-inspector provide a component to reads the source info,\nand sends it to the dev-server when you inspect elements on browser.","dev-server-middleware#Dev Server Middleware":"The react-dev-inspector provide some middlewares for dev-server in most frameworks to receives source path info from API,\nthen call your local IDE/Editor to open the source file."}},"/docs/integration":{"title":"Server-Side Integration","data":{"":"react-dev-inspector provides a pure middleware and many integrated plugins for popular frameworks,\nyou can choose one of them to integrate into your project.","frameworks-integration#Frameworks Integration":"All behind those interaction plugins is the @react-dev-inspector/middleware{:ts},for other frameworks, you can use the middleware directly in your framework's dev-server.","inspector-middleware#Inspector Middleware":"This package mainly just provides a launchEditorMiddleware,\nthat is an Express.js / Connect.js compatible request middleware.","usage-examples#Usage Examples":"For example, use with webpack-dev-server / webpack-dev-middleware:\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares."}},"/docs/integration/_snip-declaration":{"title":" Snip Declaration","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component,\nand call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1."}},"/docs/integration/nextjs":{"title":"Next.js Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Next.js project.","setup#Setup":"At first install the package:\nThis middleware package just provides a launchEditorMiddleware,\nyou need to add it to Custom Server of Next.js,\nand update the dev script in package.json.Here provide a example template for your to create a server.mjs as custom server:\nThat is because the launchEditorMiddleware can it CANNOT running in Next.js Edge Runtime,\nthat need you to use it in the Custom Server.","example#Example":"Example project code you can find in examples/nextjs-custom-server,\nor see online demo via:"}},"/docs/integration/rspack":{"title":"Rspack Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Rspack project.","setup#Setup":"At first install the package:\nThis package provides a launchEditorMiddleware,\njust add it in your rscpack.config.ts by devServer.setupMiddlewares:\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.","example#Example":"Example project code you can find in examples/rspack."}},"/docs/integration/create-react-app":{"title":"Create-React-App Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your create-react-app project.","setup-customize-cra#Setup customize-cra":"Before setup with react-dev-inspector, let's assume you have use customize-cra\nand react-app-rewired\nto override the create-react-app config in your project,\nbecause create-react-app doesn't provide configuration capabilities of its own.If not yet, please follow the customize-cra document to work at first.Now you should already replace the react-scripts with react-app-rewired in your package.json file likes:\nand already have a config-overrides.js for customize-cra.","setup-react-dev-inspector#Setup react-dev-inspector":"Install the middleware package and add it to your config-overrides.js:","example#Example":"Example project code you can find in examples/cra5-with-rewired,\nor see online demo via:"}},"/docs/integration/umijs":{"title":"Umi Plugin","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your UmiJS project.","umi4-setup#Umi4 Setup":"At first install the plugin package:\nThen add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:\nThe plugin includes @react-dev-inspector/babel-plugin,\nwhich will automatically be disabled when using srcTranspiler: 'swc' in umi4 config or when in production build mode.","umi3-setup#Umi3 Setup":"Same as setup with Umi4, but change the plugin package to:\nThen add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:\nThis plugin has include a @react-dev-inspector/babel-plugin\nwhich will automatically disable when production build mode.","example#Example":"Example project code you can find in examples/umi4\nand examples/umi3,\nor see online demo via:"}},"/docs/integration/vite":{"title":"Vite Plugin","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Vite project.","setup#Setup":"At first install the plugin package:\nThe @react-dev-inspector/vite-plugin{:ts} only register a inspectorServer middleware to launch the local editor with an endpoint using @react-dev-inspector/middleware,\nthat compatible with vite@5 / vite@4 / vite@3 / vite@2.Just add it into vite.config.ts and that's all done.","example#Example":"Example project code you can find in examples/vite4,\nor see online demo via:"}},"/docs/integration/webpack":{"title":"Webpack Integration","data":{"":"In this section, follow the simple setup below to integrate react-dev-inspector into your Webpack project.","setup#Setup":"At first install the package:\nThis package provides a launchEditorMiddleware,\njust add it in your webpack config's middlewares.\nNote: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.\nFor example, use with setupMiddlewares in Webpack 5 likes:\nUse with devServer.before in Webpack 4 likes:"}},"/docs/migrate-v1-to-v2":{"title":"Migrate From V1 to V2","data":{"breaking-changes#Breaking Changes":"Replaced Imports:\nimport { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'{:ts} \n-> import { launchEditorMiddleware } from '@react-dev-inspector/middleware'{:ts}\nimport { inspectorServer } from 'react-dev-inspector/plugins/vite'{:ts} \n-> import { inspectorServer } from '@react-dev-inspector/vite-plugin'{:ts}\nReplaced references path:\n'react-dev-inspector/plugins/babel'{:ts} -> '@react-dev-inspector/babel-plugin'{:ts}\n'react-dev-inspector/plugins/umi/react-inspector'{:ts}\n-> '@react-dev-inspector/umi3-plugin'{:ts}\n-> '@react-dev-inspector/umi4-plugin'{:ts}\nDeprecated and Removed:\nthe babel plugin and middleware in package react-dev-inspector/plugins/webpack{:ts} was splited to two packages:\n@react-dev-inspector/babel-plugin{:ts}\n@react-dev-inspector/middleware{:ts}\nimport type { InspectorConfig } from 'react-dev-inspector/plugins/webpack'{:ts}\nthe babel plugin config type changed to \nimport type { InspectorBabelPlugin } from '@react-dev-inspector/babel-plugin'{:ts}\nimport { ReactInspectorPlugin } from 'react-dev-inspector/plugins/webpack'{:ts}\nthe dev server middleware changed to launchEditorMiddleware{:ts}, \nimport { launchEditorMiddleware } from '@react-dev-inspector/middleware'{:ts}"}},"/":{"title":"React Dev Inspector – Seamless Browser-to-Editor Code Navigation","data":{}},"/docs/compiler-plugin":{"title":"Compiler Plugin","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page serves as Part.0 of configuration guide, which focuses on adding a plugin the the compiler within your development framework.\nThe plugin will record source path information into React components during the development phase.\nNote: The 0 of Part.0 implies that this section is generally OPTIONAL.\nMost React frameworks offer this feature out-of-the-box,\nwhich means you usually don't need to manually configure it additionally.\nThe Component of react-dev-inspector can read the source path from element's custom data attributes data-inspector-\nor read from React's fiber._debugSource, some compiler with plugins can provide these information.","babel#Babel":"There are some supported Babel plugins available should you need them to record source path information into React components during the development phase:","babelpreset-react#@babel/preset-react":"@babel/preset-react is a Babel preset that compiles JSX and other stuff to React,\nand most React frameworks used it as built-in preset, so maybe you don't have to install it.If you are already using @babel/preset-react, make sure it have enabled the development option, that will provide precise code location information for debugging React apps.\nWith development and runtime: 'automatic' options enabled, it will append @babel/plugin-transform-react-jsx-development into plugins.\nwhile set runtime: 'classic' (for react < 16.14.0), it will append legacy @babel/plugin-transform-react-jsx-source as instead.\nFurthermore, you can also manually add these plugins to your Babel configuration if required.","babelplugin-transform-react-jsx-development#@babel/plugin-transform-react-jsx-development":"If you are already using @babel/preset-react, it will be automatically enabled by the development option so you don't have to install it.@babel/plugin-transform-react-jsx-development could inject the source params to _jsxDEV function,\nwhich will be transform to fiber._debugSource by React.","babelplugin-transform-react-jsx-source#@babel/plugin-transform-react-jsx-source":"The legacy plugin @babel/plugin-transform-react-jsx-source could inject __source props to JSX Elements,\nwhich will be transform to fiber._debugSource by React.","react-dev-inspectorbabel-plugin#@react-dev-inspector/babel-plugin":"@react-dev-inspector/babel-plugin could inject some custom data attributes start with data-inspector-,\nwhich will eventually appear on the DOM element.\nThe difference is that @react-dev-inspector/babel-plugin will inject the relative path for aesthetic reasons,\nwhile the @babel/plugin-transform-react-jsx-development\ninjects the absolute path.","setup-examples#Setup Examples":"If you wish to use a Babel plugin, please manually add it to your framework's Babel configuration, here ara some examples:\nFollow the docs of vite plugin-react,\nadd plugin to @vitejs/plugin-react's config:\nIf you are using @vitejs/plugin-react-swc, you don't need any plugin.\nFollow the docs of Nextjs Babel configuration,\nadd plugin to .babelrc.js or babel.config.js:\nIf you are using swc in Next.js, you don't need any plugin.\nIncludes in @react-dev-inspector/umi4-plugin and @react-dev-inspector/umi3-plugin, see their documentation for details.\nIn the those umi plugins, the babel plugin will automatically be disabled when using srcTranspiler: 'swc' in umi4 config or when in production build mode.","swc#SWC":"No additional plugins are required when using SWC, since SWC handles this feature itself\nthrough the jsc.transform.react.development configuration,\nwhich is usually set automatically in most frameworks.If in your project scaffold it's not automatic set, you need to manually make sure to enable it in your swc configuration (like .swcrc):","esbuild#esbuild":"No additional plugins are required when using esbuild,\nsince esbuild can indeed generate the debugSource when transforming JSX via jsx-dev option, which is usually set automatically in most frameworks.If in your project scaffold, it's not automatic set,\nyou need to manually make sure your esbuild has run unber jsx option with 'automatic' and jsx-dev option with true:","esbuild-loader#esbuild-loader":"Example for configurate esbuild-loader in webpack's module.rules:"}},"/docs/inspector-component":{"title":"Inspector Component","data":{"":"Optional Compiler\nInspector Component\nDev Server Middleware\nThis page is the Part.1 of configuration, we will add the Inspector UI component in your project\nthat provider interaction on browser, like this:\nTriggered by hotkeys, also able to be controlled by component props.\nSee the default settings or change them below.Also provides a panel to show hierarchy from the inspected element to root.\nIt’s triggered by a right-click when inspecting (version >=v2.1.0).\nCalled InspectContextPanel due to it's like the mouse context-menuTry it on the Showcase page to see the effect.","setup#Setup":"At first install the package:\nThen import the react-dev-inspector in your project entry file, like one of main.tsx, App.tsx or index.tsx:\nNow, we've completed the simplest setup way in this Part.1 🎉.To begin developing your project, you'll gain access to the Inspector UI in the browser\nvia default keyboard shortcuts:\nCtrl + Shift + Command + C on macOS\nCtrl + Shift + Alt + C on Windows / Linux\nBy default, clicking inspected element in the browser will trigger the to send an API network request to dev-server,\nthat will call your local IDE/editor to open the source file.For the next Part.2, you'll need to do set up a Middleware on Server-Side to handle these API requests.Certainly, you also have the option to override these shortcuts by configuring the props of the component.\nFor more advanced controls, refer to the Props section below.","props#Props":"This section refers to the interface of InspectorProps\nfor component.","keys#keys":"Type: keys?: string[] | null{:ts}\nDefault: \n['Ctrl', 'Shift', 'Command', 'C']{:ts} on macOS \n['Ctrl', 'Shift', 'Alt', 'C']{:ts} on other platforms\nActivity toggle hotkeys for component, supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keysSetting keys={null} {:tsx} explicitly means that disable use hotkeys to trigger it.","active#active":"Added in: v2.0.0\nType: active?: boolean{:ts}If setting active prop, the Inspector will be a Controlled React Component,\nyou need to control the true{:ts} / false{:ts} state to active the Inspector.If not setting active prop, this only a Uncontrolled component that\nwill activate/deactivate by hotkeys.","onactivechange#onActiveChange":"Added in: v2.0.0\nType: onActiveChange?: (active: boolean) => void{:ts}Callback trigger by active state change, includes:\nhotkeys toggle, before activate/deactivate Inspector\nEscape / Click, before deactivate Inspector\nNote: onActiveChange will NOT trigger by change of active prop key.","disable#disable":"Added in: v2.0.0\nType: disable?: boolean{:ts}Whether to disable all behavior include hotkeys listening or trigger.\nNote: react-dev-inspector will automatically disable in production environment by default.","inspectagents#inspectAgents":"Added in: v2.1.0\nType: inspectAgents?: InspectAgent[]{:ts}\ninterface InspectAgent{:ts}\nDefault: built-in [new DomInspectAgent()]{:ts}\nclass DomInspectAgent{:ts}\nAgent for get inspection info in different React renderer with user interaction.","oninspectelement#onInspectElement":"Added in: v2.0.0\nType: onInspectElement?: (params: OnInspectElementParams) => void{:ts}\ninterface InspectParams{:ts})\nDefault: built-in gotoServerEditor{:ts} util function\nCallback when left-clicking on an element, with ensuring the source code info is found,\nthe default gotoServerEditor callback will request the dev-server to open local IDE/editor from server-side.\nNote: By override the onInspectElement prop, the default gotoServerEditor will be removed,\nthat means you want to manually handle the source info, or handle how to goto editor by yourself.\nYou can also use the built-in gotoServerEditor util funtion in onInspectElement to get origin behavior (open local IDE on server-side),\nit looks like:\nOr simply use other built-in utils likes gotoVSCode, gotoVSCodeInsiders, gotoWebStorm to open IDE/editor by URL-scheme,\nwhich not need any server side configuration:","onhoverelement#onHoverElement":"Type: onHoverElement?: (params: InspectParams) => void{:ts}Callback when hovering on an element","onclickelement#onClickElement":"Type: onClickElement?: (params: InspectParams) => void{:ts}Callback when left-clicking on an element.","children#children":"Type: children?: ReactNode{:ts}Any children of react nodes, to support usages like both of:\nand","disablelauncheditor#disableLaunchEditor":"Deprecated after: v2.0.0\nType: disableLaunchEditor?: boolean{:ts}\nDefault: true{:ts} if setting onInspectElement callback, otherwise is false{:ts}.\nWhether to disable default behavior: \"open local IDE when click on component\".\nDeprecated \ndisableLaunchEditor is deprecated after v2, please use onInspectElement callback instead for fully custom controlling."}}} \ No newline at end of file diff --git a/_next/static/chunks/pages/docs/integration/vite-07e7e10e972ee9fa.js b/_next/static/chunks/pages/docs/integration/vite-8b25f38fe3b4da75.js similarity index 54% rename from _next/static/chunks/pages/docs/integration/vite-07e7e10e972ee9fa.js rename to _next/static/chunks/pages/docs/integration/vite-8b25f38fe3b4da75.js index e32f2e5..e55fa0b 100644 --- a/_next/static/chunks/pages/docs/integration/vite-07e7e10e972ee9fa.js +++ b/_next/static/chunks/pages/docs/integration/vite-8b25f38fe3b4da75.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[328],{9841:function(t,e,a){"use strict";function n(){for(var t,e,a=0,n="";a0&&void 0!==arguments[0]?arguments[0]:{},e=Object.assign({},(0,i.a)(),t.components).wrapper;return e?(0,d.jsx)(e,l(l({"data-inspector-line":"18","data-inspector-column":"21","data-inspector-relative-path":"pages/docs/integration/_snip-declaration.mdx"},t),{},{children:(0,d.jsx)(m,l({"data-inspector-line":"18","data-inspector-column":"43","data-inspector-relative-path":"pages/docs/integration/_snip-declaration.mdx"},t))})):m(t)}},7246:function(t,e,a){"use strict";a.r(e),a.d(e,{__toc:function(){return m}});var n=a(5479),i=a(5812),r=a(104),o=a(1614),s=a(5430),c=a(5208),d=a(5337),p=a(5250);function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),a.push.apply(a,n)}return a}function h(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{},e=Object.assign({},(0,o.a)(),t.components).wrapper;return e?(0,p.jsx)(e,h(h({"data-inspector-line":"186","data-inspector-column":"21","data-inspector-relative-path":"pages/docs/integration/vite.mdx"},t),{},{children:(0,p.jsx)(v,h({"data-inspector-line":"186","data-inspector-column":"43","data-inspector-relative-path":"pages/docs/integration/vite.mdx"},t))})):v(t)},pageOpts:{filePath:"pages/docs/integration/vite.mdx",route:"/docs/integration/vite",title:"Vite Plugin",headings:m},pageNextRoute:"/docs/integration/vite"})},6938:function(t,e,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/integration/vite",function(){return a(7246)}])},5430:function(t,e){"use strict";e.Z={src:"/_next/static/media/open-in-stackblitz.bdc07784.svg",height:32,width:162,blurWidth:0,blurHeight:0}},4382:function(t,e){"use strict";e.Z={src:"/_next/static/media/middleware-part.2f20d44e.svg",height:469,width:1464,blurWidth:0,blurHeight:0}},3439:function(t,e,a){"use strict";function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=Array(e);a0&&void 0!==arguments[0]?arguments[0]:{},e=Object.assign({},(0,n.a)(),t.components).wrapper;return e?(0,d.jsx)(e,l(l({"data-inspector-line":"18","data-inspector-column":"21","data-inspector-relative-path":"pages/docs/integration/_snip-declaration.mdx"},t),{},{children:(0,d.jsx)(m,l({"data-inspector-line":"18","data-inspector-column":"43","data-inspector-relative-path":"pages/docs/integration/_snip-declaration.mdx"},t))})):m(t)}},7246:function(t,e,a){"use strict";a.r(e),a.d(e,{__toc:function(){return m}});var i=a(5479),n=a(5812),r=a(104),o=a(1614),s=a(5430),c=a(5208),d=a(5337),p=a(5250);function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),a.push.apply(a,i)}return a}function h(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{},e=Object.assign({},(0,o.a)(),t.components).wrapper;return e?(0,p.jsx)(e,h(h({"data-inspector-line":"186","data-inspector-column":"21","data-inspector-relative-path":"pages/docs/integration/vite.mdx"},t),{},{children:(0,p.jsx)(v,h({"data-inspector-line":"186","data-inspector-column":"43","data-inspector-relative-path":"pages/docs/integration/vite.mdx"},t))})):v(t)},pageOpts:{filePath:"pages/docs/integration/vite.mdx",route:"/docs/integration/vite",title:"Vite Plugin",headings:m},pageNextRoute:"/docs/integration/vite"})},6938:function(t,e,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/integration/vite",function(){return a(7246)}])},5430:function(t,e){"use strict";e.Z={src:"/_next/static/media/open-in-stackblitz.bdc07784.svg",height:32,width:162,blurWidth:0,blurHeight:0}},4382:function(t,e){"use strict";e.Z={src:"/_next/static/media/middleware-part.2f20d44e.svg",height:469,width:1464,blurWidth:0,blurHeight:0}},3439:function(t,e,a){"use strict";function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,i=Array(e);a
Documentation
Introduction

Why React Dev Inspector

+
Documentation
Introduction

Why React Dev Inspector

The Problems

Hey folks, have you ever run into any of these issues 🤔:

    @@ -60,4 +60,4 @@

    Inject JSX Source

    The compiler's plugin records source path info into React components during development stage.

    💡

    Note: Most frameworks offer this feature out-of-the-box, which means you usually don't need to manually configure it additionally.

    Inspector Component

    The react-dev-inspector provide a <Inspector/> component to reads the source info, and sends it to the dev-server when you inspect elements on browser.

    Dev Server Middleware

    The react-dev-inspector provide some middlewares for dev-server in most frameworks to receives source path info from API, -then call your local IDE/Editor to open the source file.

Inspector Component
\ No newline at end of file +then call your local IDE/Editor to open the source file.

Inspector Component
\ No newline at end of file diff --git a/docs/compiler-plugin.html b/docs/compiler-plugin.html index db7f45c..a2341be 100644 --- a/docs/compiler-plugin.html +++ b/docs/compiler-plugin.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Compiler Plugin

Compiler Plugin

+
\ No newline at end of file +}
Create React AppEditor Settings
\ No newline at end of file diff --git a/docs/editor-settings.html b/docs/editor-settings.html index eef6b5a..27fb5fa 100644 --- a/docs/editor-settings.html +++ b/docs/editor-settings.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Editor Settings

IDE / Editor config

+
Documentation
Editor Settings

IDE / Editor config

The react-dev-inspector could launch your local IDE/Editor application with file path, but which one will be open?

In fact, it uses an environment variable named REACT_EDITOR to specify an IDE application.

For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code in your shell config like .bashrc or .zshrc.

@@ -47,4 +47,4 @@

Yes! you can also use nvim/vim if you want, just set env to shell

~/.zshrc
export REACT_EDITOR=nvim
 # or
-export REACT_EDITOR=vim
Compiler PluginChangelog V2 ↗

\ No newline at end of file +export REACT_EDITOR=vim
Compiler PluginChangelog V2 ↗
\ No newline at end of file diff --git a/docs/inspector-component.html b/docs/inspector-component.html index be3d937..8cef2ba 100644 --- a/docs/inspector-component.html +++ b/docs/inspector-component.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Inspector Component

Inspector Component

+
Documentation
Inspector Component

Inspector Component

Whether to disable default behavior: "open local IDE when click on component".

⚠️

Deprecated
-disableLaunchEditor is deprecated after v2, please use onInspectElement callback instead for fully custom controlling.

IntroductionServer-Side Integration
\ No newline at end of file +disableLaunchEditor is deprecated after v2, please use onInspectElement callback instead for fully custom controlling.

IntroductionServer-Side Integration
\ No newline at end of file diff --git a/docs/integration.html b/docs/integration.html index cde0f3d..70e8bd1 100644 --- a/docs/integration.html +++ b/docs/integration.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration

Server-Side Integration

+
Inspector ComponentVite
\ No newline at end of file +}
Inspector ComponentVite
\ No newline at end of file diff --git a/docs/integration/_snip-declaration.html b/docs/integration/_snip-declaration.html index 00caa6f..774d87c 100644 --- a/docs/integration/_snip-declaration.html +++ b/docs/integration/_snip-declaration.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -

This page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component, and call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1.

-
Inspector Component
\ No newline at end of file +
Inspector Component
\ No newline at end of file diff --git a/docs/integration/create-react-app.html b/docs/integration/create-react-app.html index 0c09705..1c335a6 100644 --- a/docs/integration/create-react-app.html +++ b/docs/integration/create-react-app.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
Create React App

Create-React-App Integration

+
\ No newline at end of file + (opens in a new tab)

UmiJSCompiler Plugin
\ No newline at end of file diff --git a/docs/integration/nextjs.html b/docs/integration/nextjs.html index 049df84..f82d31b 100644 --- a/docs/integration/nextjs.html +++ b/docs/integration/nextjs.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
Next.js

Next.js Integration

+
\ No newline at end of file + (opens in a new tab)

ViteWebpack
\ No newline at end of file diff --git a/docs/integration/rspack.html b/docs/integration/rspack.html index a1aaa50..3db5fae 100644 --- a/docs/integration/rspack.html +++ b/docs/integration/rspack.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
Rspack

Rspack Integration

+
\ No newline at end of file +
WebpackUmiJS
\ No newline at end of file diff --git a/docs/integration/umijs.html b/docs/integration/umijs.html index 9256ab3..0f65662 100644 --- a/docs/integration/umijs.html +++ b/docs/integration/umijs.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
UmiJS

Umi Plugin

+
\ No newline at end of file + (opens in a new tab)

RspackCreate React App
\ No newline at end of file diff --git a/docs/integration/vite.html b/docs/integration/vite.html index 3b8953e..7340093 100644 --- a/docs/integration/vite.html +++ b/docs/integration/vite.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
Vite

Vite Plugin

+
Documentation
Server-Side Integration
Vite

Vite Plugin

Setup

At first install the plugin package:

npm i -D @react-dev-inspector/vite-plugin
-

The @react-dev-inspector/vite-plugin now export a inspectorServer that compatible with vite@5 / vite@4 / vite@3 / vite@2, -just add it into vite.config.ts and that's all done.

-
vite.config.ts
import { defineConfig } from 'vite'
+
The @react-dev-inspector/vite-plugin only register a inspectorServer middleware to launch the local editor with an endpoint using @react-dev-inspector/middleware (opens in a new tab),
+that compatible with vite@5 / vite@4 / vite@3 / vite@2.

+
Just add it into vite.config.ts and that's all done.

+
vite.config.ts
import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { inspectorServer } from '@react-dev-inspector/vite-plugin'
  
@@ -132,4 +133,4 @@ 

 Open in StackBlitz
- (opens in a new tab)
Server-Side IntegrationNext.js
\ No newline at end of file + (opens in a new tab)

Server-Side IntegrationNext.js
\ No newline at end of file diff --git a/docs/integration/webpack.html b/docs/integration/webpack.html index 565337b..7002a31 100644 --- a/docs/integration/webpack.html +++ b/docs/integration/webpack.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Server-Side Integration
Webpack

Webpack Integration

+
\ No newline at end of file +}
Next.jsRspack
\ No newline at end of file diff --git a/docs/migrate-v1-to-v2.html b/docs/migrate-v1-to-v2.html index 92de088..503f33d 100644 --- a/docs/migrate-v1-to-v2.html +++ b/docs/migrate-v1-to-v2.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -
Documentation
Migrate From V1

Migrate From V1 to V2

+
\ No newline at end of file +
Changelog V1 ↗GitHub ↗
\ No newline at end of file diff --git a/index.html b/index.html index 3eff24a..d9919d1 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } -

Seamless browser-to-editor code navigation.

Inspect in browser, click, then you will get its source code in your local IDE, instantly.

Get started →

Seamless browser-to-editor code navigation.

Inspect in browser, click, then you will get its source code in your local IDE, instantly.

Get started →

Simple to integrate with
your React frameworks and Editors

🍭

And more...

Examples / Configuration / Built-in Plugins / API / Fully Controlled Usages ...
A lot of new possibilities to be explored.

Getting the Docs →

\ No newline at end of file + ">🍭

And more...

Examples / Configuration / Built-in Plugins / API / Fully Controlled Usages ...
A lot of new possibilities to be explored.

Getting the Docs →

\ No newline at end of file diff --git a/showcase.html b/showcase.html index c9dee48..82f3240 100644 --- a/showcase.html +++ b/showcase.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file