如题？

react-dev-inspector文档说明：

webpack-dev-middleware + express（不会跳转）

If anyone is using vscode insiders, change window.open(`vscode://file/${absolutePath}:${lineNumber}:${columnNumber}`) to window.open(`vscode-insiders://file/${absolutePath}:${lineNumber}:${columnNumber}`).

Don't forget "s" in "insiders".

如果有谁在用vscode insiders版，把 window.open(`vscode://file/${absolutePath}:${lineNumber}:${columnNumber}`) 改成 window.open(`vscode-insiders://file/${absolutePath}:${lineNumber}:${columnNumber}`)

不要忘记"insider"里面的“s“

Currently, in src/plugins/babel/visitor.ts, we directly use the utils imported from @babel/types/lib/builders/generated, which means @babel/types/lib/builders/generated is not only needed during development, we should put it under dependencies instead of devDependencies.

import {
  jsxAttribute,
  jsxIdentifier,
  stringLiteral,
} from '@babel/types/lib/builders/generated'
//...

const lineAttr: JSXAttribute | null = isNil(line)
    ? null
    : jsxAttribute(
      jsxIdentifier('data-inspector-line'),
      stringLiteral(line.toString()),
    )

the inspector-loader must be before jsx babel-loader

项目编译 js 部分最近会整体从 babel 迁移至 esbuild，打包还是用 webpack，作者考虑支持 esbuild 吗？

README中创建 Add Inspector React Component 这一步按照示例会报错

import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'

const isDev = process.env.NODE_ENV === 'development'

export const Layout = () => {
  // ...

  return (
    <>
      <YourComponent />

      {isDev && (
        <Inspector
          // props see docs:
          // https://github.com/zthxxx/react-dev-inspector#inspector-component-props
          keys={['control', 'shift', 'command', 'c']}
          onHoverElement={(inspect: InspectParams) => {}}
          onClickElement={(inspect: InspectParams) => {}}
        >
      )}
    </>
  )
}

通过以下方式使用时正常的

const WrapperComponent =
  process.env.NODE_ENV === 'development' ? Inspector : Fragment

function App() {
  return (
    <div className="App">
      <WrapperComponent keys={["control", "shift", "alt", "f"]}>
         <YourComponent />
      </WrapperComponent>
    </div>
  )
}

这块是文档上的错误，还是我的使用方式哪里错了呢 :(

另外建议 devServer 和 createLaunchEditorMiddleware 这里重点标注一下。看readme去配置webpack的时候直接忽略掉这一点了结果肯定没办法用。

使用 ant-design-pro 开发的时候发现了 react-dev-inspector 插件。后来自己使用 umi 3.x 搭框架时，同样的环境、配置和操作，ant-design-pro 表现正常，可是自己搭的 umi 3.x 一直无法唤醒 vscode ，请问这个问题怎么解决？

环境和依赖

• window版本：10
• node版本：14.15.3
• chrome版本：91.0.4472.101
• umi版本：3.4.25
• react版本：17.0.2
• react-dev-inspector版本：1.6.0

操作步骤

第一步

安装 react-dev-inspector 依赖。

tyarn add react-dev-inspector --dev

第二步

在 config/config.dev.ts 中引入插件。

import { defineConfig } from 'umi';

export default defineConfig({
  plugins: [
    // https://github.com/zthxxx/react-dev-inspector
    'react-dev-inspector/plugins/umi/react-inspector',
  ],
  // https://github.com/zthxxx/react-dev-inspector#inspector-loader-props
  inspectorConfig: {
    excludes: [],
    babelPlugins: [],
    babelOptions: {},
  },
});

第三步

在 src/app.tsx 使用 Inspector 。

import { Fragment } from 'react';
import { Inspector } from 'react-dev-inspector';
import type { InspectParams } from 'react-dev-inspector';
const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : Fragment;

/**
 * 框架布局配置
 * @see https://procomponents.ant.design/components/layout
 */
export const layout: RunTimeLayoutConfig = ({ initialState }) => ({
  childrenRender: children => (
    <InspectorWrapper
      // https://github.com/zthxxx/react-dev-inspector#inspector-component-props
      keys={['control', 'shift', 'command', 'c']}
      disableLaunchEditor={false}
      onHoverElement={(params: InspectParams) => { }}
      onClickElement={(params: InspectParams) => { }}
    >
      {children}
    </InspectorWrapper>
  ),
})

最终结果

貌似一切正常，就是无法唤起 vscode 。

如题

我看了peerDependencies，要求react是16.13，是否16.8也可以用呢

您好，我按照
https://github.com/zthxxx/react-dev-inspector#usage-with-create-react-app 和
https://github.com/zthxxx/react-dev-inspector#vscode 里面的配置，
配置好我的项目（用 create-react-app 建的 demo 项目），其它的都没有问题，就是点击的时候无法唤起 vscode
我打开控制台也看到发出请求了
http://localhost:3000/__open-stack-frame-in-editor/relative?fileName=src%2FHelloWord.js&lineNumber=5&colNumber=6
命令行输入 code 也能打开 vscode
请问还有哪里没有配置好？

给出如下错误：

browser-external:querystring:3 Uncaught Error: Module "querystring" has been externalized for browser compatibility and cannot be accessed in client code.
    at Object.get (browser-external:querystring:3)
    at gotoEditor (inspect.js:129)
    at Object.handleClickElement [as onClick] (Inspector.js:35)
    at onClick (hightlight.js:55)

• short domain (cname) to inspector.zthxxx.me
• redesign website ui
• add logo
• refactor inspector hotkey response (trigger to display inspector mask immediately) #108
• add changelog
• docs for set windows environment variables for REACT_EDITOR
• build cjs for ssr like used in nextjs
• inspector level comment
• support for monorepo and move listen mouse event from window to Inspector contaniner

of undefined resister

As the title say, when i inspect and click

I will jump here

But don't u think jump to the place it referenced is better ? Or just add the new way of jump

现在的 v10.2.1 版本里面依赖的 immer 版本v1.10.0太低

I have try https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/ but didn't work.

refer to:
https://v2ex.com/t/746186

大神，我引用了你的这个库之后，原先能够通过的测试，就没有办法通过了。能帮忙瞧一下，哪里配置出了问题么？

谢谢

在两个工程里同时使用。都是umi3+ 没有任何其他配置。其中一个返回的是相对路径 一个返回的是绝对路径，请问这是为什么，如何让相对路径返回的是绝对路径啊

npm ERR! [email protected] postinstall: `lerna bootstrap --scope @demo-sites/* && lerna link`

没有装lerna
安装必须依赖lerna环境吗？

你好,我们团队现在有个基于ice js的项目,我想尝试在其中此插件,但各种尝试配置折腾了半天后却无法生效.
大佬有空的时候可以看下在ice.js中如何使用吗,秋泥膏
配置如下:
ice.js 的配置文档:https://ice.alibaba-inc.com/docs/guide/basic/build
//build.config.js

import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'
module.exports = {
    define: {
      env: process.env.NODE_ENV,
    },
    plugins: [
      ['build-plugin-fusion', {
        themePackage:"@alifd/theme-design-pro",
      }],
      (api) => {
        api.onGetWebpackConfig((config) => {
          config.entry('src/index.js');
        });
      },
      "@ali/build-plugin-ice-def",
    ],
    devServer: {
        before: (app) => {
          console.log('launchEditorMiddleware')
          app.use(launchEditorMiddleware)
        }
    },
    babelPlugins: [
        'react-dev-inspector/plugins/babel'
      ],
  }

我是一个正在学习前端的小白，想知道如何在 Remix 项目中配置使用。

First of all thanks for such an amazing project, i do have a suggestion that there should be a UI indicator or sorts, since currently, when i press the hotkey combination, if i don't move the mouse, i do not know that the inspector is active.

那个组合按键模式太长了，给全局挂个类似 window.REACT_DEV_INSPECTOR_TOGGLE()的方法更容易点。

老哥，聊了这么久，看了其他 issues 才发现你是**人

package.json中的node版本要求必须是>=12.0.0

这样低于12.0.0的项目都会安装失败

这样的版本要求是必须的吗？

but the real filePath is /.../project-root/packages/pc-components/src/components/app-card/index.tsx

if u need a demo repo, i will offer it to u later

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMComponentTree.js
17 版本以上 的 react-dom 的 instanceKey 已经更新成 __reactFiber$ 了

This project is creative! Perhaps it can get rid of the extension for VS Code users to simplify the workflow.

VSCode sets up the vscode:// protocol handler that works in browsers. URLs that starts with file will be handled as Open file command.
For example, a link with the URL vscode://file/Users/username/Downloads/test.txt would open /Users/username/Downloads/test.txt for you, if it exists on your drive.

我们的架构是一个主应用，加 n 多个子应用，所有的子应用都通过路由配置加载到主应用上（所以无法在子应用上包裹 Inspector 组件

我是这么进行配置的：
1、在主应用里面增加了 Inspector 组件来包裹入口。
2、在主应用的 webpack 配置里增加对应的 dev-server, loader, process.env.pwd 配置。
3、在子应用里配置 webpack 的 loader 和 process.env.pwd 配置。

但是这样就会导致子应用里面的文件无法跳转，原因是因为 loader 解析的时候，附加在 dom 上的只是一个相对路径

请问是否可以直接在 loader 解析的时候，附加在 dom 上的就是一个绝对地址呢？这样会不会有什么问题？
或者可以直接把 pwd 加在 loader 的配置中，然后在 loader 解析的时候和相对地址拼接（相当于把 gotoEditor 的拼接提前到了 loader 解析阶段，这样是否可行？

项目地址 报错如下 （react-dev-inspector
Public版本 1.6.0）：

next.confing.js

问题描述，用的umi3，且有[@babel/plugin-transform-react-jsx-source]


获取不到absolutePath，有遇到相同问题的吗，很疑惑不知道是哪的问题

react-dev-inspector/plugins/umi/react-inspector 需要支持 umi4

To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more: 老哥这是怎么回事啊？ 添加了REACT_EDITOR=code 也没用

你好，我的项目配置是typescript，webpack使用ts-loader进行编译，请问babel-plugin是在ts-loader之前还是在之后呢

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid schedule: 'Invalid schedule: Failed to parse "schedule:monthly"'

考虑支持 @vitejs/plugin-react-swc 插件吗？

Thanks for review.
In some frameworks like blitz.js,there are a intermediate state for compilation, so the process.cwd() in middleware function "launchEditorMiddleware" will get the error base workplace, so perhaps can provide some options for user customizing their config. Of course, you can have a trick like this

const fixLaunchEditorMiddleware = (req, res, next) => {
const cwd = process.cwd
process.cwd = () => path.resolve(cwd(), "../../")
launchEditorMiddleware(req, res, next)
process.cwd = cwd
}

默认打开sublime 怎么使其默认打开vscode

似乎和bebel有绑定关系，当bebal替换成swc插件失效

node的版本必须12以上吗

qiankun结合react-dev-inspector，在主域中点击子项目的组件，不能打开vscode，不能自动定位组件所在代码。
但是如果单独打开子项目，点击组件，可以自定定位到所在代码。
有什么解决办法吗

如题，页面报错时能回到ide中出错文件的位置吗？

Generally do not have the habit of writing .jsx, more is to write .js

config
    .module
    .rule('inspector')
    .enforce('pre')
    - .test(/\.[jt]sx$/)
    + .test(/\.(tsx|jsx?)$/)