zoukankan      html  css  js  c++  java
  • 移动端H5测试调试利器 chrome://inspect/#devices

    使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面.

    我使用的是三星S6 (该功能支持安卓系统4.4及以上机型),电脑是win 7 系统,以下几步就可以轻松使用浏览器内置的功能调试移动端网页了:

    1. 确保手机开启调试模式连接电脑,手机设置里面,开发者模式、USB调试均处于开启状态;

    2. 手机上打开一个网页,只要是webview形式的网页应该都是可以的;

    3.电脑上安装连接手机的驱动,cmd命令输入:adb devices  如下图已显示设备信息,即代表手机已成功连接电脑;

    4.电脑chrome浏览器地址栏输入:chrome://inspect/#devices ,会看到如下图的情况(上面会看到你所连接的设备的名称和信息,下面就是当前设备上可以用于在电脑上调试的页面的信息,地址、标题、网页大小。。。,如果没有显示设备信息,则表示没有连接好,可以插拔手机或关闭调试模式重开一下);

    5.找到你准备调试的那个,并且确保手机上的那个页面也是处于激活状态的,然后点击蓝色的 inspect 链接,会弹出一个新的窗口,如下图;

    注:若出现按inspect后,发现h5页面出不来,一直显示空白。……需要翻墙服务(免费的推荐蓝灯)

     偶十月份发现安装的蓝灯突然用不了了,重新安装了最新版本的,又可继续用了,可以去这查看下载:https://github.com/getlantern/lantern

    6.熟悉的界面出现了,接下来你应该知道怎么用了!

    检查元素↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

     

     控制台↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


    查看网络情况↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

    机型适配调试↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  • 相关阅读:
    Web端导出CSV
    dojo/dom-style样式操作学习笔记
    dojo/dom源码学习
    上层建筑——DOM元素的特性与属性(dojo/dom-prop)
    上层建筑——DOM元素的特性与属性(dojo/dom-attr)
    返本求源——DOM元素的特性与属性
    DOM扩展札记
    以代码爱好者角度来看AMD与CMD
    dojo事件驱动编程之事件绑定
    通过Web.config中的configSections配置自己系统的全局常量
  • 原文地址:https://www.cnblogs.com/feiyueNotes/p/7788025.html
Copyright © 2011-2022 走看看