mobile web页面调试方法
此文已由作者张含会授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
开发过程问题排查
Chrome Emulation关键词:使用方便
模拟各种设备尺寸、像素比、自定义userAgent
模拟触摸、经纬度、重力感应
模拟4g网络等不同类型的网络
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"
线上问题排查
Charles 的Map Local工具
关键词:快速定位问题Weinre
关键词:简单易用、专治疑难杂症
使用步骤如下:
安装
npm install -g weinre运行
weinre --httpPort 8080 --boundHost -all-调试
方法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);
访问页面之后,点击书签。手机访问
使用charles代理到本地,访问需要调试的页面。
可以看到连接的target
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 数据库路由中间件MyCat - 源代码篇(2)
【推荐】 debian 7上源码编译MongoDB 3.4版本
【推荐】 3分钟掌握一个有数小技能:制作动态标题
mobile web页面调试方法的更多相关文章
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
- java web 入门级 开发 常用页面调试方法
这里介绍一下Java web 入门级开发中常用的代码调式方法; ( 仅供入门级童靴 参考) ; 工具: chrome 浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...
- 记一个在移动端调试 web 页面的方法
1. 工具:Weinre 2. 安装:npm -g install weinre | npm install weinre -g --registry=https://registry.npm.tao ...
- JavaScript WEB页面调试
不管我们开发什么项目,都需要使用调试.后端的调试比较简单.前端js调试稍微复杂了一点,但是也别怕,因为我们有很多调试前端js代码的浏览器工具.比如IE浏览器.firefox浏览器.chrome浏览器等 ...
- web程序调试方法
1.火狐浏览器查看链接指向的后台方法(controller方法) f12 进入firebug 点击bug旁边的按钮 即第一排第二个按钮 将鼠标划到想要找的链接 在firebug中显示响应的后台跳转.d ...
- web 页面传值方法
一. 使用QueryString变量 QueryString是一种非常简单也是使用比较多的一种传值方式,但是它将传递的值显示在浏览器的地址栏中,如果是传递一个或多个安全性要求不高或是结构简单的数 ...
- .net的.aspx页面调试方法
做.net网站开发,有时候需要调试和察看变量, 1.设置好断点以后, 2.设置调试:VS 菜单: 调试————〉附加到进程————〉在 “可用进程” 列表中选择 标题为 "ASP.NET D ...
- WEB页面实现方法
页面分类 :添加页.修改页.列表页.详情页.功能页.删除 一.添加 1) 准备tpl.action(添加页.添加页保存公用一个action),并确认是否登录才显示2) 书写添加页action代码,例如 ...
随机推荐
- 翻译Lanlet2
Here is more information on the basic primitives that make up a Lanelet2 map. Read here for a primer ...
- css sprite技巧详解
1. [代码][CSS]代码 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示
Delphi 读取 c# webservice XML的base64编码图片字符串转化图片并显示 在 开发中遇到应用c#及asp.net的在的webservice 保存图片并以xml文件形式现实出来 ...
- How to handle Imbalanced Classification Problems in machine learning?
How to handle Imbalanced Classification Problems in machine learning? from:https://www.analyticsvidh ...
- PHP把时间转换成几分钟前、几小时前、几天前的几个函数、类分享
这篇文章主要介绍了php计算时间几分钟前.几小时前.几天前的几个函数.类分享,需要的朋友可以参考下一.函数实现实例1: <?php header("Content-type: text ...
- Java 使用itext生成pdf以及下载
使用方法: 1.需要两个jar包: iText-5.0.6.jar //必须使用该版本,否则缺少相关的方法 TextAsian.jar //是为了文档中正常显示中文所必须引用的包 TextAsi ...
- 机器学习 Generative Learning Algorithm (B)
Naive Bayes 在GDA模型中,特征向量x是连续的实数向量,在这一讲里,我们将要讨论另外一种算法用来处理特征向量x是离散值的情况. 我们先考虑一个例子,用机器学习的方法建立一个垃圾邮件过滤器, ...
- 根据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 ...
- JS性能之setTimeout与clearTimeout
测试环境: chrome浏览器 结论: 1 一个页面用setTimeout越多,该页面消耗的内存就会越多,几乎成正比. 2 在'startCount(1000000);-->100万'情况下,不 ...