精华内容
下载资源
问答
  • 因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI)。 1.1主要功能 Android平台UC浏览器开发者版,...

    1 关于RI

    目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实。

    因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI)。

    1.1主要功能

    Android平台UC浏览器开发者版,主要支持以下功能:

    • DOM查看和修改
    • JavaScript调试、CSS调试
    • 网络状态查看
    • 资源文件查看
    • Console控制台

    2 准备工作

    2.1 手机端

    进入UC官方网站开发者中心(网站地址),下载Android平台的UC浏览器开发者版,安装到手机中。

    2.2 PC端

    PC机一台,并在PC上安装Chrome或Safari(推荐使用Chrome)。支持Chrome15–Chrome21,以及Safari5.1.4以上版本。

    下载ADB工具到PC中。

    2.3 连接手机与PC

    Android平台UC浏览器开发者版,远程调试支持USB连接、Wi-Fi连接两种模式。MAC平台请参考:UC浏览器开发者版使用手册(Android平台).pdf

    • Wi-Fi连接模式

      Wi-Fi模式下,保证手机与PC处于同一个无线网段即可。

    • USB连接模式

      USB连接模式需要搭建AndroidSDK开发环境或安装adb工具。

        //附Windows操作系统上的adb安装参考
        1)在PC上,通过网络下载安装豌豆荚(Android手机助手);
        2)在手机上打开USB调试模式:
        设置>应用程序>开发>USB调试
      

        3)连接手机与PC,若PC无手机驱动,豌豆荚会自动下载驱动并安装;
        4)将手机与PC连接,能被豌豆荚识别则为正常连接
        5)将adb_tool.zip解压到C:\WINDOWS\system32目录下
        6)开始>运行>输入cmd.exe进入Windows命令提示符窗口,输入adb,
         如果无错误提示,并能够看到”AndroidDebugBridgeversion1.0.26”的提示,则表明adb安装成功
      

      搭建好AndroidSDK开发环境或安装好adb工具后,通过adb命令进行端口映射。

        在Windows命令提示符窗口(cmd.exe)运行:adbforwardtcp:9998tcp:9998
      

    3 调试方式

    在手机上启动UC浏览器开发者版,并打开需要调试的页面。在PC上打开Chrome或Safari

    • 若是Wi-Fi连接模式,则在地址栏输入:手机IP+:9998

      例,手机IP为192.168.112.244,则输入192.168.112.244:9998。此时手机端的UC浏览器开发者版会弹出对话框,如下:

      选择确定,允许调试。

    • 若是USB连接模式,则在地址栏输入:http://localhost:9998

      成功访问该网址后,即可看到UC浏览器开发者版已打开索引页面:

      接下来,点击任一需要调试的页面即可进行调试。调试方法与PC上Chrome或Safari开发者工具的调试方法类似。以UC产品下载站为例,点击进入调试页面:

      当UC浏览器开发者版的某个页面被远端浏览器调试时,系统通知栏会显示扳手图标,提示UC浏览器-调试模式开启,表明当前手机页面处于调试状态。如图:

      所有工作准备就绪,接下来可进入调试阶段。

    展开全文
  • 浏览器开发者工具,自己设置屏幕分辨率调试(chrome) 进入浏览器后点击F12进入开发者工具后,点击左上角手机状按钮,如图: 进入视图后,点击上方居中的下拉箭头,如图: 选择最后选项Edit,进入编辑框,如图: ...

    浏览器开发者工具,自己设置屏幕分辨率调试(chrome)

    进入浏览器后点击F12进入开发者工具后,点击左上角手机状按钮,如图:

    进入视图后,点击上方居中的下拉箭头,如图:

    选择最后选项Edit,进入编辑框,如图:

    进入后点击Add custom devices,进行分辨率的设置,设置好点击add保存启用如下图:

    该页面就可以在开发者工具模式下,下拉框中出现自己所设置的分辨率选项,先选中add的设备,后边百分比更改,分辨率也不会变化了。

    展开全文
  • Android移动端浏览器环境验证与测试,可使用vConsole[1], weirne[2],chrome remote debug[3]等方式验证。当然最理想 的方法是chrome remote debug,通过chrome可以使用调试 控制台调试js,观察网络面板及性能面板等...

    1.背景

    Android移动端浏览器环境验证与测试,可使用vConsole[1],weirne[2],chrome remote debug[3]等方式验证。当然最理想
    的方法是chrome remote debug,通过chrome可以使用调试控制台调试js,观察网络面板及性能面板等。

    在国内使用chrome调试需要翻墙,否则会出现404页面,无法调试,使用不便。当出现404有时可以通过inspect fallback开页面,pc chrome的版本低于android手机chrome浏览器版时版本时,会出现inspect fallback选项。

    chromium67 地址栏输入 chrome://inspect/#devices,会看到如下选项,
    其中包含inspect fallback
    
    WebView in com.qihoo.browser (73.0.3683.121)
    ⚠ Remote browser is newer than client browser. Try `inspect fallback` if inspection fails.
    
    携程_360搜索
    https://m.so.com/s?q=%E6%90%BA%E7%A8%8B&srcg=360aphone_act_main
    inspect inspect fallback
    

    但有时通过这种版本差异通过inspect fallback也无效,因此若能有一种和chrome一致的调试方式那么会提高效率,uc开发者工具即是一种替代方式,利用UC的开发者工具进行手机浏览器调试,而且包含chrome中涉及到的大多数测试面板。

    2. 环境安装

    UC开发者环境需要两个工具,浏览器开发者版本及开发者工具[4]。手机上选择安装开发者版的UC浏览器,开发者工具有mac/linux/windows几种,可根据开发环境安装。根据官方指南[5]进行配置。随后将android系统调整为调试模式,并通过usb连接开发机,并通过手机UC浏览器访问百度。随后打开开发者工具,如下图:
    在这里插入图片描述
    接着点击inspect即可打开测试窗口。
    在这里插入图片描述

    如果直接使用chrome又没翻墙就会出现弹出404无法进行调试的情况。

    3 参考资料

    [1].https://www.npmjs.com/package/vconsole
    [2].https://github.com/apache/cordova-weinre
    [3].https://developers.google.com/web/tools/chrome-devtools/remote-debugging
    [4].https://dev.ucweb.com/download/?spm=ucplus.11199946.0.0.53974692yuIVvd#DevTool
    [5].https://plus.ucweb.com/docs/pwa/docs-zh/oo3g8d?spm=ucplus.11213647.toc.10.7bed4ed09rilVU

    展开全文
  • UC浏览器开发者

    千次阅读 2015-03-26 15:32:45
    UC浏览器开发者版 目录[隐藏] 1 ... 调试方式相关下载 ...因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——Re

    UC浏览器开发者版

    1 关于RI

    目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实。

    因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI)。

    1.1主要功能

    Android平台UC浏览器开发者版,主要支持以下功能:

    • DOM查看和修改
    • JavaScript调试、CSS调试
    • 网络状态查看
    • 资源文件查看
    • Console控制台

    2 准备工作

    2.1 手机端

    进入UC官方网站开发者中心(网站地址),下载Android平台的UC浏览器开发者版,安装到手机中。

    2.2 PC端

    PC机一台,并在PC上安装Chrome或Safari(推荐使用Chrome)。支持Chrome15–Chrome21,以及Safari5.1.4以上版本。

    下载ADB工具到PC中。

    2.3 连接手机与PC

    Android平台UC浏览器开发者版,远程调试支持USB连接、Wi-Fi连接两种模式。MAC平台请参考:UC浏览器开发者版使用手册(Android平台).pdf

    • Wi-Fi连接模式

      Wi-Fi模式下,保证手机与PC处于同一个无线网段即可。

    • USB连接模式

      USB连接模式需要搭建AndroidSDK开发环境或安装adb工具。

        //附Windows操作系统上的adb安装参考
        1)在PC上,通过网络下载安装豌豆荚(Android手机助手);
        2)在手机上打开USB调试模式:
        设置>应用程序>开发>USB调试
      

        3)连接手机与PC,若PC无手机驱动,豌豆荚会自动下载驱动并安装;
        4)将手机与PC连接,能被豌豆荚识别则为正常连接
        5)将adb_tool.zip解压到C:\WINDOWS\system32目录下
        6)开始>运行>输入cmd.exe进入Windows命令提示符窗口,输入adb,
         如果无错误提示,并能够看到”AndroidDebugBridgeversion1.0.26”的提示,则表明adb安装成功
      

      搭建好AndroidSDK开发环境或安装好adb工具后,通过adb命令进行端口映射。

        在Windows命令提示符窗口(cmd.exe)运行:adbforwardtcp:9998tcp:9998
      

    3 调试方式

    在手机上启动UC浏览器开发者版,并打开需要调试的页面。在PC上打开Chrome或Safari

    • 若是Wi-Fi连接模式,则在地址栏输入:手机IP+:9998

      例,手机IP为192.168.112.244,则输入192.168.112.244:9998。此时手机端的UC浏览器开发者版会弹出对话框,如下:

      选择确定,允许调试。

    • 若是USB连接模式,则在地址栏输入:http://localhost:9998

      成功访问该网址后,即可看到UC浏览器开发者版已打开索引页面:

      接下来,点击任一需要调试的页面即可进行调试。调试方法与PC上Chrome或Safari开发者工具的调试方法类似。以UC产品下载站为例,点击进入调试页面:

      当UC浏览器开发者版的某个页面被远端浏览器调试时,系统通知栏会显示扳手图标,提示UC浏览器-调试模式开启,表明当前手机页面处于调试状态。如图:

      所有工作准备就绪,接下来可进入调试阶段。

    更多内容请参考UC浏览器开发者版使用手册(Android平台).pdf

    相关下载

    展开全文
  • 三、切换手机版本 四、Elements(元素面板) 显示渲染之后的HTML数据 与网页源代码数据不同(没有经过渲染) 右侧为CSS样式 五、Console(控制台面板) 显示JS和DOM信息 六、Source(资源面板) 列出请求到的资源 ...
  • 1. 手机安装uc浏览器开发者版本,地址:http://www.uc.cn/business/developer/ 2. 手机开启usb调试 3. 使用数据线链接pc端 4. pc安装adb a. 下载adb工具,地址:http://www.uc.cn/business/developer/  b. 将 adb_...
  • 从事web前端开发的人员都知道,要想在手机浏览器看到网页的console输出或者网络加载数据是很麻烦的,或者说是无解的。这让开发者很老火。不过现在有两个插件可以做到在移动浏览器也照样可以调出控制台。他们就是**...
  • 使用 Android 4.2 或以上的手机可能没有调试模式选项,可以找到 “设置 > 关于手机 > 版本号(Build Number)”, 点 7 次,然后返回开发者选项就可以了。 查找 USB 设备 (Enable USB discovery in Chrome) 在你的...
  • 利用开发者工具远程调试Android时,华为手机无法被识别的解决办法: 安装华为手机助手,成功安装华为手机驱动,重启USB调试,就可以了。 参考资料: 远程调试Android设备使用入门 键盘快捷键参考 在Chrome...
  • 微信浏览器手机调试神器TBS Studio

    千次阅读 2016-12-20 16:24:51
    微信调试主要有两款软件,一个是微信web开发者工具,但是主要只能用于pc端调试,但毕竟移动端与pc环境的差异,程序运行起来还是有略微的不同。另外一个神器就是这个TBS Studio,地址如下: ...
  • 你需要的仅仅是UC Developer Tool UC开发者版本 (Developer Edition) 支持 DevTools Protocol,它允许开发者使用任何兼容该协议的客户端(如 Chrome 开发者工具)进行远程...Android:UC手机浏览器开发者版本 Wi...
  • Ionic是一个移动App开发框架,但用浏览器运行出来达不到手机的效果,这时候呢,我们就不用浏览器调试了,找一个长得像手机的。巧了微信开发者工具刚好就满足这一要求???? 1.下载 进入微信公众平台官网,找到最下面...
  • 使用PC上的 Chrome 远程调试手机端的页面 工具准备 手机端:chrome for Android,;  PC端:安装谷歌浏览器(最好是最新版的开发者版本) USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 ...
  • 浏览器手机页面的调试

    千次阅读 2017-12-18 19:04:24
    QQ浏览器与谷歌浏览器都可以,打开开发者工具,默认快捷键是F12.,点击左上角第二个手机图标,即可模拟手机浏览器访问页面。
  • 开发PC页面的时候使用chrome浏览器开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素。其实可以通过将设备连接到PC...
  • 因此,UC使用技术将手机网页调试信息分离,实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——Remote Inspector(简称RI)。 主要功能 Android平台UC浏览器开发者版,...
  • Firefox开发者工具可以连接到Android版Firefox进行远程调试移动网站已经很久了,但直到现在这依然是一个非常复杂而容易出错的过程。从Firefox36开始我们努力让这个过程变得更加简单:特别是,你完全无需直接使用 ...
  • MUI浏览器调试

    千次阅读 2018-05-02 16:18:13
    MUI本机调试步骤:1、下载“夜神模拟器”(其他方法不适用);2、安装并打开“开发者模式”:设置-》关于平板电脑-》版本号(连续点击4次即可);...4、在模拟器上调试 运行-》手机运行-》选择模拟器。...
  • 网页在手机浏览器打开时,怎么调试? 安卓设备的 Chrome 浏览器支持远程调试,可以使用桌面浏览器的开发者工具。本文介绍如何进行远程调试。 Step 1:启用开发者模式 远程调试需要打开”开发者模式”。...
  • 微信web开发者工具

    2018-04-12 11:47:21
    通过收集相关资料,加亲身实验,有以下几种调试...和端口 无法调试断点,响应数据无法查看2、(推荐)适用于没有手机的情况,需要有开发者权限,并在工具上登录微信帐号 在工具内部右边的浏览器地址栏输入测试的网...
  • safari开发者工具 remote debugging safari 二、设置iphone 设置 -> Safari -> 高级 -> 开启web检查器 三、设置mac Safari -> 偏好设置 -> 高级 -> 勾选显示开发菜单 四、...
  • 进入开发者工具 这里有两个方法(以chorme浏览器为例) 直接F12 鼠标右键里面点击检查即可 简单使用 更改调试窗口的显示位置 就是你可以调整开发者工具的位置,个人感觉第三个选项比较舒服 选中需要修改的...
  • Chrome的开发者工具详解

    千次阅读 2015-05-19 14:18:21
    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。 下面整理一下如何使用Chrome进行调试。 怎样打开Chrome的开发者工具? 直接在页面上...
  • 如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步、用Chrome打开要调试的页面; 第二步、按F12,打开“开发者工具”,点击其右上角的“Dock to main window.”按钮,让...
  • Vconsole由微信官方出品,是一个轻量、可拓展、针对手机网页的前端开发者调试工具。Vconsole主要用于移动调试,平时在PC端浏览器调试页面时,可以使用console.log打印信息,但在真机上无效,Vconsole就可以解决这个...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 212
精华内容 84
关键字:

手机浏览器开发者调试工具