HTML+CSS编写静态网站-42 使用开发者工具

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015我们通常把计算机代码中出现的问题称为bug。如果你能够很快的修复bug，或者提前避免bug的出现，这是一种能力的体现。那么，在我们遇到一些常见的问题之前，我们来看看一些可以帮助识别和诊断这些问题的方法。我们将在Google Chrome浏览器中查看开发者工具。如果您使用其他浏览器，您可能会发现类似的功能，但是，更多的设计师和开发人员都喜欢使用Chrome的强大的开发工具以及它对Web标准的支持。所以，如果您要下载Chrome，请前往google.com/chrome，如果你打不开这个网址，可以关注我们提供的科学上网技术，虚幻账号。需要注意的是，Chrome开发工具在平板电脑和智能手机上是不可用的，因此您需要一台电脑才能使用。现在，让我们打开我们的网站，然后我们来打开Chrome开发工具。有三种不同的方式来做到这一点。你可以使用快捷键， Ctrl + Shift + I。这样做就会弹出Chrome开发者工具。您可以点击X关闭它们。打开Chrome开发工具的第二种方法是右键单击页面上的任何元素，然后选择检查。最后，您可以在Chrome中的右上角进入菜单。转到工具，然后选择开发工具，同样也可以打开它：这将在屏幕上打开一个面板，你会注意到，在上方的标签栏有几个不同的面板。第一个是“元素”面板，你可以看到你的HTML文档。这个嵌套的元素树通常被称为文档对象模型树或DOM树。 DOM树并不是Chrome开发人员工具所独有的。这只是HTML文档结构的一种表示方式。要浏览DOM树，我们只需将鼠标悬停在这些箭头之间，然后打开页面上对应的元素。当我将鼠标悬停在每个元素上时，您会看到页面的相应部分会被突出显示。当您通过点击元素选择元素时，嵌套元素的路径将被显示为屏幕底部的导航中：所以我们可以看到，这个特定的列表项被嵌套在无序列表中，该列表包含在section中，它位于我们的包装器div，body html等。您也可以单击开发工具中的检查按钮，然后直接检查页面上的元素。当你通过种方式检查元素时，它会立即帮你找到元素对应的代码。这实际上是开发工具最常见的用途之一。你可能会发现页面上有些东西看起来很奇怪，你只需要按这个按钮检查一下，就知道发生了什么。或者，您也可以直接右键单击页面上的你想查看的内容，然后选择“检查”，它也会直接跳到对应的代码。现在，当我们点击不同的元素时，您会注意到下侧的面板会显示CSS。实际上，在“Style”区域中，可以看到正在应用于选定元素的所有CSS。它还会告诉你相关CSS所在的文件。这个CSS可能看起来和你写的内容有些不一样。实际上，有时浏览器会添加一些默认的样式，或者补偿HTML和CSS中的某些错误，或者拼写错误。这个面板的有趣的地方在于：您可以改变代码，打开和关闭样式等等。这些都不会真正地修改您网站的代码。这只是一个快速实验和调试问题的地方。当你刷新页面后，你所做的任何更改将自动被删除。以我们的列表项为例。当浏览器处于完整宽度的时候，您可以看到其中的某些属性正在被删除，也就是这些被划了横线的代码：这是因为这些代码被我们编写的其他代码所覆盖。所以，举一个例子，我们在这里有margin和padding：但是，如果我们在此处取消选中复选框，你会发现index.html对应的导航项的位置会发生变化。这是因为现在，这里的padding和这边的margin正在被应用：如果我们再次重新框选这两个属性，您将看到我们现在我们编写的main.css会再次覆盖normalize.css。在我们的开发工具中，还有一个重要的地方是右下角的度量区域，你可以在这里看到一个框。这将显示一个元素的内容的确切宽度和高度：比如说，在这种情况下填充为0，Border也是0，最后，如您所见，我们在左侧和右侧有10像素的边距。而且，当我鼠标放在这个区域上时，您可以在页面中看到这两个小的橙色区域，这就是我们应用的margin样式。如果您遇到一些奇怪的间隔问题，那么这个工具真的很方便，因为元素太靠近或者太远，或者不符合你期望的样式。都可以通过这种方式来测算。Chrome开发人员工具还有更多功能，但大多数功能都是针对更高级的JavaScript开发，这超出了HTML和CSS网站的范围。这里简单介绍其他的功能，比如说我们点击Network标签。当我刷新页面时，该个区域将告诉你页面的不同部分加载需要多长的时间。如果您的一个页面需要很长时间才能加载，这可能是一个你需要查看的区域，以便您可以找到过载的资源，如图像，样式表，JavaScript等等。这节课，我们只是对调试代码的工具的快速讲解。接下来，我们针对一些常见的问题，然后使用这些工具来修复它们。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/dev-tool/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/dev-tool/