手机网站调试神器之chrome控制台

现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网。于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓。对于我们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自带的功能就可以满足我们普遍手机网站调试人员的需求,何乐而不为呢。

时间: 2024-12-09 12:32:21

手机网站调试神器之chrome控制台的相关文章

手机网页调试利器: Chrome

新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器.(即开发者模式) //==============================================

Chrome 控制台console的用法(学了之后对于调试js可是大大有用)

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

chrome开启移动设备模拟-用浏览器访问手机网站

版本不同,略有不同.这是基于43.0.2357.130 的chrome的操作. 1.按F12开启开发者模式. 2.按图片所示顺序开启emulation模式,可以选择各种设备来访问网站的手机网站.对于一些识别手机端的网站可以查看源代码.. 3.那么有时候不想用手机样式浏览了,很多同学找不到关闭emulation的地方,其实在上图,F12 下有一个小小的手机图标,按一下,就切换回电脑浏览了.很简单!

Chrome 控制台 如何调试javascript

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

如何利用好chrome控制台这个神器好好调试javascript代码

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

Chrome控制台 JS调试的一些小技巧

$ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined. Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选

在电脑上测试手机网站全攻略

最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多扣啊,没办烦啦,没有手机就用电脑模拟呗,相办法代替,查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法. Chrome* chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难.觉得无从下手. 段亮觉得有以下几点: 一.没有完整的思路和流程 就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思路. 二.把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站,就相当于学会了顶尖的绝世武功

Chrome 控制台console的用法(转)

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents&q