可以使用Chrome浏览器，Chrome浏览器带有移动模式
Chrome打开Html5网页，点击F12打开开发者工具，然后点击下图中的手机图标，重新刷新页面，就可以模拟在移动设备上的样式，可以由不同的移动设备供选择
1、如果你能FQchrome在32版本后就自带了移动端调度工具，可以在Android直接联调，但唯一遗憾的是，在我大天朝要FQ后才能行的通，我自己试了后公司好几个机器联不上…
2、如果你有苹果电脑和iphone
苹果电脑上的safari 60版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面，前提是你得有个苹果电脑和iphone手机，但如果你是Android的话，就没办法了
符合前端B格的“小苹果”
自己在公司里也是开发Mobile端的HTML5页面的，也深受调试页面之苦，移动端的WEB页面坑又多，所以用node-webkit技术做了一个客户端，专门用来调试，现在每天工作之前都先打开“小苹果”
小苹果用的是node-webkit技术打包成客户端，其实内部实现都是web 页面与nodejs技术，所以特别符合前端B格。而且由于用了node-webkit技术，客户端可以跑在windows和mac电脑上，齐活儿了
小苹果官方网站
里边有下载及安装和使用的方法需要先配置一个调试的服务器，同时需要安装对应的浏览器插件配合使用
1 首先要安装WebStrom以及在Chrome浏览器里配置好Live Edit插件。
2 运行WebStrom，创建一个web project。
3 修改indexhtml文件如下：
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<carslength;i++)
{
documentwrite(cars[i] + "<br>");
}
</script>
<p>
只能在 HTML 输出流中使用 <strong>documentwrite</strong>。
如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
4 设置断点，选择indexhtml文件，从右键菜单打开debug。1、Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：
左侧就是对页面HTML结构的查看与编辑，可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项;审查元素了么？这是不是说明这个开发者工具的页面也是HTML来的呢？点一下就知道了哦，嘿嘿）
还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin）
注意到上面的Properties没有？这个很有用哦，可以看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。1、首先将手机设置为调试模式，方法：设置——应用程序——开发——USB调试，打上√即可。
2、用数据线连接至电脑，在电脑上安装豌豆荚，此时豌豆荚会帮你安装驱动，安装好后豌豆荚就可以连接上手机了用adb命令测试是否有装置已连接。
3、如果无法测试装置是否连接，就是用adb server启动服务项开始在真机上调试，在eclipse中选择Run——Run Configurations，在左边选择好你要调试的工程，然后将右边切换至Target标签下。
6连接至真机调试，可选第一个或第二个，这里我直接选择第一个，点击Run，等待几秒钟出现以下界面。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）