此文已由作者张含会授权网易云社区发布。

欢迎访问网易云社区,了解更多网易技术产品运营经验。

开发过程问题排查

  1. Chrome Emulation关键词:使用方便

  • 模拟各种设备尺寸、像素比、自定义userAgent

  • 模拟触摸、经纬度、重力感应

  • 模拟4g网络等不同类型的网络

  1. browser-sync

关键词:提升开发效率
安装步骤:
npm install -g browser-sync
// 以当前目录为根,启动一个静态服务器,文件修改页面自动刷新
browser-sync start --server --files "css/.css, .html"
// 设置代理
browser-sync start --proxy "127.0.0.1:8000/buyer" --files "css/.css, .html"

线上问题排查

  1. Charles 的Map Local工具
    关键词:快速定位问题

  2. Weinre
    关键词:简单易用、专治疑难杂症

使用步骤如下:

  1. 安装
    npm install -g weinre

  2. 运行
    weinre --httpPort 8080 --boundHost -all-

  3. 调试
    方法1:

             <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

    将localhost替换为机器电脑IP,插入需要调试的页面。
    ps:如果是线上或者测试环境页面可以用charles Map Local本地修改。

             方法2:
             手机chrome浏览器,添加书签,长按可以编辑书签,为:
             javascript:(function(e){e.setAttribute("src","http://localhost:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
             访问页面之后,点击书签。
  4. 手机访问
    使用charles代理到本地,访问需要调试的页面。
    可以看到连接的target

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击

相关文章:
【推荐】 数据库路由中间件MyCat - 源代码篇(2)
【推荐】 debian 7上源码编译MongoDB 3.4版本
【推荐】 3分钟掌握一个有数小技能:制作动态标题

mobile web页面调试方法的更多相关文章

  1. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  2. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

  3. java web 入门级 开发 常用页面调试方法

    这里介绍一下Java web 入门级开发中常用的代码调式方法;  (  仅供入门级童靴 参考) ; 工具: chrome  浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...

  4. 记一个在移动端调试 web 页面的方法

    1. 工具:Weinre 2. 安装:npm -g install weinre | npm install weinre -g --registry=https://registry.npm.tao ...

  5. JavaScript WEB页面调试

    不管我们开发什么项目,都需要使用调试.后端的调试比较简单.前端js调试稍微复杂了一点,但是也别怕,因为我们有很多调试前端js代码的浏览器工具.比如IE浏览器.firefox浏览器.chrome浏览器等 ...

  6. web程序调试方法

    1.火狐浏览器查看链接指向的后台方法(controller方法) f12 进入firebug 点击bug旁边的按钮 即第一排第二个按钮 将鼠标划到想要找的链接 在firebug中显示响应的后台跳转.d ...

  7. web 页面传值方法

    一. 使用QueryString变量    QueryString是一种非常简单也是使用比较多的一种传值方式,但是它将传递的值显示在浏览器的地址栏中,如果是传递一个或多个安全性要求不高或是结构简单的数 ...

  8. .net的.aspx页面调试方法

    做.net网站开发,有时候需要调试和察看变量, 1.设置好断点以后, 2.设置调试:VS 菜单: 调试————〉附加到进程————〉在 “可用进程” 列表中选择 标题为 "ASP.NET D ...

  9. WEB页面实现方法

    页面分类 :添加页.修改页.列表页.详情页.功能页.删除 一.添加 1) 准备tpl.action(添加页.添加页保存公用一个action),并确认是否登录才显示2) 书写添加页action代码,例如 ...

随机推荐

  1. 翻译Lanlet2

    Here is more information on the basic primitives that make up a Lanelet2 map. Read here for a primer ...

  2. css sprite技巧详解

    1. [代码][CSS]代码 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

  3. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  4. Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示

    Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 ...

  5. How to handle Imbalanced Classification Problems in machine learning?

    How to handle Imbalanced Classification Problems in machine learning? from:https://www.analyticsvidh ...

  6. PHP把时间转换成几分钟前、几小时前、几天前的几个函数、类分享

    这篇文章主要介绍了php计算时间几分钟前.几小时前.几天前的几个函数.类分享,需要的朋友可以参考下一.函数实现实例1: <?php header("Content-type: text ...

  7. Java 使用itext生成pdf以及下载

    使用方法: 1.需要两个jar包: iText-5.0.6.jar    //必须使用该版本,否则缺少相关的方法 TextAsian.jar //是为了文档中正常显示中文所必须引用的包 TextAsi ...

  8. 机器学习 Generative Learning Algorithm (B)

    Naive Bayes 在GDA模型中,特征向量x是连续的实数向量,在这一讲里,我们将要讨论另外一种算法用来处理特征向量x是离散值的情况. 我们先考虑一个例子,用机器学习的方法建立一个垃圾邮件过滤器, ...

  9. 根据sid或sqlID查询SQL

    根据sid查询已经执行过的sql select sql_text from v$sqlarea a,v$session b where a.SQL_ID=b.PREV_SQL_ID and b.SID ...

  10. JS性能之setTimeout与clearTimeout

    测试环境: chrome浏览器 结论: 1 一个页面用setTimeout越多,该页面消耗的内存就会越多,几乎成正比. 2 在'startCount(1000000);-->100万'情况下,不 ...