Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍

移动开发
Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍是本文要讲解的内容,主要是来学习Sencha Touch中chrome浏览器中常用的调试功能,来看详解。

Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍的内容是本文要讲解的内容,继续上篇Sencha Touch快速入门2.0之Sencha Touch App开发,再为大家奉献一篇入门教学,这次是关于浏览器调试的。

无论你是在学习,还是做项目,熟练地掌握浏览器的调试功能,都将会有很大的帮助。调试能够帮助你快速地了解框架,处理bug,让你不论处理什么都能够更快速,更准确。

在这篇文章里,我将详细地为大家介绍chrome浏览器中常用的调试功能,对于其他的浏览器,大家同样可以触类旁通。接下来->打开chrome->按F12。开始chorome调试之旅吧!

一、JS调试

选中Script标签之后,我们来到了JS调试界面。(单击放大)

Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍

为大家讲解一下各个区域的作用。

左上角有一个下拉框,用于选择JS文件,还有后退以及前进按钮,可以快速地返回之前调试的JS文件。

左侧的代码窗口,用处自然不必多说。在行数的地方点击鼠标可以设置断点。程序运行到断点处时,可以鼠标在代码上悬停,以查看变量、表达式的值。

右上角的几个小按钮,用于控制程序的执行(当然,要设置断点以后才有用。)功能分别为执行至下一个断点(F8)、执行至下一个函数调用结束(F10)、执行至下一个函数内部(F11)、跳出当前函数(Shift+F11)、禁用所有断点。

右侧的***个区域,用于观察变量。点击‘+’添加你要观察的变量或者表达式,这样的话,无论程序运行到哪里,你都能够监视一些重要的值。

右侧的第二个区域是函数的调用堆栈。在这里,我们可以看到函数的嵌套调用结构,点击可以快速转到函数的所在位置。

右侧第三个区域,同样是用于观察变量的。这里分为Local和Global两个。Local里,可以看到所有的当前作用域内的变量。而Global基本可以看到所有全局变量。

右侧第四个区域,断点管理。

按Esc键快速调出下面的的控制台,在这里可以看到程序的各种输出,。包括log、警告、异常。如果我们在代码里面写了console.log(o);语句,则o会在这里作为对象被输出,这是调试过程中比较常用的功能。该值得一提的是,在这里,我们可以直接输入代码,立即执行。

其他区,大家自行探究吧,说了这么多,剩下的也就是孰能生巧啦。

二、CSS样式调试

好吧,这回,我们不用F12。换个cool的方法。在页面上你想调试的元素上点击右键->审查元素(N)。然后,你就快速地来到CSS调试界面,并且已经帮你定位好元素。

Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍

左侧是实时html结构。

右侧***个区域是所有对当前元素起作用的CSS属性。

右侧第二个区可以看到文件里相应的CSS原文。

在这里,你可以直接对实时html结构进行编辑、可以对css进行编辑。重点是,你可以马上看到修改的效果,再也不用一遍又一遍地刷新页面了!

威老感叹,这调试工具强大的一塌糊涂,但不知道火狐之类的浏览器调试功能如何呢。

也不必多想了,Sencha Touch只支持chrome和safari,火狐再强大也用不上。

小结:Sencha Touch快速入门2.0之Chorme浏览器调试功能介绍的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-02 15:18:49

Sencha Touc

2011-09-02 15:58:38

Sencha Touc布局

2011-09-02 15:42:55

Sencha Touc布局

2011-09-02 16:08:09

Sencha ToucAPI文档

2011-09-02 15:12:29

PhoneGapSencha Touc

2011-09-05 10:39:03

Sencha Touc离线存储数据库

2011-10-26 10:21:40

Sencha Touc组件

2011-10-26 10:43:19

Sencha Touc

2012-01-10 13:21:33

Sencha Touc使用data包

2011-09-30 14:15:10

Sencha ToucSencha Touc

2011-11-28 13:42:55

Sencha Touc组件选择器

2011-10-18 09:49:40

新特征Sencha Touc

2011-10-26 10:12:53

Sencha Touc布局

2011-10-26 10:32:05

Sencha Touc数据视图

2012-03-19 17:25:22

2012-03-20 11:31:58

移动浏览器

2012-03-20 11:41:18

海豚浏览器

2012-03-20 11:07:08

2012-03-20 11:22:02

QQ手机浏览器

2012-03-19 17:17:00

移动浏览器欧朋
点赞
收藏

51CTO技术栈公众号