如何为Google Chrome开发者工具窗口自定义命名？

我完全懂你这种痛点——多个DevTools窗口标题一模一样，Alt+Tab切换或者找最小化窗口时简直闹心！这里有几个靠谱的方法能解决这个问题，亲测好用：

方法1：本地存储+自动加载脚本（无需扩展，持久生效） #

这个方法能让页面标题（连带DevTools标题）持久化，刷新页面也不会失效：

• 打开目标页面的DevTools控制台（F12），运行这段代码：

  // 定义设置标题的函数，同时存到localStorage
  function setPersistentTitle(customTitle) {
    document.title = customTitle;
    localStorage.setItem('persistentDevToolsTitle', customTitle);
  }
  
  // 页面加载时自动读取并设置标题
  window.addEventListener('load', () => {
    const savedTitle = localStorage.getItem('persistentDevToolsTitle');
    if (savedTitle) document.title = savedTitle;
  });
  

• 然后调用函数设置专属标题，比如：setPersistentTitle('desktop - 电商项目')或者setPersistentTitle('mobile - 移动端调试')
• 之后不管怎么刷新页面，标题都会自动恢复，DevTools窗口的标题也会同步显示这个自定义名称，Alt+Tab切换时一眼就能分辨。

方法2：DevTools自定义片段（适合多页面快速调试） #

如果需要给不同页面设置不同的专属标题，自定义片段能帮你快速复用代码：

1. 打开DevTools的「Sources」面板，切换到「Snippets」标签
2. 右键点击空白处，选择「New snippet」，命名比如setDevToolsTitle.js
3. 把下面的代码粘贴进去（替换成你想要的标题）：

   document.title = "mobile - 登录页调试";
   

4. 右键点击这个片段，选择「Run」，当前页面的标题（和DevTools标题）就会立刻改变
5. 如果想让页面加载时自动运行这个片段：右键片段→「Run on page load」，这样每次打开这个页面，标题都会自动设置好。

方法3：用户脚本扩展（一劳永逸，批量生效） #

如果经常需要给多个页面设置自定义标题，用Tampermonkey这类用户脚本扩展更方便：

• 安装Tampermonkey后，新建一个用户脚本
• 写入类似下面的代码，指定需要生效的页面域名，自动根据页面路径设置标题：

  // ==UserScript==
  // @name         DevTools专属标题设置
  // @match        https://your-project-domain.com/*
  // @grant        none
  // ==/UserScript==
  
  (function() {
      'use strict';
      // 根据页面路径设置不同标题
      if(window.location.pathname.includes('/mobile')){
          document.title = 'mobile - 用户中心';
      } else {
          document.title = 'desktop - 首页';
      }
  })();
  

• 保存后，只要打开匹配的页面，标题就会自动设置，DevTools窗口也会同步显示对应的名称。

临时快速切换技巧 #

如果只是临时调试，不想持久化设置，直接在控制台运行document.title = "你的自定义标题"就能立刻修改DevTools窗口标题，只是刷新后会失效，适合临时区分窗口用。

内容的提问来源于stack exchange，提问作者Danny_DD