使用Chrome DevTools实时编辑HTML和CSS

1、使用chrome devtools实时编辑html和css我们来看看chrome devtools中的便捷实时编辑功能，以及它如何协助您调试html和css，使您的前端更流畅。 chrome devtools是一款内置于chrome扫瞄器中的强大的web开发工具套件。devtools对web开发人员最实用的功能之一是能够在页面上实时编辑html和css。该功能允许任何开发人员，即使是html和css学问较弱的开发人员，都可以对网页的潜在变幻举行迅速原型和迭代。在用法lucidchart时，我最近的一个项目是在用户输入帐单信息时在输入中添加一些复选标志，以便在用户输入格式正确且有效的信息时即时提

2、供反馈。尽管我在后端代码中比在css和html中工作更舒服，但我可以通过实时编辑功能轻松实现这些复选标志。用法检查器工具编辑html有两种迅速打开检查员的办法。首先是用f12打开devtools ，挑选elements选项卡，然后单击左上角的光标图标。其次，更快，办法是用法键盘快捷键ctrl + shift + c。假如您常常在linux环境中工作，那么在您意图复制文本时，很有可能无数次您都会在意外中用法此快捷方式！一旦检查员处于活动状态，您可以通过单击它查找页面上任何元素的html。chrome扫瞄器还会显示您将鼠标悬停在其上的元素的位置和大小信息。 一旦挑选了一个元素，就可以通过各种方式与

3、它举行交互。通过右键单击元素选项卡中的html并挑选编辑为html，您可以实时编辑网页的标志，chrome将在编辑完成后立刻展现该标志。告知devtools您正在编辑可能会十分麻烦。你的第一本能可能是击退escape键，但这会使你退出编辑而放弃你的转变。您可以通过按ctrl + enter或挺直单击您正在编辑的文本框外部来保存更改。用法正常的ctrl + z和ctrl + y热键可以撤消或重做html编辑。除非您启用持续性编辑，否则它们也将在页面刷新时走失。为了开头我的复选标志项目，我开头创建一个原型元素作为测试我想要做的调节的地方。用法chrome devtools的实时编辑功能，我添加了一

4、个仅包含字母x的占位符div，作为暂时暂时选中标志。 明显，这是一个十分糟糕的挑选标志的借口，但它足以协助我迅速确定一些问题。首先，复选标志彻低是错误的。另外，它弄乱了页面上其他元素的对齐。这两个问题都可以通过一些css来解决。幸运的是，chrome还提供了一些优秀的工具，可以用法devtools迅速构建css更改原型。从元素选项卡编辑css在元素选项卡的html视图右侧，有一个视图，显示了css规章适用于选定元素的细分。这个视图对于调试大量的css错误十分实用。例如，由于您可以看到哪些规章适用于当前元素，您可以确定某个元素是否获得了您所期望的css规章，或者缺少您认为应用于其中的css规章。

5、css视图还显示何时由匹配规章应用的样式被更详细的规章笼罩。css视图提供了一些十分实用的实时编辑功能。每种样式都在其旁边有一个复选框，让您启用或禁用某些样式，并查看它们如何影响页面上的元素。您还可以将新样式应用于特定元素，现有css规章或全新的css规章。全部这些更改都立刻反映在页面上。chrome devtools提供了一些方便的功能，可以使实时编辑css变得更简单。对那些不认识css的人最有协助的是自动完胜利能。在您输入风格名称时，chrome会建议可能的匹配项。一旦输入样式的名称，chrome也将协助您用法该样式的正确值。对于枚举式样式，例如位置或显示，chrome会显示合法值供您挑选。对于数值输入，您可以用法向上和向下箭头将值增强1，而不必重新输入单位。与实时编辑html一样，您可以用法ctrl + z和ctrl + y撤消或重做您的实时css更改。用法devtools，我能够很简单地找出css规章的组合，这些规章将我的伪复选框与我想要的对齐。这个过程涉及到一些实验和错误，但实时编辑使迭代周期十分短，这对于像我这样的css新手来说特殊实用。 结论我们只是抓住了chrome