指尖上行--移动前端开发进阶之路（读书笔记）----1.2页面调试

chapter 1 移动页面开发

• 页面布局
• 页面调试
• 常用库和框架

1.2 页面调试

1.2.1 Chrome开发者工具

Chrome为开发者提供了一个强大的工具来调试浏览器上的网页。————–Chrome DevTools

url：https://developer.chrome.com/devtools

Chrome调试工具除了能在电脑调试PC页面外，还可以 调试Android设备的移动端网页。

准备工作：

• PC上需要安装Chrome 32以上的版本
• 把Android设备USB线连接到PC上
• 移动总段要升级到Android 4.0以上的版本，并需要安装Chrome浏览器

准备工作做好之后，就开始实际操作，进行调试了。

• 第一步：在Android设备上点击设置，找到“开发者选项”，并且选中“USB调试”。（不同设备的开发者选项打开方式不一样，有的甚至是隐藏的，需要激活才看得到，具体操作可根据社保型号去百度搜）

  

• 第二步：在电脑哦Chrome导航中输入Chrome://inspect,这时候能够看到Chrome已经连接上了移动设备。

  

• 第三步：在移动设备中打开Chrome浏览器，输入需要调试的页面，我们可以看到PC的Chrome显示出了移动设备上需要调试的页面条目。

  

• 第四步：点击Inspect，就可以利用Chrome Dev Tools开始调试移动端页面了。
  • inspect：检查；视察
  • focus tab 切换（聚焦）页面tab
  • reload 重现加载
  • close 关闭
  在电脑上做任何操作，手机也会响应该操作；反之在手机上做任何操作，电脑inspect页面也会响应操作。即手机和电脑同步。

  

1.2.2 Mac电脑调试

苹果IOS 6.0以上版本OS的Safari自带了一个“Web检查器”的功能性，通过它，可以对终端设备的网页做远程调试。

具体步骤：

• 第一步：把终端设备（iPhone / iPad）通过USB线连接到Mac电脑上，然后在IOS设备的设置中依次找到“Safari>高级”，打开“Web检查器”。
• 第二步：在Mac电脑的Safari工具条里单击“开发”菜单，选择需要调试的设备网页地址。
• 第三步：在呼出Web检查器之后，就可以在浏览器中远程调试IOS移动设备的页面了。

1.2.3 自研工具

内部工具MPT……