Comments (4)
问题已解决,是支持键盘快捷键调起的。只是项目是由webpack构建的,因为ts-loader在babel-loader之前生效,所以需要修改tsconfig.json中的jsx为react-native/perverse,保存jsx代码,让官方的@react-dev-inspector/babel-plugin插件完成信息挂载。
不过对于h5项目的ui交互不太友好,需要鼠标长按来hover,这点看看是否可以改进。同时也可以考虑官方文档加一下上边的解决方法,让用webpack的同学也可以快速接入
from react-dev-inspector.
@shenhaidada 能否提供一个相对较小的 h5 项目环境作为我去改进的参考呢?
组件的 props
active
参数应该不需要默认设置的,如果设置了active={true}
则表示受控组件的模式,要关闭就需要外层手动再设置active={false}
;PS: 对于移动端交互的问题,在库优化之前可以才用变通方式解决:因为设计有
active
参数,移动端可以在开发模式上先在自己项目中往页面角落里增加一个半透明悬浮的 corner dev button,用来控制<Inspector>
组件的active
参数。使用参考暂时可以看 Storybook 中的
<ControlState>
组件 -> https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.stories.tsx移动端鼠标 hover 效果我去确认下原因
感谢回复
- 不好意思h5项目是公司的项目哈,但是我理解pc网页使用cmd+shift+M打开device toolbar是一样的效果,可以用这个测试一下hover
- 然后调用的问题没有了,可以直接使用快捷键调起
from react-dev-inspector.
@shenhaidada 能否提供一个相对较小的 h5 项目环境作为我去改进的参考呢?
组件的 props active
参数应该不需要默认设置的,如果设置了 active={true}
则表示受控组件的模式,要关闭就需要外层手动再设置 active={false}
;
PS: 对于移动端交互的问题,在库优化之前可以才用变通方式解决:因为设计有 active
参数,移动端可以在开发模式上先在自己项目中往页面角落里增加一个半透明悬浮的 corner dev button,用来控制 <Inspector>
组件的 active
参数。
使用参考暂时可以看 Storybook 中的 <ControlState>
组件 -> https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/inspector/src/Inspector/Inspector.stories.tsx
移动端鼠标 hover 效果我去确认下原因
from react-dev-inspector.
@shenhaidada 另外问下你们对 react-dev-inspector
的使用方式和 chrome://inspect/#devices
有什么关系? 我理解这个库就是纯前端页面 + HTTP API 的实现方式,应该不需要通过 chrome inspect 做什么操作才对
from react-dev-inspector.
Related Issues (20)
- 功能需求: umi4 支持 [v1.8.6 已支持] HOT 15
- 在swc-loader中失效 HOT 1
- 今天升级了包 umi3打包失败,昨天是正常的 HOT 3
- 希望作者尽快修复1.8.3 存在的启动报错的问题 HOT 2
- 按README文档使用,Add Inspector React Component部分似乎有点问题 HOT 4
- vite 4.x 中使用 @vitejs/plugin-react-swc 插件,编译报错 HOT 1
- vite4中获取的行数并不准确 HOT 2
- vscode insiders
- 获取不到absolutePath HOT 3
- codeInfo 何时返回绝对路径 何时返回相对路径啊 HOT 1
- 生产环境下,不应该打包进js文件 HOT 7
- 需要使用 swc 版本的插件吗? HOT 4
- 不支持react 17以下版本? HOT 1
- [email protected] Inspector component onClientElement cannot get codeInfo HOT 2
- Duplicate with the official devtool feature?(官方的 Devtool 是否已经实现类似功能) HOT 1
- 关于插件的使用 HOT 1
- 新版本vscode中,打不开指定文件了 HOT 1
- Feature Request: Adding an option to view or open the parent element. HOT 1
- webstorm 的代码跳转方法已经过时 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dev-inspector.