mobile web页面调试方法
2024-09-04 13:52:11
此文已由作者张含会授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
开发过程问题排查
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分钟掌握一个有数小技能:制作动态标题
最新文章
- java代码解压zip文件
- HttpClientUtil简介
- 计算机组成原理 及CPU,硬盘,内存三者的关系
- Cocoapods 更新后 使用
- Spring事务解析2-标签解析
- SQL2008性能计数器注册表配置单元一致性失败
- [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果
- IOS常用的系统文件目录介绍
- Codeforces Round #325 (Div. 1) D. Lizard Era: Beginning
- Windows Phone动画
- 01-03-02-2【Nhibernate (版本3.3.1.4000) 出入江湖】CRUP操作-Save方法的一些问题
- 数论/the second wave
- squid服务搭建
- 超酷的jQuery百叶窗图片滑块实现教程
- 基于JAX-WS的WebService实现
- xWorks下的硬盘启动方法
- Jquery blokckUI 快速入门
- 20160220.CCPP体系详解(0030天)
- 干货!从Tomcat执行流程了解jsp是如何被解析的,错误提示是哪里生成的。
- SVN Error:Error performing cleanup for
热门文章
- linux挂载/卸载优盘
- SQL truncate 、delete与drop区别及 MSSQL、MySQL 数据库删除大批量千万级百万级数据的优化
- spring学习(5)
- 用cookie登录慕课网络教学中心刷评论
- codeforces 652D D. Nested Segments(离散化+sort+树状数组)
- 【遍历二叉树】07恢复二叉搜索树【Recover Binary Search Tree】
- 分立元件封装尺寸及PCB板材工艺与设计实例
- #include <;deque>;
- 51nod 1450 闯关游戏——期望dp
- 问题5:如何快速找到多个字典中的公共键(key)