网站内容编辑器(只要一段代码，就能开启GoogleChrome浏览器内置开发者工具的编辑器功能)

　　网站内容编辑器(只要一段代码，就能开启GoogleChrome浏览器内置开发者工具的编辑器功能)

　　这几天，我在推特上看到了一条推文分享。只要一段代码，就可以打开谷歌Chrome浏览器内置开发者工具的编辑器功能，直接在网页中进行内容编辑测试（没错，直接编辑网页中的文字），也就是对于 Web 开发人员非常有用，尤其是当您想知道菜单可以容纳多少文本，或者标题和文本将在多少个单词之后换行时，因此您可以以更直观的方式查看结果。

　　其实这个小技巧不仅限于 Chrome 浏览器，几乎所有常见的浏览器都可以使用，包括 Firefox、Opera 或 Safari，只是每个浏览器的“开发者工具”功能在菜单中的位置不同，您可能必须自己找到它。下面我将使用谷歌浏览器来介绍这个有用的小技巧。

　　使用 Chrome 开发工具的任何文本。草图或检查您的菜单是否因较长的文本而中断。document.designMode = 'on'#webdev#/EPh6tEtu2d

　　— Jan Östlund (@janostlund) 2017 年 10 月 10 日

　　对了，每次编辑都不会影响网站的运行，只有你自己能看到效果，当你出错或者想恢复原来的状态时，刷新页面即可。

　　使用教程：

　　打开谷歌Chrome浏览器后，在菜单的“更多工具”中找到“开发者工具”，或者直接使用快捷键Ctrl+Shift+I。

　　打开后，浏览器底部会显示开发者工具，可以调整到合适的位置，点击上方菜单中的“控制台”切换到主控制台功能。

　　然后在下面的命令行中输入：

　　document.designMode = '开'

　　输入后发送。如果响应为“on”，则表示已成功打开。经过我的测试，火狐在输入命令前会要求用户输入允许编辑的命令，防止用户在不知情的情况下输入可能导致安全问题的代码。不过这部分并不局限于谷歌浏览器或Opera，直接复制粘贴上面的代码即可。

　　输入命令后，可以尝试将网页的文本部分提取出来，直接删除。

　　可以直接编辑网页中的文字，改成自己需要的内容，对于测试样式还是蛮有用的！不信就找个网站试试看吧！当然，如果你自己是网页开发者，有时可以直接编辑当前网页设计，并测试一下是否可以插入几段文字，这可能对宽度或大小设置更有用。

　　比如设计中一个很常见的问题，菜单中可以插入多少个中英文字符？与其边改边测试，不如直接用这段代码在浏览器中直接编辑菜单内容，开发速度更快，一目了然。

　　值得一试的三个原因：

　　免下载，免安装，支持各种常用浏览器，包括一行代码打开内置开发者工具编辑模式，对开发测试样式特别有用

　　文章链接：

　　文章标题：超实用！一行代码将浏览器变成网页编辑器，支持所有常用浏览器