修改谷歌浏览器标签页名字

1. 背景

在开发过程中,有时我们会对同一个网站打开很多的浏览器标签页,比如 百度首页 页面,用来同时保存多个开发窗口,多个标签页内有不同的内容,但是多个标签页的名称是根据网站自动提取的,完全一样,我们可能无法区分,如下图:

此时我们很难区分每个标签页中的内容是什么,只能靠自己去记住顺序,很麻烦。如果能够修改每个标签页的名字,那就非常方便了。但是谷歌浏览器并没有提供标签页名称的修改功能,因此需要我们自己手动去执行一些步骤来操作。

2. 修改步骤

  1. 在自己要修改的标签页的页面,按 F12 键,打开开发者模式。

  2. 在上图中指示的 控制台 下面输入如下代码,然后按 回车 键执行。

    javascript 复制代码
    javascript:void(function(){document.title=prompt('新标签页名称')}())
  3. 执行成功后出现如下界面

  4. 在图中指示的地方输入自己想要的标签页名称,然后点击 确定

  5. 修改完之后,效果如下。

  6. 其他标签页也可以根据这个方法一一修改,修改完之后效果如下。

3. 注意

  1. 每次执行修改一个标签页的名称。
  2. 标签页名称修改完之后不要刷新标签页面,否则标签页名称又会变成原来的网站名称。
    1. 上面控制台运行的 javascript 代码,其实就是修改了页面 html 代码中的 title 标签中的内容,可以自己点击开发者工具中的 元素 查看具体的代码。直接修改 title 标签中的内容,也可以达到一样的效果,所以不能刷新页面,因为刷新页面之后,title 标签中的内容就又变回原来的了。
相关推荐
不一样的少年_5 天前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
jump_jump6 天前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
南村群童欺我老无力6 天前
100-app-challenge 第二期 GestureGo手势识别
前端·浏览器
私人珍藏库7 天前
笔墨星河 - AI长篇小说生成软件
windows·ai·工具
lbh9 天前
Chrome DevTools 详解(二):Console 面板
前端·javascript·浏览器
lbh9 天前
Chrome DevTools 详解(一):Elements 面板
前端·javascript·浏览器
charlie11451419110 天前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析
私人珍藏库11 天前
[吾爱大神原创] 任务栏透明度设置小工具
windows·工具
会飞的小蛮猪14 天前
运维之路(SSH工具集)
运维·经验分享·工具
会飞的小菠菜14 天前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页