移动端、第三方集成应用内置浏览器里如何调试前端代码?

简介: 移动端、第三方集成应用内置浏览器里如何调试前端代码?

飞书内置浏览器里如何调试前端代码?

实现原理

飞书官网针对【在公司内网环境下,如何确保飞书正常使用?】问题给出了两个解决方案:

  • 使用系统代理
  • 使用 HTTP 代理

详情可见:飞书-在公司内网环境下,如何确保飞书正常使用?

这里我们采用第一种,即使用系统代理方式。

原理:在代理工具里配置远程映射(map remote),将请求进行重定向,然后用重定向后的内容来响应请求的内容。再开启飞书的代理模式,同步当前的代理设置,使得飞书能够同步此映射关系。

实现步骤

step1-飞书客户端进行网络配置,使用系统代理

飞书客户端退出登录后在登陆界面进行网络设置:

网络异常,图片无法展示
|

step2-设置浏览器代理的代理设置

这里需要一个代理工具,比如Proxyman。

根据所需进行配置,比如是前端+api全都走本地? 还是 前端走本地,api服务走线上?下面进行了后者的配置例子。

如果需要达到前端工程是本地的,而api服务是线上的,则进行如下配置:

test.cn/main* → 本地ip

这里的意思是:map from test.cn/main* to localhost:3000 ——当进入项目应用之后,访问test.cn/main时会请求入口文件index.html,这个入口文件通过代理会重定向至本地的,而在本地的前端项目,就会去加载js、css等资源文件,这个资源文件路径是/static,所以有了下一行的map配置。

test.cn/static* → 本地ip

这样的话,当进入项目应用之后,访问test.cn/mian时会请求入口文件index.html,并加载其中插入的js、css等静态资源。而请求/api/v1时还是请求的线上服务。

网络异常,图片无法展示
|

step3-调试工具模拟浏览器控制台

这里需要一个工具,模拟出现浏览器控制台。 比如eruda-npm,它有利于在手机端、第三方应用内置浏览器调试,模拟控制台。

直接在前端项目的入口文件index.html里引入:

<script src="<https://cdn.jsdelivr.net/npm/eruda>"></script>
<script>eruda.init();</script> 
复制代码

以上步骤完成之后,前端更新代码,在飞书内置浏览器里也就可以看到实时更新的网页了。

移动端、其他第三方应用内置浏览器里如何调试前端代码?

在移动端调试比在飞书内置浏览器里调试更加简单,只需要跳过前两步,使用第三步骤即可。



目录
打赏
0
0
0
0
3
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
147 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
堆叠集成策略的原理、实现方法及Python应用。堆叠通过多层模型组合,先用不同基础模型生成预测,再用元学习器整合这些预测,提升模型性能
本文深入探讨了堆叠集成策略的原理、实现方法及Python应用。堆叠通过多层模型组合,先用不同基础模型生成预测,再用元学习器整合这些预测,提升模型性能。文章详细介绍了堆叠的实现步骤,包括数据准备、基础模型训练、新训练集构建及元学习器训练,并讨论了其优缺点。
169 3
Airweave:快速集成应用数据打造AI知识库的开源平台,支持多源整合和自动同步数据
Airweave 是一个开源工具,能够将应用程序的数据同步到图数据库和向量数据库中,实现智能代理检索。它支持无代码集成、多租户支持和自动同步等功能。
73 14
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
84 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
轻松集成私有化部署Dify文本生成型应用
Dify 是一款开源的大语言模型应用开发平台,融合了后端即服务(Backend as Service)和 LLMOps 的理念,使开发者能快速搭建生产级生成式 AI 应用。通过阿里云计算巢,用户可以一键部署 Dify 社区版,享受独享的计算和网络资源,并无代码完成钉钉、企业微信等平台的应用集成。本文将详细介绍如何部署 Dify 并将其集成到钉钉群聊机器人和企业微信中,帮助您轻松实现 AI 应用的定义与数据运营,提升工作效率。
轻松集成私有化部署Dify文本生成型应用
FlowiseAI:34K Star!集成多种模型和100+组件的 LLM 应用低代码开发平台,拖拽组件轻松构建程序
FlowiseAI 是一款开源的低代码工具,通过拖拽可视化组件,用户可以快速构建自定义的 LLM 应用程序,支持多模型集成和记忆功能。
118 14
FlowiseAI:34K Star!集成多种模型和100+组件的 LLM 应用低代码开发平台,拖拽组件轻松构建程序
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
100 17
使用Web浏览器访问UE应用的最佳实践
Spring Boot 与 Apache Kafka 集成详解:构建高效消息驱动应用
Spring Boot 与 Apache Kafka 集成详解:构建高效消息驱动应用
87 1
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
324 14

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等