促进网站开发有用的书签

小书签是添加到网站浏览器的基于 JavaScript 的书签。我想向您展示一些很棒的网站浏览器 hack，以帮助您的网站开发工作流程，以及如何将这些 hack 转换为节省时间的书签。 设计模式（designMode因为它是JavaScript 属性而被设计）适合喜欢在实时网站上尝试各种副本的人。例如，喜欢观察内容在网站制作流程中如何阅读的文案，或者说，想要确保文本以特定字体大小舒适地适合特定空间的设计师。JavaScript 有一个非常简单的功能，可以使整个 HTML 文档可编辑。它与 HTML 的name-value 属性（或在 JavaScript 中）完全一样，但适用于整个文档。如果你想看看它是如何工作的，首先使用相关的键盘快捷键进入浏览器的控制台：contenteditable="true"contentEditable="true" 接下来，document.designMode="on"在控制台中键入，点击Return，然后单击任何文本元素。您将看到该文本元素（以及所有其他文本元素）现在只需单击它们即可进行编辑。这种在实时网站上编辑文本的方法比打开 DevTools，然后右键单击并选择“编辑文本”选项要快得多……而且不那么烦人。 虽然我不确定“设计模式”是对该功能最准确的描述，但它仍然非常有用，而且它实际上已经存在了很长时间，令人惊讶。还有什么更快的方法来启用它？当然是小书签！javascript: document.designMode="on";void 0;使用URL创建书签。 当 HTML 元素没有背景时，很难可视化它们的边界和/或准确测量它们与其他元素之间的距离。开发人员可能希望在处理光学不平衡时更好地可视化边界（即，当某些东西“看起来不正常”时，即使它不是）、边距崩溃（当某些边距被忽略时）、display:/ float:/的各种问题position:等等。 应用背景意味着对所有 HTML 元素应用半透明背景，以便更好地可视化它们的边界和间距。这是我们许多人通常通过打开 DevTools 然后selector { background: rgb(0 0 0 / 10%); }在“样式”框中键入 CSS 声明来完成的事情。但同样，这真的很烦人且重复——我们可以用书签简化一些事情。 您是否曾经必须测试首先需要一系列交互或满足某些条件的 Web 事件？必须测试或调试这些功能非常耗时。此事件模拟书签可用于即时触发特定事件，使测试变得轻而易举。模拟事件意味着编写一个触发 JavaScript 事件的“一次性”按钮，从而可以更轻松地快速重复测试事件，而无需满足任何常见的面向用户的条件，例如需要登录。 Cookie 是访问者正在访问的网站存储在网站访问者计算机上的令牌。Cookie 包含创建它们的网站可以读取的数据，直到它们超过其到期日期或被删除。仅 cookie 的存在就可以确定访问者是否登录，而数据本身可以存储用户信息。您可能希望使用小书签设置 cookie 的一个示例是您希望在网站测试期间强制进入登录状态。对于已登录的用户而言，网站通常看起来非常不同，但是，登录和注销最终会变得非常乏味，因此这个小书签可以节省相当多的时间。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=550