美文网首页
手机端调试大全

手机端调试大全

作者: sitherine | 来源:发表于2019-04-10 09:35 被阅读0次

1.如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面(摘自:https://www.cnblogs.com/JinQingsong/p/6591830.html)
使用chrome remote debug出现空白或者404,解决方式(摘自:https://www.jianshu.com/p/7be573c2f183)

2.如何使用电脑上的safari浏览器来调试ios手机上的移动端页面(摘自:https://blog.csdn.net/guoyuyanmen/article/details/52485439)
3.charles调试,证书安装
https://blog.csdn.net/zpf_nevergiveup/article/details/78994481

1. [如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面]

第一步 首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示 image

第二步 打开你电脑的上谷歌浏览器,调出控制台,点击如图所示这个3旁边的3个点,这里面有更多的功能,点击More tools,在之后的页面中discover USB devices选项打钩,用你数据链连接你的电脑和手机,确认后,左侧devices会显示连接设备,代表链接成功。


image
image
image
image

第三步 在电脑上的谷歌浏览器输入这个网址chrome://inspect/

image 第四步 手机端打开界面(部分app应用不支持,可用谷歌浏览器打开界面),输入你想要调试的网页,我一般都是把网页放到我的本地服务器,在手机浏览器上输入我的本地网址,如果是一个百度页面的例子 image

最后一步,我们点击inspect就可以审查手机页面了,审查方法就跟审查PC网页一样了。


image
访问 `chrome://inspect/#devices`出现空白页或出现404,用以下方式排查可基本解决问题
1.能够访问google.com
2.手机开启usb调试模式
3.允许电脑访问手机
4. 清除一下这里的缓存 chrome://appcache-internals/# 

safari调试iPhone app web页面

Safari设置
打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了


image.png

iPhone设置
打开iPhone手机设置app 选择Safari,找到高级选项,有JavaScript开关web检查器开关,讲两个开关都打开


image.png

调试
到此,准备工作完成。这时候讲iPhone链接到mac上,打开Safari浏览器,运行手机app里面的web页面,在开发菜单中选择连接的手机,找到调试的网页,就能在Safari里面调试了

image.png

Safari调试窗口


image.png

Safari控制台
在Safari中鼠标右键,选择检查元素,就可以看见Safari控制台了。如果看不到检查元素选项,依照上面Safari设置打开开发选项

相关文章

  • 手机端调试大全

    1.如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面(摘自:https://www.cnblogs.com/...

  • 移动端调试大全

    https://segmentfault.com/a/1190000005964730移动端调试大全【聊一聊系列】...

  • 手机端调试

    将手机连接到PC的同一个网络 用手机访问PC提供的 HTTP 服务(npm—— node.js ——http-se...

  • 手机端调试

    以前一直用charles调试pc端项目 ,通过map remote配置 可以用域名访问远程接口,不会被限制,通过r...

  • 网页真机调试

    移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端...

  • 移动端真机调试

    移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机...

  • 前端手机端调试

    当前端在进行手机端调试的时候,遇到bug,但却不能一眼看出什么问题的时候,手机端又没有控制台,该如何解决呢? 下面...

  • 调试工具的使用

    开启调试窗口 windows 平台: f12 调试窗口介绍 指针: 选择页面中的元素 手机: 使用移动端界面调试 ...

  • 面向对象01-调试工具

    开启调试窗口 windows 平台: f12 调试窗口介绍 指针: 选择页面中的元素 手机: 使用移动端界面调试 ...

  • 利用spy-debugger进行移动端真机调试

    平常我们在进行移动端开发的时候都是用PC端的手机模拟器进行调试。但是,PC端调试和最终在移动端呈现的效果仍然存在差...

网友评论

      本文标题:手机端调试大全

      本文链接:https://www.haomeiwen.com/subject/guziiqtx.html