越来越多的移动端开发工作,需要我们有一个好的调试工具,以解决各类真机才会遇到的BUG,最近使用了一款DebugGap 的工具,非常方便,在这里推荐给大家. 官网地址 DebugGap  . 按需求下载自己所需的版本,解压后打开vide.exe文件运行该应用,如图所示.除此之外还需要安装一个vide-plugin-debug-webview插件,在图中的路径点开Plugin Management ,如图二,下载该插件. 下载完成后点击如下图所示图标 配置你要调试的页面地址,如下图 在vide-pl…
× 目录 [1]特性 [2]安装 [3]设置[4]移动端 前面的话 chrome的开发者工具可以很好地做好模拟工作,但毕竟模拟和实际还是有差别的.所以,真机测试是一定要做的,如何高效地进行真机测试呢.个人感觉,还是BrowserSync用得比较称手.本文将详细介绍如何应用BrowserSync进行移动端真机测试 特性 BrowserSync能让PC.各移动设备上的页面同时实时地响应文件的更改,而不用刷新操作.而且,当在其他一个设备上进行点击等行为时,该行为也会同步到其他浏览器中 安装 Brows…
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试面板 下载地址 Github BootCDN…
在近期的移动端开发中,发现浏览器中调试可以正常滚动,而在真机中却不能滚动了,这是为什么呢??? 总结了一下主要有一下两方面:css的设置和js的设置 1.之前有设置css的原因,下面分先说css的问题,主要排查overflow:hidden: 检查也有一定的顺序,检查超出高度的标签是否用了overflow:hidden:最好先检查html或body是不是加了height:100%:overflow:hidden:然后再看包裹在最外边的元素是否加了overflow:hidden; 2.js,因为此…
一.安装 首先确保你的电脑上有node环境,然后使用cnpm或npm 安装 windows下 npm install weinre -g --registry=https://registry.npm.taobao.org mac下 sudo npm install weinre -g --registry=https://registry.npm.taobao.org   安装成功后会提示安装的位置(留意这个地址,下文还会用到) [nodejs安装] 1 .下载nodejs nodejs官网下…
1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Linux. 2. 安装 BrowserSync 您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync.打开一个终端窗口,运行以下命令: npm install -g browser-sync 您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任…
小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler…
项目中实际使用 在项目中实际使用的时候发现还是有很多问题的 最初使用方式  <script src="vconsole.min.js"></script>  <script>          // init vConsole          var vConsole = new VConsole();  </script> 问题一:按照文档使用,发现页面引入JS的位置报警告 警告:Cross-Origin Read Blocking…
很多时候我们对移动端进行测试的时候,有pc端的测试,也有真机上的测试,pc的测试就不多说了,因为其实基本上大家都懂的.真机测试上也有几种方法,这里就推荐三种: 移动端真机调试方法 chrome真机调试 weinre调试 spy-debugger调试 当然我这里就不详细去讲这几种的真机调试到方法了,详细可以看 9102 了,你还不会移动端真机调试? 但是我这里就讲一下另一种不一样的真机测试--node打开移动项目 step1 首先先准备好基本的项目,因为个人用angular比较多,这里就拿angu…
前端页面在ios端真机测试出现的问题 由于苹果对于性能的要求是近乎苛刻,如果没有可点的特性的元素系统默认不会给它响应事件,因此真机测试时容易添加不上绑定事件 解决办法: 1.通过js判断当前是否为苹果设备,如果是则加上. 代码如下: if(/ip(hone|od)|ipad/i.test(navigator.userAgent)){ $("body").css("cursor","pointer"); } 其实我到时觉得css代码更干脆 *{ c…