使用Chrome DevTools实时编辑HTML和CSS

我们来看看Chrome DevTools中的便捷实时编辑功能，以及它如何帮助您调试HTML和CSS，使您的前端更流畅。

 

Chrome DevTools是一款内置于Chrome浏览器中的强大的Web开发工具套件。DevTools对Web开发人员最有用的功能之一是能够在页面上实时编辑HTML和CSS。该功能允许任何开发人员，即使是HTML和CSS知识较弱的开发人员，都可以对网页的潜在变化进行快速原型和迭代。

在使用Lucidchart时，我最近的一个项目是在用户输入帐单信息时在输入中添加一些复选标记，以便在用户输入格式正确且有效的信息时即时提供反馈。尽管我在后端代码中比在CSS和HTML中工作更舒适，但我可以通过实时编辑功能轻松实现这些复选标记。

使用检查器工具编辑HTML有两种快速打开检查员的方法。首先是用F12打开DevTools ，选择“Elements”选项卡，然后单击左上角的光标图标。第二，更快，方法是使用键盘快捷键Ctrl + Shift + C。如果您经常在Linux环境中工作，那么在您意图复制文本时，很有可能很多次您都会在意外中使用此快捷方式！

一旦检查员处于活动状态，您可以通过单击它查找页面上任何元素的HTML。Chrome浏览器还会显示您将鼠标悬停在其上的元素的位置和大小信息。

 

一旦选择了一个元素，就可以通过各种方式与它进行交互。通过右键单击“元素”选项卡中的HTML并选择“编辑为HTML”，您可以实时编辑网页的标记，Chrome将在编辑完成后立即呈现该标记。

告诉DevTools您正在编辑可能会非常棘手。你的第一本能可能是击退Escape键，但这会使你退出编辑而放弃你的改变。您可以通过按Ctrl + Enter或直接单击您正在编辑的文本框外部来保存更改。

使用正常的Ctrl + Z和Ctrl + Y热键可以撤消或重做HTML编辑。除非您启用持续性编辑，否则它们也将在页面刷新时丢失。

为了开始我的复选标记项目，我开始创建一个原型元素作为测试我想要做的调整的地方。使用Chrome DevTools的实时编辑功能，我添加了一个仅包含字母“X”的占位符div，作为临时临时选中标记。

 

显然，这是一个非常糟糕的选择标记的借口，但它足以帮助我快速确定一些问题。首先，复选标记完全是错误的。另外，它弄乱了页面上其他元素的对齐。这两个问题都可以通过一些CSS来解决。幸运的是，Chrome还提供了一些优秀的工具，可以使用DevTools快速构建CSS更改原型。

从“元素”选项卡编辑CSS在“元素”选项卡的HTML视图右侧，有一个视图，显示了CSS规则适用于选定元素的细分。这个视图对于调试大量的CSS错误非常有用。例如，因为您可以看到哪些规则适用于当前元素，您可以确定某个元素是否获得了您所期望的CSS规则，或者缺少您认为应用于其中的CSS规则。CSS视图还显示何时由匹配规则应用的样式被更具体的规则覆盖。

CSS视图提供了一些非常有用的实时编辑功能。每种样式都在其旁边有一个复选框，让您启用或禁用某些样式，并查看它们如何影响页面上的元素。您还可以将新样式应用于特定元素，现有CSS规则或全新的CSS规则。所有这些更改都立即反映在页面上。

Chrome DevTools提供了一些便利的功能，可以使实时编辑CSS变得更容易。对那些不熟悉CSS的人最有帮助的是自动完成功能。在您输入风格名称时，Chrome会建议可能的匹配项。一旦输入样式的名称，Chrome也将帮助您使用该样式的正确值。对于枚举式样式，例如“位置”或“显示”，Chrome会显示合法值供您选择。对于数值输入，您可以使用向上和向下箭头将值增加1，而不必重新输入单位。

与实时编辑HTML一样，您可以使用Ctrl + Z和Ctrl + Y撤消或重做您的实时CSS更改。

使用DevTools，我能够很容易地找出CSS规则的组合，这些规则将我的伪复选框与我想要的对齐。这个过程涉及到一些试验和错误，但实时编辑使迭代周期非常短，这对于像我这样的CSS新手来说特别有用。

 

结论我们只是抓住了Chrome DevTools的实时编辑功能的能力，尤其是在CSS域。当我去调试一个CSS问题或快速原型化一个新的CSS变化时，这些基本技巧对我来说始终是非常宝贵的。