zthxxx / react-dev-inspector Goto Github PK
View Code? Open in Web Editor NEWjump to local IDE code directly from browser React component by just a simple click
Home Page: https://react-dev-inspector.zthxxx.me
License: MIT License
jump to local IDE code directly from browser React component by just a simple click
Home Page: https://react-dev-inspector.zthxxx.me
License: MIT License
给出如下错误:
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)
在两个工程里同时使用。都是umi3+ 没有任何其他配置。其中一个返回的是相对路径 一个返回的是绝对路径,请问这是为什么,如何让相对路径返回的是绝对路径啊
使用 ant-design-pro
开发的时候发现了 react-dev-inspector
插件。后来自己使用 umi 3.x
搭框架时,同样的环境、配置和操作,ant-design-pro
表现正常,可是自己搭的 umi 3.x
一直无法唤醒 vscode
,请问这个问题怎么解决?
安装 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
。
您好,我按照
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
请问还有哪里没有配置好?
我们的架构是一个主应用,加 n 多个子应用,所有的子应用都通过路由配置加载到主应用上(所以无法在子应用上包裹 Inspector 组件
我是这么进行配置的:
1、在主应用里面增加了 Inspector 组件来包裹入口。
2、在主应用的 webpack 配置里增加对应的 dev-server, loader, process.env.pwd 配置。
3、在子应用里配置 webpack 的 loader 和 process.env.pwd 配置。
但是这样就会导致子应用里面的文件无法跳转,原因是因为 loader 解析的时候,附加在 dom 上的只是一个相对路径
react-dev-inspector/src/plugins/webpack/inspector-loader.ts
Lines 93 to 96 in 65279bf
react-dev-inspector/src/Inspector/utils/inspect.ts
Lines 38 to 45 in 65279bf
请问是否可以直接在 loader 解析的时候,附加在 dom 上的就是一个绝对地址呢?这样会不会有什么问题?
或者可以直接把 pwd 加在 loader 的配置中,然后在 loader 解析的时候和相对地址拼接(相当于把 gotoEditor 的拼接提前到了 loader 解析阶段,这样是否可行?
我是一个正在学习前端的小白,想知道如何在 Remix 项目中配置使用。
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
}
你好,我的项目配置是typescript,webpack使用ts-loader进行编译,请问babel-plugin是在ts-loader之前还是在之后呢
默认打开sublime 怎么使其默认打开vscode
package.json
中的node版本要求必须是>=12.0.0
这样低于12.0.0
的项目都会安装失败
这样的版本要求是必须的吗?
of undefined resister
npm ERR! [email protected] postinstall: `lerna bootstrap --scope @demo-sites/* && lerna link`
没有装lerna
安装必须依赖lerna环境吗?
似乎和bebel有绑定关系,当bebal替换成swc插件失效
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.
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 也没用
react-dev-inspector/plugins/umi/react-inspector 需要支持 umi4
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>
)
}
这块是文档上的错误,还是我的使用方式哪里错了呢 :(
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?)$/)
老哥,聊了这么久,看了其他 issues 才发现你是**人
qiankun结合react-dev-inspector,在主域中点击子项目的组件,不能打开vscode,不能自动定位组件所在代码。
但是如果单独打开子项目,点击组件,可以自定定位到所在代码。
有什么解决办法吗
你好,我们团队现在有个基于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'
],
}
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMComponentTree.js
17 版本以上 的 react-dom 的 instanceKey 已经更新成 __reactFiber$ 了
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()),
)
那个组合按键模式太长了,给全局挂个类似 window.REACT_DEV_INSPECTOR_TOGGLE()的方法更容易点。
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“
I have try https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/ but didn't work.
如题?
inspector.zthxxx.me
如题,页面报错时能回到ide中出错文件的位置吗?
如题
我看了peerDependencies,要求react是16.13,是否16.8也可以用呢
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"'
项目编译 js 部分最近会整体从 babel 迁移至 esbuild,打包还是用 webpack,作者考虑支持 esbuild 吗?
项目地址 报错如下 (react-dev-inspector
Public版本 1.6.0):
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.