Drupal 主题开发 CSS / JS 调试

对于刚开始使用Drupal搭建网站的同学们来说,前端设计是一个很大的问题。CSS和JS的快速调试是Drupal主题设计的一大障碍。

Drupal的主题引擎需要一定的PHP基础,同时灵活的界面生成规则,复杂的Class样式命名,复杂的样式继承关系,让习惯按照自己XHTML+CSS的规则设计的设计者们头痛。

Chrome和FireFox+firebug(以下简称FFFB)能够为大家大大缓解这个问题。 Chrome和FFFB能够将所浏览的网页DOM、CSS、JS 抽离出来,并且可以在调试窗口中修改并立即呈现效果(当然,只是本地的)。这样就可以快速的调试CSS和JS。

对于HTML,这两个工具都提供了标准的树结构和快速搜索,可以很清晰的阅读文档结构,甚至可以自动分析出文档节点的style继承关系,避免设计CSS大量的覆盖属性产生无用的样式代码。

Chrome浏览器通过点击页面右键,选择审查元素打开该调试界面。Firebug则是Firefox浏览器的一个插件工具,安装好后在当前页面工具条栏就可以找到打开窗口的按钮。 至于选择使用Chrome还是FFFB,两个工具都能为你带来相同的效果,根据个人习惯选择。

Chrome 是个浏览器,直接安装好后就自带该功能,但审查元素工具窗口是英文的,界面看上去不够简洁,稍显复杂。FFFB 需要先安装FireFox后在下载 Firebug安装才能使用,安装过程稍微多一个步骤,不过对于开发者来说,这点工作量不算什么。界面简洁一些,有中文界面,容易使用, FFFB的提示也要好一些。

总的来说,功能差别不大,但是FFFB友好许多。