文档章节

完美解决 pc端实时调试移动web页面

txbb
 txbb
发布于 2017/04/13 15:21
字数 746
阅读 316
收藏 0

背景

由于工作需要,需要在pc上实时调试移动端的页面。故花了时间研究出这一套解决方案。

工具准备

  • puer
  • 谷歌插件-vysor
  • pc谷歌浏览器开发版和安卓谷歌浏览器开发版

工具介绍

  • puer (类似browser-sync) 。 Puer是一个基于nodejs的可以实时编辑刷新的前端服务器。在实时编辑我们本地文件的同时,只要文件发生了变化,即可触发打开了该地址的所有html页面刷新,提高了开发效率。
  • pc谷歌浏览器开发版和安卓谷歌浏览器开发版。谷歌浏览器里面内置了远程调式工具,只要手机和pc端同时安装了谷歌浏览器,便可以实时在pc上调试手机代码。如图

输入图片说明

要使用改功能,需要手机和pc都同时打开浏览器 手机并且启用开发者调试才可以。这时候点击 inject

输入图片说明

输入图片说明

此时,你已经可以在这个界面上操作和调试你的代码。

举例子

使用puer开启服务器

输入图片说明

在手机端输入该网址 注意 手机需要和pc在同一局域网下,输入的网址如 192.168.6.184:8000 才可以成功访问

输入图片说明

此时 我在手机模拟器上改变背景颜色

输入图片说明

此时 pc端是不会改变的,因为我只是在模拟上检索元素。但是 如果我在源文件上修改 并下 ctrl+s 保存 同步刷新成功。

输入图片说明

注意 谷歌浏览器可调试的页面局限与静态,如果调试轮播图等动态效果时,远程工具的显示效果很差,尤其是当手机和pc都不是使用chrome开发版时。 所以强烈建议使用开发版

  • vysor 这是一个十分强大的谷歌浏览器插件,它支持在pc端实时操作手机(手机不需要root!!!)并显示内容。此时 我们可以把谷歌内置的显示关掉,直接使用谷歌的调式工具,然后在vysor下查看便不会出现页面卡顿的仙现象了。

输入图片说明

补充 puer只是一个提供实时刷新的工具 可代替的工具有很多。 移动web调式工具也比较多,例如puer 就已经内置了 winer 和browser-也内置了wernre。直接使用该工具进行调试也可。至于pc显示手机屏幕工具,也有很多。主要区别是手机需不需要root。由于以前手机不是很多人都会root ,所以选择了vysor这个工具。vysor的替代工具有 tearmview 360手机助手 应用宝等都可以。vysor已经收费,而且 很容易出现 黑屏无法显示现象。所以这里提供了可以使用的vysor软件。其他软件自行下载安装

© 著作权归作者所有

共有 人打赏支持
txbb
粉丝 0
博文 4
码字总数 4836
作品 0
广州
私信 提问
pc调试移动终端web代码(工具Weinre)

做移动web开发的同仁,多少都为各个浏览器困扰。基于手机浏览器的性能和各个开发商的私人考虑,我们现在在android、ios等系统还很难使用到完全统一的浏览器内核。无论是ucweb、chrome、safar...

嘻哈开发者
2014/02/11
0
0
HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223
2017/08/25
0
0
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
0
0
关于在移动端 body overflow:hidden 无效的问题

关于在移动端 body overflow:hidden 无效的问题 一、简述 这篇文章作为一道前菜哈。 很多同学在做移动端的时候都有遇到移动端各种坑,各种固定fiexd失效,input输入框错位,软键盘弹出错位等...

Cc卿
2018/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
3
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
12
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
3
0
聊聊GarbageCollectionNotificationInfo

序 本文主要研究一下GarbageCollectionNotificationInfo CompositeData java.management/javax/management/openmbean/CompositeData.java public interface CompositeData { public Co......

go4it
昨天
3
0
阿里云ECS的1M带宽理解

本文就给大家科普下阿里云ECS的固定1M带宽的含义。 “下行带宽”和“上行带宽” 为了更好的理解,需要先给大家解释个词“下行带宽”和“上行带宽”: 下行带宽:粗略的解释就是下载数据的最大...

echojson
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部