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对象上