【electron】 客户端调试小技巧

news/2025/1/15 23:02:57/

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


http://www.ppmy.cn/news/415974.html

相关文章

Easy_Trans轻松让你的项目减少30%SQL代码量

什么是Easy_Trans Easy Trans是一款用于做数据翻译的代码辅助插件,利用MyBatis Plus/JPA/BeetlSQL 等ORM框架的能力自动查表,让开发者可以快速的把ID/字典码 翻译为前端需要展示的数据。 easy trans的优点 功能多样 缓存支持 跨微服务翻译支持(User和…

Golang 错误处理

在golang中,错误处理是非常重要的一个方面,因为它可以帮助我们避免程序中的潜在问题,并提供更好的用户体验。如果你是初学者,那么本文将为你介绍如何学习golang中的错误处理,并提供具体的代码示例,以便你更好地理解这个概念。 学习目标: 了解错误处理的基本概念和原则 …

【SpringCloud入门】-- 认识微服务

目录 1. 什么是微服务? 2. 微服务的优势? 3. 单体架构,分布式架构,微服务架构的区别以及优缺点? 4. SpringCloud和Spring Cloud Alibaba是什么? 5. SpringCloud和SpringCloudAlibaba的区别&#xff1f…

Jetson Xavier NX 平台JetPack 5.0.2 版本imx477-stereo camera调试

1. 概述 正在把imx477-stereo camera安装在Jetson NX上 安装在JetPack5.0.2系统上 遇到了一些问题 采集命令: gst-launch-1.0 nvarguscamerasrc sensor_id=0 ! video/x-raw(memory:NVMM),width=2028, height=1520, framerate=30/1, format=NV12 ! nvvidconv flip-me…

Jetson Tx2配置PX4飞控实机开发环境

Jetson Tx2使用 设备 Jetson Tx2板卡(原装或者底板加核心板)带Ubuntu系统电脑或者虚拟机Tx2原装数据线HDMI显示器鼠标键盘 刷机 参考链接 1、【使用NVIDIA SDK Manager刷机NVIDIA Jetson TX2开发套件记录_hlld_的博客-CSDN博客】 https://blog.csd…

Jetson 系列——nvidia jetson xavier nx重新烧录系统

以下方式是windows10的方法,如果你是mac或者linux,可以参看这里的官方文档 使用 sudo apt-get --purge remove python3.6,删除了系统很多文件,ubuntu进不到图形界面了,因此需要重新烧录系统。 烧录系统需要的东西&…

2023年江西省“振兴杯”职业技能大赛 “计算机软件测试员”职业技能竞赛 接口测试需求文档

2023年江西省“振兴杯”职业技能大赛 “计算机软件测试员”职业技能竞赛 接口测试需求文档 (样题) 1、执行接口测试 本部分按照要求,执行接口测试;使用接口测试工具PostMan,编写脚本、配置参数、执行接口测试并且截图&…

英伟达NVIDIA Jetson 系列 Xavier、TX2等系统换源

英伟达NVIDIA Jetson 系列 Xavier、TX2等系统换源 寻找合适的源更改APT配置文件 Jetson系列像Xavier、TX2等产品刷机过后默认的软件更新源是主服务器的源,更新的时候相当的慢,在X86的机器上可以通过界面的方式换源,点击设置然后选择Software …