都是Nginx前缀惹的祸
|
这里也可以自定义你喜欢的快捷键，用来开启 debug 模式。 开启了 debug 模式之后，鼠标 hover 到你想要调试的组件，就会展现出遮罩框，再点击一下，就会自动在 VSCode 中打开对应的组件文件，并且跳转到对应的行和列。 那么关键在于，这个跳转其实是借助 fetch 发送了一个请求到本机的服务端，利用服务端执行脚本命令如 code src/Inspector/index.ts 这样的命令来打开 VSCode，这就要借助我说的第三步，启动本地服务并引入中间件了。 本地服务 还记得 create-react-app 或者 vue-cli 启动的前端项目，在错误时会弹出一个全局的遮罩和对应的堆栈信息，点击以后就会跳转到 VSCode 对应的文件么?没错，react-dev-inspector 也正是直接借助了 create-react-app 底层的工具包 react-dev-utils 去实现。(没错 create-react-app 创建的项目自带这个服务，不需要手动加载这一步了) react-dev-utils 为这个功能封装了一个中间件：errorOverlayMiddleware[3]
其实代码也很简单，就是监听了一个特殊的 URL： 可以在 预览网站[2] 体验一下。 使用方式 这个插件功能很强大，代码也写得很漂亮，唯一的缺点就是文档不是很完善，我阅读了源码总结了成功接入这个插件需要的几个步骤，缺一不可。 简单来说就是三步： 构建时：
运行时：需要在 React 组件的最外层包裹 Inspector 组件，用于在浏览器端监听快捷键，弹出 debug 的遮罩层，在点击遮罩层的时候，利用 fetch 向本机服务发送一个打开 VSCode 的请求。 本地服务：需要启动 react-dev-utils 里的一个中间件，监听一个特定的路径，在本机服务端执行打开 VSCode 的指令。 下面简单分析一下这几步到底做了什么。 原理简化 构建时
首先如果在浏览器端想知道这个组件属于哪个文件，那么不可避免的要在构建时就去遍历代码文件，根据代码的结构解析生成 AST，然后在每个组件的 DOM 元素上挂上当前组件的对应文件位置和行号，所以在开发环境最终生成的 DOM 元素是这样的： （编辑：唐山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
