关闭

关闭

封号提示

内容

首页 developer.doc

developer.doc

developer.doc

上传者: Wallis秀青 2017-09-26 评分 5 0 148 20 674 暂无简介 简介 举报

简介:本文档为《developerdoc》,可适用于职场法律常识领域,主题内容包含目录目录关于RI主要功能准备工作手机端PC端连接手机与PCWiFi连接模式USB连接模式针对MAC上的调试使用方法调试方式调试面板元素面板(Elem符等。

目录目录关于RI主要功能准备工作手机端PC端连接手机与PCWiFi连接模式USB连接模式针对MAC上的调试使用方法调试方式调试面板元素面板(ElementsPanel)高亮显示页面元素查看选中元素的HTML代码修改原页面的HTML代码资源面板(SourcePanel)网络面板(NetworkPanel)脚本面板(SourcePanel)控制台(Console)关于RI目前在手机上使用浏览器访问网页无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便直接在手机上进行网页数据调试不太现实。因此我们使用技术将手机网页调试信息分离实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具mdashmdashRemoteInspector(简称RI)。主要功能Android平台UC浏览器开发者版主要支持以下功能:DOM查看和修改JavaScript调试、CSS调试网络状态查看资源文件查看Console控制台准备工作手机端进入UC官方网站开发者中心(网站地址)下载Android平台的UC浏览器开发者版(UCBrowserDevRIapk下载地址)安装到手机中。PC端PC机一台并在PC上安装Chrome或Safari(推荐使用Chrome)。支持ChromendashChrome以及Safari以上版本。下载adb工具(adbtoolzip下载地址)到PC中。连接手机与PCAndroid平台UC浏览器开发者版远程调试支持USB连接、WiFi连接两种模式。WiFi连接模式WiFi模式下保证手机与PC处于同一个无线网段即可。USB连接模式USB连接模式需要搭建AndroidSDK开发环境或安装adb工具。附Windows操作系统上的adb安装参考)在PC上通过网络下载安装豌豆荚(Android手机助手))在手机上打开USB调试模式:设置应用程序开发USB调试)连接手机与PC若PC无手机驱动豌豆荚会自动下载驱动并安装)将手机与PC连接能被豌豆荚识别则为正常连接)将adbtoolzip解压到C:WINDOWSsystem目录下)开始运行输入cmdexe进入Windows命令提示符窗口输入adb如果无错误提示并能够看到rdquoAndroidDebugBridgeversionrdquo的提示则表明adb安装成功搭建好AndroidSDK开发环境或安装好adb工具后通过adb命令进行端口映射。在Windows命令提示符窗口(cmdexe)运行:adbforwardtcp:tcp:针对MAC上的调试使用方法对于开发环境是MAC机的开发者也可以使用UC的开发者版本进行开发和调试web页面也有两种连接模式(即Android手机与MAC机连接):()Wifi连接模式WiFi模式下保证手机与PC处于同一个无线网段即可。()USB连接模式USB连接模式需要搭建AndroidSDK开发环境或安装adb工具。附MAC机操作系统(MacOSX及其以上版本)上的adb安装参考。)下载Androidsdkformac打开safari浏览器输入网址:http:developerandroidcomsdkindexhtml显示的页面大概如下:)点击ldquoDownloadtheSDKrdquo图片链接开始去下载androidadk开发包。本示例中笔者下载到的安装包是:adtbundlemacxzipSafari自动解压后目录是adtbundlemacx在mac上的完整目录是:UsershuangmyDownloadsadtbundlemacx注:这是笔者的mac机目录结构情况读者应该注意要替换为自己的mac机的目录。以下描述中若出现目录无特别说明都是笔者当时的mac机目录结构情况读者应该注意要替换为自己的mac机的目录。)为了便于管理把androidadk目录从下载目录移动到android工作目录。先创建android工作目录再移动目录。具体操作如下:打开一个命令行窗口(终端)输入以下命令:mkdirUsershuangmyandroidcdUsershuangmyDownloadsmvadtbundlemacxandroid)配置环境变量打开一个命令行窗口(终端)编辑当前用户的配置文件(bashprofile)输入以下命令:vim~bashprofile(注:笔者是使用VIM文本工具读者也用此工具(需安装该工具VIM)也可以用其他的文本编辑工具)在文件的最后输入以下文本行:ANDROIDSDKPATH=UsershuangmyandroidadtbundlemacxsdkexportANDROIDSDKPATHexportPATH=$PATH:$ANDROIDSDKPATHplatformtools:$ANDROIDSDKPATHtools截图如下:输入结束保存并退出VIM。)使配置文件立刻生效可输入命令:source~bashprofile)检查android的adb工具是否有效可输入命令:adbversion回车后若看到adb的版本信息则说明adb工具现在已经可以使用了。如下图:注:不同的adb版本adb版本号可能不一样示例中是笔者mac机上安装的adb版本号。)之后关于adb工具的用法与章节中的使用方法一样做端口映射即在命令行窗口中执行:adbforwardtcp:tcp:然后就可以在mac机上使用safari或chrome浏览器通过usb来连接手机上的UC浏览器了。调试方式在手机上启动UC浏览器开发者版并打开需要调试的页面。在PC上打开Chrome或Safari若是WiFi连接模式则在地址栏输入:手机IP:例手机IP为则输入:此时手机端的UC浏览器开发者版会弹出对话框如下:选择确定允许调试。若是USB连接模式则在地址栏输入:http:localhost:成功访问该网址后即可看到UC浏览器开发者版已打开索引页面:接下来点击任一需要调试的页面即可进行调试。调试方法与PC上Chrome或Safari开发者工具的调试方法类似。以UC产品下载站为例点击进入调试页面:当UC浏览器开发者版的某个页面被远端浏览器调试时系统通知栏会显示扳手图标提示UC浏览器调试模式开启表明当前手机页面处于调试状态。如图:所有工作准备就绪接下来可进入调试阶段。调试面板这是UC浏览器开发者版的调试功能面板。本章节以下内容将介绍其中的元素面板、资源面板、网络面板脚本面板以及控制台。元素面板(ElementsPanel)在元素(Elements)面板中可以看到整个页面的DOM树结构和每个元素的所有属性。可以在PC上修改这些元素及其属性并实时在手机上看到修改后的效果。高亮显示页面元素在调试页面上鼠标移至UC浏览器下载模块对应的HTML代码上如下图:则对应的手机上的被调试页面中对应的DOM元素会在UC浏览器开发者版中被高亮显示如下图:查看选中元素的HTML代码首先在PC浏览器的调试页面上的底部工具中点击放大镜按钮开启Inspect功能:成功开启后放大镜按钮会变成蓝色。然后在UC浏览器开发者版的被调试页面点击UC浏览器链接如下图:则对应的在PC端浏览器的调试页面会高亮显示UC浏览器链接对应的HTML代码如下图所示:修改原页面的HTML代码在PC端浏览器的调试页面上修改ldquo电脑版rdquo为ldquoPC版rdquo如图对应的手机端被调试页面的页面结构也会随之发生变化如下图:资源面板(SourcePanel)在资源面板中你可以看到手机端被调试页面从网络上下载的所有资源。网络面板(NetworkPanel)在网络面板中可以查看各URL加载的情况包括请求头和请求正文的内容以及请求加载的耗时。脚本面板(SourcePanel)脚本面板主要是用于JavaScript脚本的调试设置断点后在手机端UC浏览器开发者版中刷新被调试页面则会本次JavaScript处理中触发断点。控制台(Console)可以在PC浏览器中的调试页面中在控制台输入命令进行所需要的操作。*注:更多调试方法可参考Google开发者中心(网站地址)

类似资料

编辑推荐

太平天国故事 06 陈玉成战六合.pdf

太平天国故事 05 血战九江.pdf

太平天国故事 07 血溅大渡河.pdf

太平天国故事 08 侍王的故事.pdf

太平天国故事 09 姑苏丹心.pdf

职业精品

精彩专题

上传我的资料

精选资料

热门资料排行换一换

  • 张文显:论法学范畴体系.pdf

  • 张明楷:《刑法学》.pdf

  • 王泽鉴:民法学研习方法与大型论文…

  • 霍菲尔德:司法推理中应用的基本法…

  • [医]《七十名中医临证特效方》.…

  • 胡一鸣-形峦阴阳法风水一对一授徒…

  • Language.in.Use.…

  • test_it_fix_it_v…

  • 梨园集成.[清]李世忠.清光緖六…

  • 资料评价:

    / 20
    所需积分:5 立即下载

    意见
    反馈

    返回
    顶部