poxiaoxi博客浏览器每天都在用，但多数时候我们只把它当成“打开网页的工具”。实际上，地址栏、HTML 自身的能力以及开发者工具组合起来，可以完成不少原本以为需要专门软件才能做的事情。
比如在地址栏输入下面这段内容：
data:text/html,<body contenteditable style=line-height:1.5;font-size:16px>
回车后，一个空白网页就变成了可以直接输入文字的编辑区。不需要打开记事本，也不需要访问任何在线编辑网站。这个看起来有点像“浏览器彩蛋”的用法，其实完全建立在标准的 Data URL 和 HTML 编辑能力之上。
一行代码变成临时记事本
先拆开这段地址，就很容易理解它为什么能工作。
data:text/html,<body contenteditable style=line-height:1.5;font-size:16px>
data: 是一种 URL 形式，可以把少量内容直接写进 URL，而不是从服务器下载一个文件。它的基本结构可以理解为：
data:媒体类型,具体内容
这里指定了 text/html，所以浏览器会把逗号后面的内容按照 HTML 页面解析。
contenteditable 则是 HTML 的可编辑属性。它放在 body 上以后，整个页面主体都可以直接输入和修改内容。后面的 style 只是把行高和字号调整得更适合阅读。
因此，这并不是浏览器专门内置了一个隐藏记事本，而是利用浏览器本身就具备的 HTML 渲染与内容编辑能力，临时拼出了一个最简单的编辑页面。
做成更舒服的写作页面
默认版本能用，但页面会贴近窗口边缘。稍微增加一些样式，就能得到更接近普通写作软件的效果：
data:text/html;charset=utf-8,<body contenteditable style="max-width:760px;margin:40px auto;padding:0 20px;line-height:1.8;font-size:18px;outline:none">
这个版本限制了正文宽度，增加左右留白，并把行距调大，更适合临时写文章、整理思路或记录会议内容。
常用的话，可以把这段地址保存成浏览器书签。以后点击书签，就能直接打开一个新的临时编辑页。
不过要注意，这种页面本质上只是浏览器当前标签页里的内容，并没有自动保存功能。刷新、关闭标签页或浏览器异常退出后，输入的文字可能丢失，因此更适合临时记录，不应该代替正式的笔记或文档软件。
只想输入纯文本怎么办
contenteditable 默认允许浏览器按照可编辑 HTML 内容处理粘贴和格式。如果只是想把它当纯文本草稿纸，可以尝试使用 plaintext-only：
data:text/html;charset=utf-8,<body contenteditable=plaintext-only style="max-width:760px;margin:40px auto;line-height:1.8;font-size:18px">
按照 HTML 标准，contenteditable 可以设置为 true、false 或 plaintext-only。其中 plaintext-only 更适合不希望保留富文本格式的编辑场景。
如果主要需求只是随手记录几句话，纯文本模式通常更加干净。
用 Data URL 快速测试 HTML
data:text/html 不只能做记事本。对于前端开发者来说，它还可以充当一个非常轻量的 HTML 试验场。
例如输入：
data:text/html,<h2>Hello Browser</h2><p>这是一个直接写在 URL 里的 HTML 页面。</p>
浏览器会直接渲染标题和段落，不需要新建 HTML 文件，也不需要启动本地服务器。
要快速确认一个 HTML 标签怎么显示、测试一小段 CSS，或者演示一个极简页面时，这种方式比专门建立项目更省事。
但 Data URL 本来就更适合承载较短的数据。内容一旦变长，不仅地址栏难以阅读和维护，还会遇到字符编码、特殊符号和不同软件 URL 长度限制等问题。稍复杂的页面还是应该使用正常的 HTML 文件或在线代码编辑环境。
直接查看网页原始源码
另一个比较实用的地址栏技巧是 view-source:。
例如：
view-source:https://example.com/
在支持这种方式的浏览器中，可以直接查看页面返回的原始 HTML 源码。
这里的“源码”和开发者工具 Elements 面板里看到的 DOM 并不完全是一回事。网页运行 JavaScript 后，DOM 可能已经被新增、删除或修改，而查看源代码更侧重页面最初加载到浏览器的 HTML。
分析网页的 Meta 标签、结构化数据、初始链接以及服务端输出内容时，两种视角都有价值，不能简单互相替代。
临时修改任意网页内容
有时只是想看看某段标题换一种写法效果如何，或者测试按钮文字变长以后会不会破坏布局，并不需要真的修改网站代码。
Chrome 等浏览器的开发者工具可以直接编辑当前页面的 DOM。打开开发者工具，在 Elements 面板中找到对应元素，就能修改文字、标签和属性，也可以在 Styles 区域临时调整 CSS。
例如把：
<button>提交</button>
临时改成：
<button>提交并继续下一步</button>
页面会立即显示修改后的效果。
这种方式很适合测试文案长度、颜色、间距和布局，但修改通常只存在于当前页面环境中，刷新后会重新加载网站原来的内容，并不会直接修改服务器上的网页。
让整个网页暂时可编辑
需要快速修改大量页面文字时，还可以在开发者工具 Console 中启用文档编辑模式：
document.designMode = 'on'
执行后，可以尝试直接点击网页中的文字进行编辑。完成测试后再关闭：
document.designMode = 'off'
它特别适合做页面截图、文案排版预览，或者快速判断一段新标题放进现有页面后的视觉效果。
同样，这只是本地页面状态的临时变化。它不会修改网站数据库，也不会把修改后的内容自动提交到服务器。
把常用代码保存成 Snippet
如果经常在网页上执行同一段 JavaScript，每次打开 Console 再粘贴并不方便。Chrome DevTools 的 Sources 面板提供 Snippets，可以保存 JavaScript 代码片段，并在需要时重新运行。
例如检查页面链接、统计某类 DOM 元素、测试一段页面脚本，都可以做成自己的 Snippet。
这比从网上随手复制陌生代码更加可控。尤其是涉及 Console、Bookmarklet 或 javascript: 代码时，不要执行自己看不懂的脚本。网页脚本能够读取和操作当前页面中的内容，未知代码可能带来账号和数据安全风险。
精彩评论