如何阻止脚本修改index页面指定标签的内容？

第一步：定位修改内容的脚本 #

• 用浏览器开发者工具抓修改动作：选中你改了没生效的标签，右键选「检查」，在Elements面板里右键这个元素，点「Break on」→「Subtree modifications」（如果改的是纯文本选「Character modifications」）。刷新页面后，只要有脚本修改这个元素，浏览器会自动断点，直接就能看到对应JS文件和代码行。
• 全局搜索内容关键词：在开发者工具的Sources面板顶部搜索框，输入你index里写的原始内容，或者页面上显示的旧内容，能快速找到所有修改这段内容的代码位置。

第二步：阻止脚本修改的几种方法 #

方法1：直接移除修改代码 #

找到定位到的那段修改标签内容的代码，直接注释或删除，最直接高效。

方法2：用Mutation Observer强制恢复原始内容 #

不想改动原有脚本的话，自己加一段代码监听目标元素，一旦被修改就强行改回你在index里写的内容：

// 替换成你要保护的元素选择器，比如id、class
const target = document.querySelector('#your-target-id');
// 保存index里的原始内容
const originalContent = target.innerHTML;

// 创建监听实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    // 检测到内容被修改就恢复
    if (target.innerHTML !== originalContent) {
      target.innerHTML = originalContent;
    }
  });
});

// 启动监听，配置要监听的变化类型
observer.observe(target, {
  childList: true,
  characterData: true,
  subtree: true
});

把这段代码放到index的<script>标签里，或者单独的JS文件中，确保它在修改内容的脚本之前加载执行。

方法3：给标签加标记让脚本跳过修改 #

如果脚本本身有判断逻辑，可以给目标标签加个自定义属性，比如data-protect="true"，然后找到修改脚本的代码，加判断跳过：
HTML中修改标签：

<div id="target-div" data-protect="true">你写的原始内容</div>

JS中修改原脚本：

const element = document.getElementById('target-div');
// 有保护标记就跳过修改
if (!element.hasAttribute('data-protect')) {
  // 原来的修改代码
  element.innerHTML = '旧内容';
}

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