在本文中，如何使用这个工具为什么这个工具有用？我们发现了一个漂亮的小工具，可以帮助你在点击发布按钮之前测试内容的外观。它存在于你的书签栏中，当你想在网站上测试更改时，你只需点击按钮并键入你想做的任何更改。

如何安装该工具

安装免费网站编辑器工具非常简单。只需突出显示下面的代码，并将其拖动到书签栏，即可自动保存。

这里是要复制的代码：

javascript:document。身体contentEditable='true'；文件designMode='on'；void 0

现在，要让这样的一行代码在每个设备和浏览器上都能完美工作是非常困难的，所以您可能需要进行一些故障排除。下面是我在测试这个工具时学到的一些东西：如果代码没有保存为书签：尝试手动添加它。打开书签设置，单击“添加新书签”（或等效字段），然后将代码粘贴到URL行中。将书签命名为清晰简洁的名称，并尝试编辑网页。
如果代码保存，但不允许您编辑网页：您可能需要对代码进行轻微编辑。另存为书签时，浏览器可能会将空格替换为百分号（%）或其他破坏代码的字符。编辑书签，并删除任何额外字符。确保你加入书签的代码与上面写的代码完全匹配。

许多浏览器都会防止使用这样的Javascript代码，因此您可能会发现，根据您在哪个浏览器上运行Javascript代码，使用Javascript代码会更加挑剔。Google Chrome不允许我将其保存为书签。Safari和MicrosoftEdge做了，但我必须编辑间距代码。

如何使用该工具

安装该工具后，只需导航到要编辑的网页并单击书签即可。当你点击页面时，你会看到一个闪烁的光标，表明你已经准备好编辑了。

点击书签后，您可以对页面文本进行任何更改。您不能编辑图像或移动按钮，但可以查看标题是否太长，无法放在一行上，或者删除段落是否会改变折叠上方页面的布局。

一旦你做了更改，你就可以截图来保存你正在做的任何实验——没有其他方法来保存你的编辑。要停止该工具在您的网页上运行，请刷新网页。这也会使你所做的任何改变消失。为什么这个工具有用

这个工具玩起来肯定很有趣——我在制作有趣的新闻头条时得到了一些笑声，并将它们发送给了我爸爸——但我们不是来恶作剧或成为假新闻生成器的。我们之所以来到这里，是因为这个工具是一种简单、强大的方法，可以测试营销或布局更改，而无需编辑源代码或访问网站生成器。

有几种方法可以使用这个工具：

测试标题，看看它是否适合你的布局
实验段落长度和格式
创建几个网页模型，向客户或利益相关者展示
设置线框，供设计师或开发人员参考3制作多个版本的登录页，缩小a/B测试的选项

以下是一个例子。在下面的图片中，我试图看看我是否可以在不需要第四行副本的情况下向这个Apple登录页添加更多文本。它很管用，但我也能看出我更喜欢原来的布局。整个测试过程耗时约30秒。（打字过程非常完美，这样我就可以录制gif了，大约需要10分钟。）

如果你对代码有点了解，你可能想知道为什么我们不直接告诉你使用Inspect Element工具来编辑源代码。它内置于浏览器中，为什么不使用它呢？

好吧，你可以走这条路，但这个工具是一个更容易的方法，可以快速地进行前端更改。您不需要寻找正确的位置来更改HTML，因为您只需单击标题并开始键入即可。

当然，如果你要安装这个工具，你也可以从中获得一些乐趣。我喜欢让自己看起来像个百万富翁，幻想着如果我有这样的钱，我会在家里建一座巨大的图书馆。

开始使用免费的网站编辑器

您只需几分钟就可以开始使用这个工具。直接从这篇文章中把它添加到你的书签中，然后进行测试。它甚至可以在这个页面上使用！给我们一个有趣的标题，或者加上一两句愚蠢的话——我们不介意。

一旦你弄明白了它是如何工作的，你会惊讶于这段代码有多方便。它将出现在你的书签栏中，当你需要快速更改以向你的web开发人员展示或创建一个简单的模型以向客户证明你的想法实际上会完全按照他们想要的方式呈现时，它会很乐意为你提供帮助。你喜欢这种有趣的编辑技巧吗？在Facebook和Twitter上与他人分享！