使用Chrome Inspect调试WebApp

作者：zhanhailiang 日期：2015-03-10

在PC上有大量的开发调试工作，但是针对需要在移动设备上调试的页面，目前缺乏有效的工具，只能通过PC来模拟测试，为此Chrome支持远程调试Android设备，详情请见Remote Debugging on Android with Chrome。

安装步骤

开启移动设备开发者选项，若和笔者一样使用M4，可参见小米4如何进入开发者选项；
在PC上安装OEM USB Drivers，官方安装教程：OEM USB Drivers，下载路径：latest_usb_driver_windows.zip；
在PC Chrome上打开 chrome://inspect/#devices 即可；
在Android Chrome上访问移动页面 m.vip.com，即可开始调试页面；

使用Chrome Inspect调试WebApp的相关文章

chrome浏览器使用chrome://inspect调试app 网页，打开空白的问题

使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 那就在C:\Windows\System32\drivers\etc\hosts文件加入 61.91.161.217 chrome-devtools-frontend.appspot.com61.91.161.217 chrometophone.appspot.com

Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）

调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能. Google提供的调试Android上WebView的步骤: 开启手机上的USB调试功能打开Chrome浏览器,地址栏输入:Chrome://inspect,回车 Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图: 点击Inspect,弹出开发者工具进行调试问题就出现在这里,对于国内的程序猿来说,由于

chrome://inspect 移动前端调试方案（Android + Chrome 实现远程调试）

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面然后用手机打开要调试的页面刷新页面查看调试结果但是这就存在两个问题在pc浏览器模拟手机可能造成调试不准用手机直接调试又多一步刷新那怎么能达到在pc端修改代码在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了二.功能我们先看下最终想要达到的效果上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

chrome inspect 远程调测：Chrome on Android之一普通调试

本文PC环境: Chrome: 版本 33.0.1750.22 dev MAC OS:OS X 10.9.1 特别注意:Chrome DevToolsl使用时会联接到appspot.com,而此网址被墙,以下教程需要先在本机使用翻--墙代理,否则在chrome://inspect中无法点击网页的inspect链接打开Deleloper Tools. Mac上使用goagent教程:http://maolihui.com/goagent-mac-detail.html 其他操作系统如何使用goag

chrome远程调试按inspect后出现的界面为空白，应如何解决？

使用chrome进行远程调试命令: chrome://inspect 编辑hosts文件,添加: Hosts文件路径:C:\Windows\System32\drivers\etc\hosts 61.91.161.217 chrome-devtools-frontend.appspot.com61.91.161.217 chrometophone.appspot.com 即可

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试二.针对IOS

小试牛刀chrome来调试APP

引子不论是web端还是app端,对于前端页面的性能优化方法都是一样的,思路也是通用的.在<前端页面性能测试普及课>中已经详细讲解过了,这里不再阐述,感兴趣的可以看看,地址:http://edu.51cto.com/course/9202.html 以下说的app调试对于里面的webview的优化也是一样的. 准备步骤手机root 打开开发者模式打开usb调试使用数据线连接电脑本地电脑安装好chrome 调试webview网页启动chrome,并输入chrome://inspect

使用Chrome Inspect调试WebApp

安装步骤

更多阅读

使用Chrome Inspect调试WebApp的相关文章