zoukankan      html  css  js  c++  java
  • 移动端Web开发调试之Chrome远程调试(Remote Debugging)

    第一步:首先在移动设备上开启USB调试模式。方法:

    ● Android 3.2+,打开设置 – 应用程序 – 开发,在“USB调试”处打钩选上

    ● Android 4.0~ Android 4.1 ,打开设置-开发者选项-进入在“USB调试”处打钩选上。

    ● Android 4.2+,打开设置-关于手机-手机配置信息-连点“版本号”7次,返回上层就可以看到“开发者选项”显示出来了,在“USB调试”处打钩选上。

    第二步:用USB数据线连接设备,驱动装好连接成功后,你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试

    第三步:在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备(Chromemenu > More tools > Inspect Devices),或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect

    如果USB连接成功,这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调试页面,点击focus tab可将标签页置顶,close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。

    点击inspect打开DevTools后,你可以选中页面中的DOM元素,同时设备中对应元素也高亮显示,也可使用DevTools中的Inspect Element 选中目标元素,可以实时与移动设备页面交互,方便的定位问题所在,进行代码调试。

    在输入框中输入一个新的网址,点击Opoen可打开你想要调试的新页面。

    pc和手机页面务必在chorme打开,别去别的浏览器瞎整。

    如果你点击inspect打开的DevTools窗口一片空白,且刷新无效时,那极有可能是由于被墙的缘故。确认没被墙的情况下,在C:WindowsSystem32driversetchosts 下添加

    61.91.161.217 chrome-devtools-frontend.appspot.com
    61.91.161.217 chrometophone.appspot.com

  • 相关阅读:
    vue项目目录
    vue 组件传值,(太久不用就会忘记,留在博客里,方便自己查看)
    vuex学习心得
    vue2+webpack怎样分环境打包
    我的笔记啦
    如何在vue2.0项目中引用element-ui和echart.js
    Exsi SSH 服务配置
    CentOS 6 通过DVD快速建立本地YUM源
    为SSO 5.5恢复忘记的administrator@vsphere.local密码
    sshfs 通过ssh 挂载远程目录
  • 原文地址:https://www.cnblogs.com/gggwf/p/7597748.html
Copyright © 2011-2022 走看看