H5项目支持么？Chrome://inspect/#devices里是否支持？

shenhaidada commented 1 year ago

用安卓机inspect项目之后，需要将Inspector的props active设置为true弹窗才可以显示，但是点击没反应。
键盘快捷键 ctrl + cmd + shift + c 不生效

shenhaidada commented 12 months ago

问题已解决，是支持键盘快捷键调起的。只是项目是由webpack构建的，因为ts-loader在babel-loader之前生效，所以需要修改tsconfig.json中的jsx为react-native/perverse，保存jsx代码，让官方的@react-dev-inspector/babel-plugin插件完成信息挂载。不过对于h5项目的ui交互不太友好，需要鼠标长按来hover，这点看看是否可以改进。同时也可以考虑官方文档加一下上边的解决方法，让用webpack的同学也可以快速接入

zthxxx commented 12 months ago

@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 效果我去确认下原因

zthxxx commented 12 months ago

@shenhaidada 另外问下你们对 react-dev-inspector 的使用方式和 chrome://inspect/#devices 有什么关系？我理解这个库就是纯前端页面 + HTTP API 的实现方式，应该不需要通过 chrome inspect 做什么操作才对

shenhaidada commented 12 months ago

@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
然后调用的问题没有了，可以直接使用快捷键调起

zthxxx / react-dev-inspector

H5项目支持么？Chrome://inspect/#devices里是否支持？ #155