1. 首页
  2. 技术教程

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

这几天在Twitter看到一则推文分享,只要一段代码,就能开启Google Chrome浏览器内置开发者工具的编辑器功能,直接在网页内进行内容编辑测试(对,直接编辑网页中的文字),这对于网页开发者来说很有用,尤其是当你想知道菜单可以容纳多少文字,或是标题、内文会在多少字以后换行,就能以更直觉的方式看到结果。

其实这个小技巧并不限于Chrome浏览器,几乎在各种常见浏览器都能使用,包括Firefox、Opera或Safari,只是每个浏览器「开发者工具」功能在菜单不同位置,可能得自己找一下。以下我会使用Google Chrome来介绍这个好用的小技巧。

it any text with Chrome Dev Tools. Sketch or check if you menu breaks with longer text. document.designMode = 'on' #webdev#csspic.twitter.com/EPh6tEtu2d

— Jan Östlund (@janostlund) October 10, 2017

顺带一提,每次编辑时不会影响到网站运作,只有你自己看得到效果,当你编辑错误或想恢复原状时,只要重新整理页面即可。

使用教程:

开启Google Chrome浏览器后,从菜单里找到「更多工具」的「开发人员工具」,或是直接通过快速键Ctrl + Shift + I。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

开启后开发者工具会显示于浏览器下方,可自己调整到合适位置,点击上方菜单的「Console」切换到主控台功能。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

接着在下方指令列输入:

document.designMode = 'on'

输入后送出,如果响应“on”代表已经成功开启。经过我的测试,Firefox在输入指令前会要求使用者输入一段允许编辑的指令,避免使用者在不知情的情况下输入可能造成安全问题的代码。不过这部份在Google Chrome或Opera都没有限制,直接把上方程式码复制、粘贴即可。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

输入完指令后,就可以试着提取网页内的文字部分,直接将它删除。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

可以直接编辑网页内的文字,改成自己需要的内容,用于测试样式相当好用!不信的话自己找个网页试试看啰!当然如果你本身是网页开发者,有时候直接在当前网页设计上进行编辑,测试看看可以塞入几个文字段落,可能对于宽度或大小设置上会更为有用。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

例如设计上很常遇到的问题,究竟菜单上可以塞进多少个中文英文字?与其一边改一边测试,不如直接用这段代码,就能在浏览器内直接编辑菜单内容,开发速度更快也一目了然。

超实用!一行代码将浏览器变成网页编辑器,支持各种常见浏览器

值得一试的三个理由:

  1. 免下载、免安装,支持各种常见浏览器包括
  2. 一行代码即可开启内置的开发者工具编辑模式
  3. 用于开发测试样式时特别有用

原创文章,作者:yuanyuan,如若转载,请注明出处:https://www.xiaoyuanjiu.com/2445.html

发表评论

登录后才能评论