2011-08-10 44 views
4

我是(现代)网络开发的新手。无论如何,我下载了一个图像旋转器和一个使用jquery的下拉菜单。现在,我把它们放在一起,它们工作得很好。但是,通过这个下拉菜单,我有一个水平切片的图片,而不是一个垂直的选择列表。如何“调试”一个CSS文件

如果我只是把图像A,B,C - 无论出于何种原因,它们将它们放置在彼此垂直而不是从左到右。所以,我试图把它们放在一张小桌子里 - 它强制图片之间存在一个小的间隙,而不是让它们无间隙地从左到右 - 即使我说border = 0。

我该怎么做调试这个?

+1

如果我对您的*实际问题*的理解是正确的,那么您需要“编写新代码”,而不是“调试现有代码”。 – thirtydot

回答

4

下载萤火虫,或者尝试使用谷歌Chrome网上应用调试器(CTRL + 转变 + Ĵ

消防错误可能对你更好,因为它可以让你编辑的网页和看如何确定的CSS调用会影响页面。这是我用所有的时间

还有一个下载(生病得到链接),让您在其他浏览器中运行萤火

编辑

Firebug lite (For Google Chrome)
Firebug (For Firefox)

+0

CTRL + SHIFT + C :-) – Neal

+0

我不知道这工作太。我猜他们觉得他们需要两个捷径 –

+0

有几个CTRL +在Chrome不同的开发选项卡Shift + {X}。有一个列表的地方。 – Neal

3

试试Firefox的Firebug插件。您可以使用它来确定哪些规则适用于您的dom元素,只需点击一次即可。

您还可以即时编辑CSS并立即查看更改 - 当您移动物体时,在每次更改后都要刷新。在Firebug中对CSS进行更改,当您满意时,将其复制回您的文件中。

+0

现在Firebug是如此不可或缺的。让我想知道我们是如何做到的“在过去”。 – numbers1311407

2

现代浏览器会让你检查页面元素的确切CSS。您可以使用这些工具进行调试。

  • 在Chrome中,用鼠标右键单击该元素,然后单击“检查元素”,或在右上角点击扳手图标,点击工具>开发者工具,然后单击要素选项卡,检查的元素。

  • Firefox有FireBug插件,您可以从here下载该插件。

  • IE有Developer Tools。刚打F12。

  • 我不确定Safari有什么,但它可能类似。

2

我建议为Firefox(插件)“Web Developer Toolbar”,然后转到CSS->查看样式信息。

1

主要的调试工具是使用“!important”规则来强制执行一些规则,以便您可以确定问题,还可以使用Firebug for Firefox和Chrome和Chrome浏览器等工具来帮助您查看计算出的CSS。也为Firefox Web开发工具栏上有丰富的DOM工具,它可以让你检查现场DOM树

2

大多数Web浏览器内置的网络督察。您可以使用这些检查页面上的元素,检查,添加或删除样式。通常有一个调试问题,你会试图删除样式,但偶尔你也需要添加它们。这里有一个例子: 如果我有:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Hello World</title> 

<style> 
    #hello { color: white } 
</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
</body> 
</html> 

#hello将不会出现。我可以使用谷歌浏览器中的Web Inspector来查找: enter image description here