博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手机网站调试神器之chrome控制台
阅读量:6949 次
发布时间:2019-06-27

本文共 938 字,大约阅读时间需要 3 分钟。

现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网。于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓。对于我们Web前端工程师来说,了解并掌握手机编程的任务也是刻不容缓。下面为大家推荐一款比较不错的手机调试软件chrome。

  经常调试手机网站的码农们,一定会为手机调试软件而发愁,找不到比较合适的手机网站调试工具。我也是无意中发现chrome控制台的软件设置中就具备了各种手机屏幕的尺寸。我们只要用它就很方便完成调试工作了。

  下面介绍一下chrome调试的方法。

  1、打开chrome(下面的步骤如果不成功,请先升级chrome浏览器)

  2、按F12打开Developer Tools,之后点击developer Tools右下角的设置icon,如图(图1-1)

 

梦龙小站

图1-1

 

  3、点击设置icon后,就会看到弹出一个新的界面,如下图(图1-2):

 

梦龙小站

图1-2

 

  4、在上图所示界面点击相应选项,刷新页面就能看到chrome使用对应设备上的相应浏览器渲染该页面,下图(图1-3)展示了chrome可以模拟的设备:

 

梦龙小站

图1-3

  5、下面讲下该工具每个功能项的意思

  User Agent : 设置用户代理,告诉浏览器模拟何种设备中的哪个浏览器

  Device metrices: 选择后,会根据User Agent设置页面的大小,默认值是模拟设置的大小,

  Fit in window :点选后,页面大小会根据窗口大小进行适配

  Override Geolocation:手动设置经纬度,选择后可以输入经度和纬度的值 Emulate position unavailable用来开关是否可以使用地理位置

  Override Device Orientation:设置设备方向,

  Emulate touch events:模拟触摸屏事件

  Emulate CSS media:模拟css 样式屏幕如 print screen tv等

  尽管市面上有众多的手机网站调试工具,但是普遍都得需要下载安装,使用起来非常麻烦。而chrome自带的功能就可以满足我们普遍手机网站调试人员的需求,何乐而不为呢。

你可能感兴趣的文章
“旧城改造”的背后——银泰新零售阿里云解决方案(上)
查看>>
java B2B2C源码电子商务平台 -SpringCloud服务相互调用RestTemplate
查看>>
java B2B2C Springcloud电子商务平台源码-zuul 过滤器机制
查看>>
分布式消息系统:Kafka
查看>>
我的友情链接
查看>>
H3C防火墙路由器做回流
查看>>
Tableau10.5视频课程之常见图形制作
查看>>
Kettle5.4实战项目培训课程
查看>>
获取局域网里一个MAC地址对于的IP地址
查看>>
让phpmailer支持中文名称的附件和邮件标题中文乱码(转)
查看>>
JavaScript强化教程——JavaScript Math(算数) 对象
查看>>
CentOS7部署Kubernetes集群
查看>>
struts2中使用DMI(动态调用方法)方式配置action
查看>>
使用hyperpacer实现AWR报告的同步收集
查看>>
关于os.popen你可能不知道的
查看>>
redhat5.3恢复***
查看>>
linux 下mysql的乱码问题
查看>>
门面模式/Facade
查看>>
webService客户端参数为DataHandler类型时候的参数组装
查看>>
遗传算法入门--连载3
查看>>