Chrome Dev Tools: Elements


这个课程只对Chrome开发工具中的Elements(元素)标签做基本介绍,更多详细介绍请点击: developers.google.com/web/tools/iterate/inspect-styles/basics

我们接下来会在每个小节中中使用Free Code Camp用户kmiasko的网站 mckellen.com/ 来做演示。

在chrome浏览器中右击选中'Inspect element'即可访问elements标签,然后你就可以随便修改元素文本,元素标签和任何其他CSS或者HTML。

这些修改不会自动保存,不能当做IDE或者可以保存内容的编辑器。你可以使用chrome中的'persistent authoring'功能去保存更改。

记住这里层叠,继承和其他CSS规则都可以使用,另外,被覆盖的式样会以穿越文字的横线的形式展示。

需要注意的是现在"树"中看到的代码是当前的HTML,而不是页面加载时的代码。如果你用JavaScript或Jquery来改变页面元素,"树"就会更新。

Padding,border和margin都很容易在右下角的彩色盒子里面检查和编辑。

更多详细内容请访问Chrome开发工具文档: developers.google.com/web/tools/iterate/inspect-styles/basics