精华内容
下载资源
问答
  • 今日,接到一个任务,后台多个页面的搜索框在手机上显示不出来,让解决此问题。从网上搜索的情况看,大致有两种方法。 第一种:手机用usb连接电脑,然后开启调试模式来做。 这个我电脑用着有问题,前置usb接口有...

    今日,接到一个任务,后台多个页面的搜索框在手机上显示不出来,让解决此问题。从网上搜索的情况看,大致有两种方法。

    第一种:手机用usb连接电脑,然后开启调试模式来做。

    这个我电脑用着有问题,前置usb接口有问题,一旦连接手机就会自动重启。后置usb虽然没问题,但连接线不够长,不太方便


    第二种:安装手机模拟器。这个一个是模拟机安装文件比较大,另一个启动速度特别慢,也不太合适。

    其他就没有好的方法了。

    因为我以前用过微信web开发者工具来做微信开发,知道其调试手机网页的功能特别强大。就想试试用这个是否可以调试。由于开发微信是针对特定网站,特定域名的,我先打开微信开发者工具,目前版本是0.70,然后输入百度的域名,看到微信开发者工具中的控制台等源码显示都正常,看来是可以使用。

    由于微信开发目前只支持80端口,因此需要在电脑上进行配置,才能使用。首先在IIS中配置网站域名为jiaogui.jinrimianshi.com。然后在host文件中输入:

    127.0.0.1 jiaogui.jinrimianshi.com

    这样配置好后就可以在本地电脑上调试了。

    微信开发者工具下载地址:http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

    另外还有一个前提条件,你必须有微信账号,而且这个微信账号已经成为微信开发者

    展开全文
  • 这篇文章所讲到的方法已经过时,请移步...下面就介绍一下在iOS和Android两个平台上如何在真机对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome...

    这篇文章所讲到的方法已经过时,请移步《移动端真机调试终极利器-BrowserSync》,欢迎分享更多工具。

    手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试。当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,希望你能留言告诉我。

    一、iOS + Safari

    1、打开手机web检查器。

    通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。

     

     

     

     

     

     

     

     

     

    2.链接电脑(Mac)

    2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)

    2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):

    QQ20140505-3@2x

    3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):

    QQ20140505-4@2x

     

     

     

     

     

     

    3.调试网页

    如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):

    QQ20140505-5@2x

     

     

     

     

     

     

     

     

     

    二、Android + Chrome

    1.设置手机

    1.1【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。

    QQ20140505-9@2x

    1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

    QQ20140505-10@2x

     

     

     

     

     

     

     

     

     

    2.设置电脑(Mac)

    这块比较麻烦,因为要装一下Android的SDK。

    2.1 下载Android SDK,并解压,我把整个adt目录放在了 /Users/David/adt/ 这里。

    2.2 设置环境变量 。打开终端在David路径下(形如 DaviddeMacBook-Pro:~ David$)输入 open .bash_profile,如果文件存在则会打开,如果不存在则再输入touch .bash_profile创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入adb 出现命令帮助信息就是成功了。

    2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote  。

    3.链接电脑

    3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。

    3.2 打开电脑上的Chrome,在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面(点击查看大图):

    QQ20140505-6@2x

     

     

     

     

    4.调试网页

    4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:

    QQ20140505-7@2x

    4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):

    QQ20140505-8@2x

    4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:

    Screenshot_2014-05-05-22-00-47

    转载于:https://www.cnblogs.com/chris-oil/p/6407623.html

    展开全文
  • PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上网页 最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容。 虽然现在的桌面浏览器提供了模拟手机的功能,但是...

    PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页

    最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容。
    虽然现在的桌面浏览器提供了模拟手机的功能,但是还是有些场景模拟不了真机,比如说手机的多点触控,桌面浏览器由于只有一个鼠标,所以无法模拟出手机上的多个手指触摸
    于是上网百度,找了一些诸如Ghostlab之类的应用,但是调试效果不是很好,后来找了半天终于找到了解决办法,不过网页说明太乱,看了半天再加上自己摸索,终于是搞起来了。
    原来chrome已经为移动开发者们准备好了这些功能,只是我没发现而已,简明扼要记录一下,避免大家再浪费时间去理解。


    废话不多说,上步骤:

    手机端需要做的事

    1. 手机上下载chrome浏览器
    2. 手机开启“开发者模式”
      具体步骤各个品牌手机不太一样,华为手机为例:
      • 打开手机上的 “设置” 图标,
      • 进入最下方 “系统” 选项,
      • 再点击最上方 “关于手机”,
      • 接着连续点击 “版本号” 7 - 8 次左右,就可以开启 “开发者模式”。
    3. 返回上一级目录,可以在下方找到 “开发人员选项” ,进入之后找到 “USB调试” 这一项,开启它即可
    4. 切换到手机chrome浏览器, 打开一个网页
    5. 用USB把手机连接上电脑

    PC端需要做的事

    1. 打开chrome浏览器,地址栏输入 chrome://inspect 并回车,可以看到如下界面:
      在这里插入图片描述
      可以看到 Offline 那里提示 需要接受debugging
    2. 打开手机,提示框点确定,允许进行USB调试
    3. Offline 那里就变成了下图所示
      在这里插入图片描述
      手机上正在浏览的网页,这里就可以看到了,然后下方有两个按钮 inspectinspect fallback ,点击即可进行调试(我这里由于手机版浏览器版本高于PC端, 所以提示使用 inspect fallback 来进行调试)
    4. 点击按钮后会弹出一个新的窗口,如图所示
      在这里插入图片描述
      新窗口左侧是手机页面实时预览,右侧即是调试窗口,手机端的操作与这个窗口是相互影响的,两端的任何操作都会在另一端同步显示,
    5. 接下来就可以愉快地调试手机网页了 ^_^。

    另外,补充一个小知识点,如何用手机访问电脑上正在开发的本地网页

    展开全文
  • 下面的方法,只适用于安卓手机和windows,并且都需要谷歌浏览器。手机(安卓机)需要安装chrome与电脑的chrome配合1....最后在手机的chrome打开你想要调试的页面;2.电脑的准备工作用数据线...

    下面的方法,只适用于安卓手机和windows,并且都需要谷歌浏览器。

    手机(安卓机)需要安装chrome与电脑上的chrome配合

    1.手机的准备工作

    打开手机的开发者模式(设置->关于手机->版本号);

    再打开USB调试(设置->开发者选项->USB调试),不同安卓机打开有所差别,反正把USB调试打开就成;

    最后在手机的chrome上打开你想要调试的页面;

    2.电脑的准备工作

    用数据线将手机与电脑连接好后,打开电脑上的chrome,在地址栏输入 about:inspect ;

    勾选上 Discover USB devices,就会出现你所连接上的手机及手机上chrome打开的网页;

    点击你想调试的页面下的 inspect 就可以对该页面进行调试。

     

    部分操作截图如下:

     

     

    展开全文
  • 转载出处 开发手机页面以及Hybird应用时,调试曾经是个老大难问题,不时需要用写log等方式曲线救国。 实际上,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑...在手机上打开“设置|开发者选项 | USB调试”。
  • 如何在移动设备上调试html5开发的网页 在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、...
  • 如何调试移动端网页

    2014-12-18 21:44:33
    本文将会介绍如何在真机上调试移动端的页面,和之前的《如何在电脑上测试手机网站》的不同之处在于真机环境。 本会介绍的方法如下: UC浏览器开发版Chrome 远程调试Firefox 远程调试Opera 远程调试Weinre UC...
  • 一、开启热点 1、开启Win10的移动热点,如下图1所示。 图1 二、连接热点 ...1、使用手机连接一步中开启的移动热点,如下图2所示。...1、在手机浏览器,输入 IP:port/url,我这里的情况是113.76.161.115:9000/...
  • 步骤如下: 1、点击Safari启动浏览器 2、点击左上Safari标志,选择偏好设置 3、选择高级,勾选下方的菜单栏显示开发菜单。 4、如此,Safari就出现了开发菜单,右键网页元素也会出现查看元素功能了。 ...
  • 先简单介绍两款常用但需要一定条件或限制的工具 1、如果你能FQ chrome32版本后就自带了移动端调度工具,可以...苹果电脑的safari 6.0版本后就可以直接连接iphone手机调试手机safari正在浏览的web页...
  • 刚开始学习android,遇到各种各样的问题,比如手机连上电脑的WIFI后,手机上自己编的android程序无法访问电脑上Tomcat的资源等,这里分享一下经验。 一、  电脑上搭建好了Tomcat,通过localhost:8080访问Tomcat的...
  • 微信公众h5页面如何在web端调试

    万次阅读 2018-03-06 16:51:24
    由于微信公众页面在手机上不好调试。所以可以选择使用微信开发者工具登录微信公众号-》开发者工具-》绑定微信账号-》下载工具-》安装-》微信扫码-》工具内输入公众号网页地址...
  • 微信网页调试之利用vConsole真机调试

    万次阅读 2019-06-28 10:56:53
    虽然微信开发者工具可以调试大多数...第二种是开启vConsole,直接手机上就可以调,优点是方便,不用连接电脑,能看到大多数信息,缺点是不能打断点 下面介绍如何使用 1.开启vConsole 微信里访问:debugx5.qq.c...
  • ➢ 浏览器调试模式 软件:chrome浏览器 使用:地址栏打开chrome://inspect/#devices ...前提:建议开启科学上网,chrome的服务建立这个基础之 ➢ 腾讯TBS Studio 软件:TBS Studio 地址:http...
  • 微信网页调试小记

    千次阅读 2015-08-17 17:20:09
    近期用mater-ui(react)开发一个用于手机端的网页,遇到了一些坑,记录一下。提交表单的时候,按钮无论如何也点击不动,由于微信中浏览器的特殊性,一直没找到合适的调试方式。 chrome中和安卓都运行的没...
  • 手机上应该如何调试H5,打印相应的log信息,而不是使用alert来调试? 移动端调试方法其一就是通过chrome浏览器,缺点就是只能调试通过手机端的chrome浏览器打开的网页,通过其他浏览器测试一些兼容性问题就无法调试...
  • Chrome调试手机页面

    2014-06-11 21:13:00
    新开发的网页需要在手机或是模拟机运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试。查看 制作的网页是否能够适合各种手机型号使用。 下面所以下如何使用Chrome调试多...
  • 我们现在开发网页基本都是会开发成“响应式”的,而为了减少麻烦我们经常会在PC端直接进行测试手机端效果。这篇文章介绍的是如何在Chrome中添加指定机型的模拟机。
  • 如何查看手机浏览器的日志?手机浏览器日志如何同步到电脑?电脑上如何查看手机浏览器的日志?...iOS 6之前,iPhone的Safari Web浏览器具有内置的调试控制台,开发人员可用来跟踪网页缺陷。如果您的i...
  • 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试,我想要在手机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的效果就是和Charles学习(二)之使用Map ...
  • 本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页。如果你有一台 iMac/MacBook,可忽略该文档。iMac 环境下,直接通过 USB 将 iphone 与 iMac/MacBook 链接,之后在 ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 122
精华内容 48
关键字:

如何在手机上调试网页