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

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

开发过程问题排查

  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. adobe flash player 下载地址

    1. https://www.adobe.com/cn/products/flashplayer/distribution3.html

  2. linux 下载rpm包到本地,createrepo:创建本地YUM源

    如何下载rpm包到本地 设置yum安装时,保留rpm包. 1.编辑 /etc/yum.conf 将keepcache的值设置为1; 这样就可以将yum安装时的rpm包保存在 /var/cache/yu ...

  3. jquery的ajax(err)

    load()方法 load()方法是jquery中最为简单和常用的ajax方法. 直接使用ajax技术的流程 1.创建xmlhttprequest对象 2.调用open函数("提交方式&qu ...

  4. BAT系列(一)— CNN

    1.CNN最成功的应用是在CV 那为什么NLP和Speech的很多问题也可以用CNN解出来?为什么AlphaGo里也用了CNN?这几个不相关的问题的相似性在哪里?CNN通过什么手段抓住了这个共性? 以 ...

  5. Javascript-- jQuery样式篇(二)

    jQuery的属性与样式 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...

  6. COM组件的集合与包容

    集合与包容,实质就是组件之间的互相调用.即一个组件使用另一个组件的功能,达到代码复用的作用.只是这种复用是构建在二进制数据上的(因为被复用的组件常常以dll的格式存在),而不是像c++代码复用是以源文 ...

  7. linux命令学习笔记(21):find命令之xargs

    xargs是一条Unix和类Unix操作系统的常用命令.它的作用是将参数列表转换成小块分段传递给其他命令,以避免参数列表过长的问题 xargs的作用一般等同于大多数Unix shell中的反引号,但更 ...

  8. 不要试图用msvc来编译ffmpeg

    出于学习目的,想建一个vs2010工程来编译ffmpeg(http://www.ffmpeg.org/),但是由于意义不大,并且工作量太大放弃了.原因如下: 1.一些unix平台相关的头文件.库的依赖 ...

  9. bzoj 2565: 最长双回文串 回文自动机

    题目: Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为"abc",逆序为"cba",不相同 ...

  10. 【Facebook】等差子序列个数

    题目: 给定一整数数列,问数列有多少个子序列是等差数列. 即对于包含N个数的数列A,A(0),A(1),……,A(N-1),有多少组(P(0),P(1),……,P(k))满足0<=P(0)< ...