如何跟踪HTML元素从readonly状态切换为非readonly状态？

嘿，别担心，先纠正一个关键误区：MutationObserver并没有被弃用，它是目前浏览器原生支持的、监听DOM变化的标准API，Chrome、Edge、Safari等现代浏览器都稳定支持，完全可以放心用来解决你的问题！下面给你两种实用的实现方式，以及Chrome DevTools的调试技巧，帮你追踪状态变化的时机：

一、原生JavaScript实现：用MutationObserver精准监听 #

这是最直接高效的方案，能精准捕获readonly属性的移除（或添加）事件：

// 定位目标textarea元素（可以根据实际选择器调整）
const targetTextarea = document.querySelector('textarea');

// 创建MutationObserver实例，定义属性变化后的回调逻辑
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // 只关注readonly属性的变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'readonly') {
      // 判断当前是否处于可编辑状态（readonly属性被移除）
      const isNowEditable = !targetTextarea.hasAttribute('readonly');
      if (isNowEditable) {
        console.log('✅ textarea已从只读变为可编辑状态！');
        // 这里可以添加你需要的其他追踪逻辑
      } else {
        console.log('🔴 textarea变为只读状态');
      }
    }
  }
});

// 配置监听规则：只监听readonly属性的变化，提升性能
const observerConfig = {
  attributes: true,
  attributeFilter: ['readonly']
};

// 启动监听
observer.observe(targetTextarea, observerConfig);

// 后续如果需要停止监听，执行这句即可：
// observer.disconnect();

二、Chrome DevTools调试技巧：直接断点追踪触发源 #

如果你想找到到底是哪段代码触发了readonly属性的移除，不用写代码也能快速定位：

• 打开Chrome DevTools的Elements面板
• 找到目标textarea元素，右键点击它，选择Break on -> Attribute modifications
• 在弹出的输入框里输入readonly并确认
• 当页面中任何代码修改这个textarea的readonly属性时，DevTools会自动断点到触发修改的代码行，帮你精准定位问题根源

补充：jQuery版本实现（如果习惯用jQuery） #

如果你更熟悉jQuery，也可以基于MutationObserver封装实现：

$('textarea').each(function() {
  const $el = $(this);
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.attributeName === 'readonly') {
        const isEditable = !$el.attr('readonly');
        if (isEditable) {
          console.log('✅ textarea已变为可编辑状态');
        }
      }
    });
  });
  observer.observe(this, { attributes: true, attributeFilter: ['readonly'] });
});

这样不管是代码触发的属性移除，还是其他交互导致的状态变化，你都能实时捕获并打印日志，轻松追踪用户反馈的Bug啦！

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