chrome浏览器远程调试移动端Web页面

1.Android系统的移动设备

  a.开启 USB调试模式;具体设置请自行百度;

  b.用USB数据线连接手机设备,并同意这台计算机进行USB调试;

  c.在浏览器地址栏输入chrome://inspect 或者about:inspec;可以显示出设备的名称,在下图中 ‘2013023’ 即为设备名称;

  d.在浏览器中随意打开一个页面或者在app中打开一个webview的页面,出现如下图所示 点击 inspect 即可调试

提示:再调试webview里的页面的时候,若无法显示出webview中打开页面的链接,则需要在app内设置 setWebContentsDebuggingEnabled 的值为 true

2.ios系统的移动设备

  使用ios-webkit-debug-proxy来配置调试,详细介绍请参考官方说明 https://github.com/google/ios-webkit-debug-proxy/

这里只介绍在windows系统上的安装调试

a.安装scoop,安装scoop之前检查Windows PowerShell 的版本,并确保版本不低于3

在系统的搜索中输入 Windows PowerShell ,出现类似命令行的窗口,再输入 $PSVersionTable.PSVersion 命令,  即可看到版本号(箭头指向的位置)

            

版本号为5,然后输入  iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh‘)  即可下载安装

安装完成会有success的提示

b.接着输入

   scoop bucket add extras

   scoop install ios-webkit-debug-proxy

若要卸载 ios-webkit-debug-proxy 使用 scoop uninstall ios-webkit-debug-proxy 命令

c. 安装完成之后,按照输入如下命令即可

  

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

d.在浏览器地址栏输入localhost:9221

 

原文地址:https://www.cnblogs.com/web-wangmeng/p/7255858.html

时间: 2024-10-21 11:11:26

chrome浏览器远程调试移动端Web页面的相关文章

chrome 浏览器 远程调试 手机网站

调试前 请做好准备工作: 安卓手机 chrome浏览器 手机与pc连接 可以进行usb调试 例子:看如何调试 腾讯网 在手机上用 chrome 打开腾讯网 pc端 打开chrome 浏览器 输入 chrome://inspect/ 就可以看到 如果你觉得这个麻烦 记不住的话 可以采用 手动方式 这样就可以看到啦 接着 就点击 就可以看到啦 怎么回事 怎么是空白的 没有出现我们调试PC端的那样 关于出现这个原因: 针对 chrome 的东西 国人都知道要翻墙.出现这个有的显示不用翻墙也可以 有的必

用Chrome浏览器远程调试APP内的网页,其实是支持哒

Google开了一个专题网页,这里有详细的说明,先把链接放这里.旧版的使用说明在这里.

UC 浏览器远程调试手机web网页记录

浏览器远程调试插件有很多,本来要使用chrome浏览器的调试插件的,但是需要FQ才能使用(公司网络有限制,果断放弃),最终选择使用UC浏览器的. 其实UC官网插件使用已经介绍的很详细了,但是有几处坑需要注意一下额! 参考进行配置UC远程调试:http://plus.uc.cn/document/webapp/doc5.html 1,如下图,如果是win64位系统,应该解压到C:\Windows\SysWOW64目录下 2,如下图,安装adb成功后,执行以下命令进行映射端口时,命令之间有空格,可以

浏览器远程调试

做移动互联网开发呢,比较头疼的可能就是调试问题了,我是这么感觉的.因此,我对市面上比较流行的远程调试方法做了总结,对比了 Firefox.Chrome.Opera 三大浏览器的远程调试工具,大家各取所需,希望能对大家的日常工作有多帮助. 一.Opera 远程调试 准备工作: 下载桌面版 Opera 下载欧朋 HD 最新版 下载欧朋 HD 模拟器 方式一. 通过欧朋 HD 模拟器和 Opera Dragonfly 进行远程调试 安装下载欧朋 HD 模拟器.桌面版 Opera.欧朋 HD. 打开 O

移动端WEB页面

百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web 前端开发的区别是什么 Alloyteam移动开发规范概述 手机/移动前端开发需要注意的20个要点 w3cplus响应式技术资源 浅谈移动Web开发 Alloyteam Mars 移动WEB开发入门 移动开发资源集合 The Mobile Web Handbook MobileWeb 适配总结 移动前

移动端web页面开发常用的头部标签设置

在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> initial-scale属性控制页面最初加载时的缩放等级.maximum-scale.m

移动端web页面如何适配

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo

超完整的Chrome浏览器客户端调试大全

引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,写了很多代码,能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和深入,说说本人吧,我的编程调试起源于

移动WebApp利用Chrome浏览器进行调试

详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net.cn/article/69 对于上面教程要注意的问题: 1,不需要考虑run in device问题,因为他们的软件设计改变了. 2,你必须要新建一个“移动App”,我这里的是h5+. 我主要是分析我遇到的问题: (这几天,我会把一整套上传百度云盘,如果可以的话,然后共享) 共享的文件可以让你不需要