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.熟悉的界面出现了,接下来你应该知道怎么用了!

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

     

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


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

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

  • 相关阅读:
    selenium headlesschrome下设置最大窗口模式
    lxml简明教程
    lxml etree的一个问题
    pycharm导入模块的时候遇到的两个错误
    linux下安装python
    【Android进阶学习】shape和selector的结合使用
    ANDROID资源文件【转】
    android 屏幕适配问题【转】
    android UI进阶之style和theme的使用
    Android入门第十六篇之Style与Theme [转]
  • 原文地址:https://www.cnblogs.com/feiyueNotes/p/7788025.html
Copyright © 2011-2022 走看看