CSS调试技巧五则,兼谈“提问的艺术”

CSS开始进入布局领域,并逐渐开始广泛地被使用,越来越多的设计师转向CSS,然而随着使用的逐步深入,会发现使用CSS的一个问题是,懂得越多,遇到的问题就越多。在实际制做网站的时候,总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语,单词、语法都背了一大堆,但是真到用的时候,还是总遇到不会说的东西。

实际上这还是学习途中的一个阶段,算是成长的烦恼。毕竟每解决一个问题,功力就会精进一层。因此,除了彻底把CSS的原理搞清楚之外,就要尽可能多地实践,解决实际问题,这样终归是可以把问题都解决的。

在实践中,最关键的问题就是如何调试,也就是在遇到页面表现和预想的不一样的时候,怎么找到问题的关键。当然,前提是你对你写的代码基本上是清楚的,否则谈不上调试。

对于CSS而言,本质就是大大小小的盒子在页面上摆放,你不是设计师,而是排字工人,你眼中看到的不是文字,不是图像,就是一堆盒子!你要考虑的就是盒子与盒子之间的关系!标准流?并列?上下?嵌套?间隔?背景?浮动?绝对?相对?定位基准?等等等等……

技巧1:设置背景色或者边框,确认错误范围

归根到底,任何排版上的错误,都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同,所以如果你本身就是浏览器,一切错误都不会出现。

因此,每当你发现表现页面不如你意的时候,比如希望在左边跑到右边了,希望在一行的变成两行了等等,都首先明确每个盒子的范围,这时你可以通过临时给盒子设置背景色,或者设置一个1像素边框的方法,清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色,因为设置边框会改变布局,这就好像我们使用温度表测量温度,前提是认为温度表本身不会影响被测物体的温度,实际上物理学告诉我们,任何两个物体都是相互影响的,即所谓测不准原理。但有时对于复杂的页面,背景色可能无法看出范围,还是需要使用边框来完成这项任务,但你要排除增加的临时边框引入新的问题的可能性。

当某个盒子的范围不是你所希望的,恭喜你,你已经找到错误所在了,接下来就是分析为什么浏览器要把它放在这里,而不是按照你的意愿去放置?你经过这一步仔细计算,你的所有代码都是符合CSS规范的,那么你需要确认这是浏览器错了,而不是你错了。不过你应该相信,99%的可能是你粗心算错了,1%的可能是浏览器有错误。就好像你回忆一下,上学时参加过的所有考试,老师确实有时会把你答对的题目判错,但是这种概率很低。

技巧2:删除无关代码,暴露核心矛盾

经过上一步的排查,你已经怀疑浏览器有问题了,那么就需要确认这一点。而这时你的网页很可能很复杂,内容很多,各种因素互相影响,都会干扰你的判断。解决方法就是把仅和你有问题的部分相关的代码提取出来,或者把无关代码全部删除,总之目的就是尽可能找到出现问题的最小代码集合,这样你才能找到问题的本质原因。事实上,很多情况下,从一个复杂的网页一点点删除代码的过程中,你的问题就解决了,这样你一定要注意,删了哪些代码,你的问题就解决了,这就是问题的原因,如果你是个聪明人,一定要把这个问题真正搞懂,不要只管结果,不问为什么。遇事多问几个为什么,你的提高会快得多。

事实上,调试能力是非常重要的,任何人在实际工作中,肯定都会遇到做出来的效果和自己希望的不一致的情况,这时就要看调试能力了。

就好像,家里停电了,你一定会首先出门看看邻居家的是不是有电,这样就判断出问题出在自己家里,还是整个楼停电了。如果整个楼都停电了,那就只有等了;如果只是自己家停电了,那就要再分析一下是不是哪里短路了(比如水洒在电线上了),或者有什么电器过载了(比如你把家里的所有空调、热水器、电火锅这些东西都打开了),等等,这实际上就是在确定故障点,道理和作页面是完全类似的,第一步就是缩小范围,只是你可能没有意识到。因此,你可以把生活中的一些道理,移植过来,很多问题就好解决了。(如果一出问题,就找物业的人来修,应该是比较适合做领导的人,呵呵。)

技巧3:先用Firefox调试,然后使它兼容IE

关于Firefox和IE的差异问题,已经谈过很多了,这里不再细说,总之原则就是,Firefox对CSS规范遵守的最好,调试的时候先用Firefox调试,然后再使网页兼容IE;其次,不要在一种浏览器完全做好以后,再用浏览器调试,而是每一步都保证在各浏览器中这个正确显示。

技巧4:善于利用工具,提高调试效率

这里要说的是两个非常方便的工具,他们都是以Firefox的插件形式存在的,分别是“Web Developer Toobar”和“Firebug”。当然,他们都不能向傻瓜相机一样,只要按一下快门,就告诉你问题出在哪里。他们的作用都是可以帮助你尽可能方便地了解浏览器是如何看待你的代码的。比如,通过他们,可以方便地查看每一个盒子的范围,不需要你在人为地设置边框了,通过Firebug,可以实时动态地修改CSS属性设置,这都可以大大提高你调试的效率。这里暂时没有篇幅来讲解这两个工具的用法了,有兴趣的读者可以先查一查相关的介绍。

技巧5:善于提问,寻求帮助

互联网出现了,这个伟大的家伙给我们带来了太多的方便。有了Google,我们可以寻找答案,有了各种网站论坛,我们可以去向别人请教,这都是我们学习的最好途径。但是有一点,这也需要一些提问的技巧和艺术。这里给您的建议就是,在提问之前,一定要按照前面说的几点,自己亲自研究过你的问题,你的问题可以用一两句话很具体地说明,可以配有简洁的代码,使看到你的问题的人,可以很容易理解你的问题,并“重现”你的问题。这一点非常重要,千万不要把大段大段的代码,贴到某个论坛上,那样你得到帮助的机会会变得小得多。你要相信,热心人固然是很多的,但是热心到能够花很多时间一点点分析你的大段大段代码,然后大海捞针一样地找出某个地方存在问题的热心人就不多了。事实上,这些功课是你应该提前做好的,你至少应该尽可能缩小问题的范围,到一个合理的程度。互联网、Google、论坛都是工具,也仅仅是一个工具,谁能用得好,谁就能获得更快的提高,关键还是要看使用工具的主人。

时间: 2024-08-01 12:47:51

CSS调试技巧五则,兼谈“提问的艺术”的相关文章

一起谈.NET技术,VS2010中的调试技巧

这是我的博客中关于VS 2010和.NET 4发布系列的第二十六篇文章. 今天的博文将介绍Visual Studio中的一些实用调试技巧.这是受我朋友Scott Cate (他发表过几十篇很棒的VS技术文章) 启发.他最近告诉我,许多Visual Studio下的程序员,甚至一些很有经验的开发人员,都不知道这些技巧.希望这篇文章能帮你掌握这些技巧.它们都很简单,却能帮你节约大量的时间. 跳到当前光标处(Ctrl+F10) 我经常看到人们为了到达目标代码位置,而在程序中早早设定了断点,然后反复地按

CSS独门技巧大放送

css|技巧 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区分大小写

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript.熟悉工具可以让工具在工作中发挥出更大的作用.尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中已经列出了14个你可能不知道的调试技巧,但是可能需要你牢记在心,以便在下次需要调试JavaScript代码时使用!  1. debugger  除了console.log, debugger是我们最喜欢.快速且肮脏的调试工具.执行代码后,Chrome会在执行时自动停止.你甚至可以把它封装成条件

VS2010中的调试技巧

这是我的博客中关于VS 2010和.NET 4发布系列的第二十六篇文章. 今天的博文将介绍Visual Studio中的一些实用调试技巧.这是受我朋友Scott Cate (他发表过几十篇很棒的VS技术文章) 启发.他最近告诉我,许多Visual Studio下的程序员,甚至一些很有经验的开发人员,都不知道这些技巧.希望这篇文章能帮你掌握这些技巧.它们都很简单,却能帮你节约大量的时间. 跳到当前光标处(Ctrl+F10) 我经常看到人们为了到达目标代码位置,而在程序中早早设定了断点,然后反复地按

[译] 前端调试技巧与诀窍

本文讲的是[译] 前端调试技巧与诀窍, 原文地址:Debugging Tips and Tricks 原文作者:SARAH DRASNER 译文出自:掘金翻译计划 译者:lsvih 校对者:loveky,ymz1124 前端调试技巧与诀窍 编写代码其实只是开发者的一小部分工作.为了让工作更有效率,我们还必须精通 debug.我发现,花一些时间学习新的调试技巧,往往能让我能更快地完成工作,对我的团队做出更大的贡献.关于调试这方面我有一些自己重度依赖的技巧与诀窍,同时我在 workshop 中经常建

Eclipse的Debug调试技巧

作为开发人员,掌握开发环境下的调试技巧十分有必要.我们在编写java程序的过程中,经常会遇到各种莫名其妙的问题,为了检测程序是哪里出现问题,经常需要增加日志,看变量的值,这样调试很麻烦.假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方便的功能.那能为你省下一些时间,也将会使你的生活更安逸.轻松. 首先我们需要注意三个点:不要使用System.out.println作为调试工具\使用一个日志分析器来阅读日志\启用所

idea 高级调试技巧

两年前写过一篇关于idea的高级用法,今天再来一篇关于调试方面的技巧讲解:  一.条件断点 循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值. 参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件即可,这样调试时,就会自动停在i=10的位置   二.回到"上一步"  该技巧最适合特别复杂的方法套方法的场景,好不容易跑起来,一不小心手一抖,断点过去了,想回过头看看刚才的变量值,如果不知道该技巧,只能再跑一遍.

VS2010“.NET研究”中的调试技巧

这是我的博客中关于VS 2010和.NET 4发布系列的第二十六篇文章. 今天的博文将介绍Visual Studio中的一些实用调上海徐汇企业网站制作试技巧.这是受我朋友Scott Cate (他发表过几十篇很棒的VS技术文章) 启发.他最近告诉我,许多Visual Studio下的程序员,甚至一些很有经验的开发人员,都不知道这些技巧.希望这篇文章能帮你掌握这些技巧.它们都很简单,却能帮你节约大量的时间. 跳到当前光标处(Ctrl+F10) 我经常看到人们为了到达目标代码位置,而在程序中早早设定

&lt;转&gt;反调试技巧总结-原理和实现

一. 前言    前段学习反调试和vc,写了antidebug-tester,经常会收到message希望交流或索要实现代码,我都没有回复.其实代码已经在编程版提供了1个版本,另其多是vc内嵌asm写的,对cracker而言,只要反下就知道了.我想代码其实意义不是很大,重要的是理解和运用.    做个简单的总结,说明下实现原理和实现方法.也算回复了那些给我发Message的朋友.     部分代码和参考资料来源:1.<<脱壳的艺术>> hawking2.<<window