前端调试工具汇总

Chrome模拟器

1.在PC或MAC上打开Chrome浏览器，打开想要调试的页面，然后打开开发人员工具点击开发人员工具顶栏上的手机图标，即可开始调试。
2.在页面顶部可以看到设备选择下拉菜单 Device 和 模拟网络环境的下拉菜单 Network ，及左侧的清除选择按钮和打开关闭 media queries 的按钮。
3.打开设置左边的那个类似 >三 的图标，切换到 Emulation 标签，可以更细粒度地调整，来定制化你的模拟。

调试Android上的Chrome

1.在Android设备上安装Chrome浏览器。
2.开启当前Android设备的USB调试。
3.在PC或MAC上安装chrome浏览器（版本>=32）。
4.用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面。
5.勾选界面中的 Discover USB devices ，直到搜索到你的Android设备。
6.在移动设备上弹出的是否允许远程调试上，选择“允许”。
7.在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 inspect 开始调试。

IOS调试

1.在iOS设备上打开允许调试：设置→Safari→高级→打开”web检查器“。
2.在MAC上打开Safari的开发菜单：顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单。
3.在iOS设备上的Safari浏览器中打开要调试的页面，然后切换到MAC的Safari，在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页，即可开始远程调试。
4.如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试。