远程调试---在电脑上devtools调试运行在手机上的应用

1、启动项目–以vite项目为例:先ipconfig查看ip地址 ,然后在vite中配置host为ip地址

在这里插入图片描述

2、手机上查看项目:保证手机和电脑在同一局域网, 在手机浏览器打开我们vite启动的项目地址,

3、使用chii进行远程调试

(1) 安装 ` npm install chii -g  `
(2)启动  `chii start -p 8080` 
(3)在调试项目引入 `http://ip地址:8080/target.js`

4、调试 在浏览器中打开页面 http://ip地址:8080/ 就可以看到我们所有远程连接的目标页面,点击inspect即可在浏览器中定位到我们的手机页面元素,我们想要在手机上定位元素时,先点击devtools中的旋转元素按钮,然后在手机上按钮想要选择的元素就可以看到和在浏览器中选择元素一样的效果

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d940e04fe9114e67a121b038c35a9cb9.png
在这里插入图片描述

在这里插入图片描述

4、可以自己写页面显示所有连接的设备信息, 可以访问以下接口

http://ip地址:8080/targets

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/80281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【程序员AI入门:开发】11.从零构建智能问答引擎:LangChain + RAG 实战手册

1、技术选型 组件推荐方案说明文本嵌入模型sentence-transformers/all-MiniLM-L6-v2轻量级且效果较好的开源模型向量数据库FAISS高效的本地向量检索库大语言模型GPT-3.5/开源LLM(如ChatGLM3)根据资源选择云端或本地模型文档处理框架LangChain简化RAG流程…

【Linux基础】文件查找和文本处理指令

目录 grep命令 find命令 tar命令 head命令 tail命令 wc命令 tee命令 grep命令 作用:在文件中搜索匹配特定模式的文本行,并将结果输出到标准输出(通常是终端)。 基本用法: grep [选项] 搜索模式 [文件名] 常用…

云轴科技ZStack入选赛迪顾问2025AI Infra平台市场发展报告代表厂商

DeepSeek凭借低成本、高性能、开源优势带来的蝴蝶效应依然在持续影响企业AI应用部署。尤其在数据安全备受关注的背景下,私有化部署已经成为企业应用AI大模型的优选方案。赛迪顾问在近期发布的《2025中国AI Infra平台市场发展研究报告》中认为,在推理算力…

从零开始跑通3DGS教程:(四)修改(缩放、空间变换)colmap生成的sfm结果

写在前面 本文内容 本文所属《从零开始跑通3DGS教程》系列文章; 通过colmap进行的sfm的普通方式会丢失场景的物理尺度信息,并且并不在符合一般认知的坐标系下,本文将读取colmap生成的点云和相机pose,将其进行空间变换和缩放之后&a…

RK3568-OpenHarmony(1) : OpenHarmony 5.1的编译

概述: 本文主要描述了,如何在ubuntu-20.04操作系统上,编译RK3568平台的OpenHarmony 5.1版本。 搭建编译环境 a. 安装软件包 sudo apt-get install git-lfs ruby genext2fs build-essential git curl libncurses5-dev libncursesw5-dev openjdk-11-jd…

vue+tsc+noEmit导致打包报TS类型错误问题及解决方法

项目场景: 提示:这里简述项目相关背景: 当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vuetscnoEmit导致打包报TS类型错误问题及…

Js 判断浏览器cookie 是否启用

验证时 google浏览器 135.0.7049.117 不生效 cookie.html <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>Cookie 检测</title> </head> <body><h1>检测是否启用 Cookie<…

Lambda表达式解读

本文通过具体案例演示函数式接口Function<T,R>的三种实现方式演变过程。 一、传统匿名内部类实现 Integer resInt1 t1(new Function<String, Integer>() {Overridepublic Integer apply(String s) {int i Integer.parseInt(s);return i;} });实现特点&#xff1…

等价无穷小代换

理解&#xff1a; 函数某一点的值可以使用泰勒展开式表示&#xff0c;&#xff08;低阶无穷小 高阶无穷小&#xff09;&#xff0c;主要有低阶无穷小决定。 计算极限的时候&#xff1a; 乘除关系随便换&#xff0c;不影响各个式子的低阶无穷小加减关系&#xff1a; &#xf…

护网HVV初级蓝队面试题总结

struts2原理特征 原理:默认的content-type解析器会把用户传来的数据直接当成代码执行&#xff0c;造成rce特征:ognl表达式&#xff0c;memberaccess字段&#xff0c;可以通过catalina日志过滤关键信息查找攻击特征ongl表达式可以被当作代码执行&#xff0c;其中的类为defaulta…

Web3 实战项目项目部署到 GitHub 和上线预览的完整指南

目录 &#x1f680; 一、部署到 GitHub ✅ 前置准备 &#x1f9f1; 部署步骤&#xff1a; 1. 创建一个 GitHub 仓库 2. 上传项目文件 方法一&#xff1a;使用 Git 命令行 方法二&#xff1a;直接上传 &#x1f310; 二、通过 GitHub Pages 免费上线 DApp&#xff08;前端…

3.优惠券秒杀

3.1 全局唯一 ID 当用户抢购时&#xff0c;就会生成订单并保存到 tb_voucher_order 这张表中&#xff0c;而订单表如果使用数据库自增 ID 就存在一些问题&#xff1a; id 的规律性太明显 受单表数据量的限制 场景分析一&#xff1a;如果我们的 id 具有太明显的规则&#xf…

AI日报 · 2025年5月07日|谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本),大幅提升编码与视频理解能力

1、谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本)&#xff0c;大幅提升编码与视频理解能力 谷歌于5月6日提前发布 Gemini 2.5 Pro 预览版 (I/O 版本)&#xff0c;为开发者带来更强编码能力&#xff0c;尤其优化了前端与UI开发、代码转换及智能体工作流构建&#xff0c;并在WebDe…

Python+ffmpeg 实现给视频添加字幕

创作灵感 孩子学校经常留作业&#xff0c;需要提交一段录制的视频&#xff0c;视频上要求添加学校、班级、姓名等信息的字幕&#xff0c;手机自带的相机软件字幕添加位置要么只能添加在视频正中&#xff0c;要么无法添加多行文本&#xff0c;要么只能添加在片头或者片尾&#…

OpenLayers 精确经过三个点的曲线绘制

OpenLayers 精确经过三个点的曲线绘制 根据您的需求&#xff0c;我将提供一个使用 OpenLayers 绘制精确经过三个指定点的曲线解决方案。对于三个点的情况&#xff0c;我们可以使用 二次贝塞尔曲线 或 三次样条插值&#xff0c;确保曲线精确通过所有控制点。 实现方案 下面是…

Django缓存框架API

这里写自定义目录标题 访问缓存django.core.cache.cachesdjango.core.cache.cache 基本用法cache.set(key, value, timeoutDEFAULT_TIMEOUT, versionNone)cache.get(key, defaultNone, versionNone)cache.add(key, value, timeoutDEFAULT_TIMEOUT, versionNone)cache.get_or_se…

Linux系统管理与编程17:自动化部署ftp服务

兰生幽谷&#xff0c;不为莫服而不芳&#xff1b; 君子行义&#xff0c;不为莫知而止休。 #virtual用户管理&#xff1a;passerbyA、captain和admin三个虚拟用户 # passerbyA只能看&#xff0c;captain可看读写上传&#xff0c;但不能删除。admin全部权限 [rootshell shell]…

2025python学习笔记

一.Python语言基础入门 第一章 01.初识Python Python的起源&#xff1a; 1989年&#xff0c;为了打发圣诞节假期&#xff0c;Gudio van Rossum吉多范罗苏姆&#xff08;龟叔&#xff09;决心开发一个新的解释程序&#xff08;Python维形&#xff09;1991年&#xff0c;第一个…

STM32单片机的快速成长路径规划

一、基础准备阶段&#xff08;1-2周&#xff09; C语言核心技能 重点掌握&#xff1a;指针操作、结构体、枚举、位操作、函数指针&#xff08;回调函数基础&#xff09;实践项目&#xff1a;通过51单片机或STM8完成LED控制、按键检测等基础项目&#xff0c;熟悉寄存器配置和调试…

torch.nn.init.uniform_

nn.init.uniform_ 是 PyTorch 中用于初始化张量&#xff08;tensor&#xff09;的一个函数&#xff0c;它的作用是将张量的值填充为从均匀分布中采样的随机数。 详细说明&#xff1a; 函数&#xff1a; torch.nn.init.uniform_(tensor, a0., b1.)tensor&#xff1a;需要被初始…