指尖上行--移动前端开发进阶之路(读书笔记)----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……

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值