工具/原料
chrome浏览器 Mozilla firefox 电脑
方法/步骤
1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。
2、选择指定的dom节点进行查看和编辑。
3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0i<10i++){alert(i)}调试截图如下：
4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。
不知道什么时候开始，国内开发者都喜欢说H5，说实话，HTML升级了不假，单另一个分之好想说H5就很洋气真的就是有点驴唇不对马嘴了。
调试网页，H5，HTML，WebApp，H5App，管它叫什么呢，在不同比例下不需要任何辅助工具，Mac Safari即可完成页面调整，而且比例看得清，妈妈再也不用担心我的页面适配不好了。
步骤：
1、Safari打开“开发”模式
2、打开响应式设计模式
3、欢快的使用预置页面比例，也可以上下左右拖拽到合适的尺寸
举例说明：
1、打开开发模式，多数机器正常Safari开发模式是默认关闭的，一般我们调试网页会用firebug，或者chrome抓request或请求。所以第一步是打开开发者模式，在Safari里系统偏好设置-高级，菜单栏显示 开发 blabla...勾起来。
2、开发-进入响应式设计模式
3、撒欢吧，顺便说一句，它还可以模拟1x，2x，3x图的显示，iOS开发的老铁们双击666，甚至可以选择浏览器内核，做一些JS验证就比较方便了
1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。
2、链接电脑（Mac）
2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）
2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：
2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：
3.调试网页
此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：
