whistle——真机移动端页面调试查看修改真机端的页面dom结构及样式

fafa-coding fafa-coding     2022-12-08     722

关键词:

1、查看、修改真机端的页面DOM结构及样式【参考——https://imweb.io/topic/5981a34bf8b6c96352a59401】;

1.0、需要配置的rule——域名 weinre://随便某个分类命名【如:wq.jd.com weinre://test2——test2只是作为weinre的分类,防止一个weinre调试页面出现太多的连接】;

技术图片

1.1、真机上访问某个页面,如访问微信下的发现》购物页面;

1.2、点击weinre下的,刚创建的分类test2,跳到http://127.0.0.1:8899/weinre/client/#test2页面;

技术图片

技术图片

1.3、http://127.0.0.1:8899/weinre/client/#test2页面下,可在Elements下修改真机页面的dom元素、样式

技术图片

 

 1.4、在http://127.0.0.1:8899/weinre/client/#test2页面下,也可在Console下写js脚本,回车后,真机页面上会执行对应的js脚本;

 技术图片

 

移动端真机调试方法

...本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。1.Mac++iPhone+ Lightning+Safari浏览器步骤:1)用:Lighting线将mac与iphone相连2)iphone打开Web检查器(设置->Safari->高级->Web检查器... 查看详情

移动端真机调试实战经验(代码片段)

...然有一定的效果,但是还是不能完全模拟,我们还需要在真机环境下测试。本文介绍的 查看详情

调试移动端页面

...设备页面时,常用CHROME自带的模拟移动设备外,还需要有真机去测试一下,而不是布到测试服务上去之后,再使用真机测试。第一步:手机连接上电脑的局域网,之前在网上找的教程,想的是可能是手机和电脑都使用公司的无线... 查看详情

移动端真机调试

移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决... 查看详情

vue_真机调试页面

使用vue开发也有一段时间,是说我太懒了,还是说太懒了。得总结总结的。之前在开发的时候都是,npmrunbuild把页面打包后再上传到代码库上线用手机看页面效果。样式调整,嗯,很麻烦很傻的。今天决心要解决这个问题,的确... 查看详情

移动端真机调试终极利器-browsersync(使用方法)

1.安装Node.jsBrowserSync是基于Node.js的,是一个Node模块,如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于MacOS,Windows和Linux。2.安装BrowserSync您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端... 查看详情

试说移动端是如何调试的?

移动端调试;(1)模拟手机调试;(2)真机调试之android手机+Chrome;(3)真机调试之iphone+safai;(4)UC浏览器;(5)微信内置浏览器调试;(6)调试工具debuggap;(7)抓包;细节参考:https://segmentfault.com/a/1190000005964730 查看详情

移动端调试

xx</a使用spy-debugger调试微信或者移动端的网页移动端真机调试</a 查看详情

移动端web开发真机测试

关于移动端WEB开发真机测试亲身实验的一些体会。之前的开发都用Chrom的模拟,但是效果毕竟不如真机,总结几点吧,至于详细的安装过程网上都有教程http://www.cnblogs.com/xiaohuochai/p/5512051.html,这里就不在赘述。BrowserSync是基于Node... 查看详情

真机调试

...rwiththespecifiedhostnamecouldnotbefound.xcode发出这个错误 一般是真机网络和pc端不在同一个网段 检测真机网络重新连接wifi不行safari激活 就可以进行测试在ios开发中经常出现“ unrecognizedselectorsenttoinstance ”这个错误。现在发现的原因... 查看详情

移动端手机调试的几种方法

...1、ChromeDevTools(谷歌浏览器)的模拟手机调试2、IOSSafari真机调试3、ChromeDevTools远程调试Android这种调试方式不仅能用于模拟手机调试还是主要的PC端页面调试的方式,这里主要说用于手机调试。a.谷歌浏览器的开发者工具,可以参... 查看详情

手机测试vue移动端项目(真机联调)

参考技术A1.获取电脑网络ip地址(注意:手机端与电脑端需要在同一无限局域网下)命令行中输入:ipconfig回车后可以获取到ip地址:3.电脑将项目运行起来4.手机任意浏览器打开255.255.240.0:8080地址 查看详情

vscode+firefox实现前端移动真机测试

需要配件:1.安装有火狐浏览器的移动端(手机);2.安装有火狐浏览器和vscode的pc(电脑);3.在vscode安装LiveServer插件 4.安装之后vscode右下角会有GoLive这个标识 5.点击GoLive会在默认浏览器打开一个网页,我设置的火狐为默认浏览器,... 查看详情

uni开启真机调试;

手机开启usb调试功能需要在电脑端安装对应的手机助手使用管理员身份运行hbuildX3.添加path变量参照:https://www.cnblogs.com/gzhjj/p/11933390.html待续 查看详情

如何在移动设备上调试网页

这篇文章所讲到的方法已经过时,请移步《移动端真机调试终极利器-BrowserSync》,欢迎分享更多工具。手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和And... 查看详情

android修改ro.debuggable真机adb调试所有进程

参考技术A前置条件:1、已解锁、ROOT2、安装Magisk输入以下命令:adbshell#adb进入命令行模式su#切换至超级用户magiskresetpropro.debuggable1stop;start;#一定要通过该方式重启此方法为临时修改,重启后会失效;不过一般使用足够了,永久修... 查看详情

真机调试

1.真机一台2.数据线一根3.打开USB调试的开关(进入开发者模式)1.开发者模式如何进入,不同厂商是不一样的。2.可能需要百度。4.在电脑上安装对应的驱动1.需要从厂商的官网下载,或者找一个类似360手机助手这种软件,自动下... 查看详情

真机调试

...rwiththespecifiedhostnamecouldnotbefound.xcode发出这个错误 一般是真机网络和pc端不在同一个网段 检测真机网络重新连接wifi不行safari激活 就可以进行测试在ios开发中经常出现“ unrecognizedselectorsenttoinstance ”这个错误。现在发现的原因... 查看详情