通常，在编辑网页时，我们使用特定的编辑工具，例如Adobe Dreamweaver，CoffeeCup，Bluefish或其他开发工具之一。 但是，如果我们只是集思广益或想在实时页面上尝试一些东西怎么办？ 我们可以在选择的工具中复制页面，然后进行操作。 或者，我们可以在Web浏览器中进行操作。 本教程将向您展示如何在浏览器中编辑网页。
称为开发人员工具，Firefox调用功能Inspect Element，而Chrome调用功能Inspect。 无论哪种方式，它都是浏览器窥视设计光泽并查看驱动它的代码的一种方式。 此功能是众所周知的，并且使用很多。 不太了解的是能够即时更改该代码的功能。
您所做的任何更改都不会保存，也不会影响实时播放。 如果您不想在开发人员工具中加载页面，这是一种实验的好方法。
在浏览器中编辑任何网页
Dreamweaver及其类似工具具有内置的浏览器模拟器，该模拟器可仿真设计在不同浏览器中的外观。 尽管它们很好，但它们并不总是精确的，在启动网站时，您经常会发现在开发人员工具中看起来很棒的东西在独立浏览器中看起来有些不同。
通常，仅出于此原因，您将在内部Web服务器上启动站点并在浏览器中进行测试，然后再启动实时。 如果某个页面已经存在，或者您只想尝试一下，则无需将其复制并加载到开发工具中，只需使用浏览器的开发者工具即可。
我使用Firefox，所以我将向您展示如何使用它。 Chrome几乎相同。
- 在浏览器中打开您要尝试的网页。
- 右键单击页面上的任意位置，然后选择“检查”。
您应该看到页面分成两部分，在底部显示一个新窗格，其中包含一些代码。 该代码是所选页面的驱动力。 可从下部选项卡顶部的选项卡访问不同的页面元素。 例如，我们在Firefox中看到Inspector，Console，Debugger，Style Editor等。
如果将光标放在下部窗格的各行上，您将看到网页不同部分的突出显示。 高亮显示的代码行是影响页面那部分的代码。
- 如果您想体验页面的外观，请尝试使用样式编辑器。
- 如果您想了解页面的工作方式，请尝试使用控制台或辅助功能。
- 如果您想消除错误或解决问题，请使用控制台或调试器
性能对于现场SEO很有用，但是对内存，网络和存储的使用却很少。
请记住，您可以在开发人员工具中随意随意摆弄，并且不会影响网站。 仅更改页面在单独浏览器中的显示方式，而不会影响网站本身。 关闭工具后，所有更改都将丢失。
更改页面
现在，您知道可以在不影响实际网站的情况下进行任何更改，让我们玩得开心。 在页面上找到要编辑的元素。 您可以更改字体，字体颜色，背景图像或任何您喜欢的东西。 在此示例中，我将更改横幅标题的字体颜色。
- 右键单击要更改的确切元素，然后选择“检查”。
- 用“ title”或“ H1”突出显示该行，以便在顶部窗格中突出显示文本。
- 导航到左侧的两个窗格并找到字体颜色。
- 将值更改为其他值，或选择色点以使用选择器。
完成更改后，更改将动态显示。 您可以更改颜色，大小，字体，背景以及有关字体的所有内容。 您无法保存工作，但您的更改将保留在该会话中。
您可以更改页面上的所有内容，如果您有想法并希望在启动所有开发应用程序之前快速将其检出，则非常适合。 您要做的就是记住所做的更改以及无法将其保存在此处的位置。 您将需要截屏或记录所做的更改，并在您的开发人员工具中复制它们以使其保持不变。
在浏览器中编辑网页是一种尝试或浏览页面的巧妙方法。 这也是学习Web开发的一种好方法，而无需购买昂贵的开发人员工具。 现在您知道如何去玩了！
