最早开始调试移动端网页时,本人都是采取PC上改几行代码,手机上刷新一下看效果这种笨方法来开发的,效率低而且容易让人抓狂.最近偶然发现原来可以使用PC上的浏览器来调试移动设备,不由得感叹相逢恨晚. 工具: Chrome浏览器(PC) Chrome Dev浏览器(移动设备) 步骤: 在移动设备上安装Chrome Dev浏览器,可以在软件市场找到,安装完成后用该浏览器打开需要调试的网页 在Chrome(PC)上输入chrome://inspect/ 将移动设备通过USB与PC连接,期间会出现授权,是否…

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64…

Fiddler是一个免费的Web调试代理,支持任何浏览器.系统以及平台.这个工具是进行Web和App网络开发的必备工具,戳此处下载. 根据Fiddler官网的描述,具有以下六大特点: Web调试 性能测试 HTTP/HTTPS流量记录 Web会话处理 安全测试 自定义扩展性 本文讨论的主要内容是如何设置Fiddler,使PC和移动设备上可以抓取HTTPS数据包. 首先,在菜单栏选择Tools->FiddlerOptions,切换到Connections选项卡 第二步,勾选允许远程连接,并设置一个…

最近在看响应式网站的开发视频,其中有一部分非常有用,就是在多个设备上进行网页调试,通过使用browser-sync来实现,具体的步骤可以参照官网(http://www.browsersync.cn/) 按照步骤操作就可以了,当然电脑必须安装了node.js,在这里我主要说一下我遇到的问题,就是在调试网页的时候发现所监听的网页不会出现在浏览器中,有以下两个原因: 1:在启动browser-sync的时候要将你所监控的文件路径以及文件用双引号括起来,不可以用单引号 2:你自己写的html必须命名为"…

平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有developer Tool,只能傻傻的用alert来输出一些调试信息,修改了CSS样式也必须不断的刷新,文件多了有时候还得经常清缓存,效率极其低下.神啊,救救我吧! 于是weinre出现了!它是一个基于nodejs的工具.可以把远程的页面运行情况映射到本地,在本地的浏览器中查看调试信息,修改的css样式…

准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer.android.com/sdk/index.html下载android-sdk开发包,安装后,执行SDK Manager.exe,安装android SDK Platform-tools工具包. 环境变量配置: 在环境变量添加path,并添加路径<sdk>/platform-tools; 添加后…

在需要调试的js文件最顶部加上代码就可以看到了: console.log('haha'); debugger;…

我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具. 但是 iOS 6 的发布解决了这个问题. iOS 6 给 Safari 带来了远程的 Web 检查器工具(Remote Web Inspector),你可以通过模拟器或者真实的设备(通过 USB 连上 Mac)进行调试.下面我讲讲详细的调试过程:…

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch…

参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Brower Page Tabs/WebViews 注意:有个很坑爹的地方,使用该功能需要FQ,你懂得. 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备…