【electron】 客户端调试小技巧

1、谷歌浏览器输入:chrome://inspect打开开发者工具 可以方便拦截electron内的请求,也可以通过f12的开发者工具中的source打断点。
虽然在electron客户端内也能审查元素。
在这里插入图片描述

在这里插入图片描述

PS:但是其有局限性,如果是窗体套窗体(webview),就调试不到了,用浏览器自带的delTools可以方便拦截并且打断点调试

2、通过在source的输入框(通过ctrl+p打开)输入“:321” 可以快速定位到321行

3、通过electron客户端新开窗体承载的webview,其调试方式是需要先在webview窗体内,使用快捷键ctrl+shift+I(windows写法)打开开发者工具,再在f12的Elements内找到webview标签,鼠标左键点击选中webview标签,再在console中输入$0.openDevTools();enter执行后,会自动打开webview的开发者工具。

4、在electron中打开一个新窗体承载的webview容器,无法通过postMessage与其他url通信,有可能是因为没有开通权限(白名单没有添加)

附:项目实施的一些实现google和office 365的auth2中遇到的卡点难题

大背景前提:采用electron+micro-app架构(京东微前端,基座应用)+子应用。

1、micro-app的沙箱问题,在沙箱开启后,无法调用google auth2接口,关闭沙箱后能正常使用

2、针对第三方请求,谨慎处理请求头的添加,避免第三方请求由于严格安全校验导致请求失败

3、桌面、子应用内的iframe缺少执行jsbridge的宿主环境,缺少全局属性及数据

4、子应用中打开窗体,仍旧无法将请求发送完全,react-google-login组件实现的谷歌认证按钮无法静默请求成功谷歌认证接口

5、采用邮箱内封装的request.post请求谷歌接口,请求发送不出去,但axios可以

6、采用electron打开一个窗体内嵌webview的方式打开授权页,在webview内部无法关闭webview授权页面本身(因为是窗体,但主应用本身没有关闭的api提供),并且无法通过协议的方式传递消息(没有开放window.open权限),使用postMessage传递消息在主应用也无法监听到

7、独立的窗体承载webview实现auth2是不需要用到我们应用内的用户认证相关的逻辑的,又因为所有路由都会默认在BasicLayout布局组件里渲染,且在BasicLayout中有一些用户获取及窗体tab等相关操作,注意,这意味着里边的获取用户信息,获取窗体tab等等信息也会同时加载,但我们只是单纯的一个auth2认证页面,不需要这些,因此我们需要把auth2的路由单独提到最顶级,和/路径对应的BasicLayout布局组件并列,并且需要保证auth2的路由在/路由上方,这是为了防止/在上方时,默认把auth2组件的路由第一级给匹配到,这样会导致下面的与/路由同级的auth2路由不再被匹配。
PS:使用preload的方式在预加载时注入全局方法到webview里的window对象上

猜你喜欢

转载自blog.csdn.net/hzxOnlineOk/article/details/131242324