如何移除页面中莫名出现的CodeMirror div？该元素出现的原因是什么？

出现原因 #

这个CodeMirror元素仅在Chrome出现，大概率是Chrome浏览器扩展插入的第三方DOM元素，CodeMirror本身是开源的网页代码编辑器组件，很多带网页代码编辑、调试、网页内容修改功能的扩展都会依赖它，会在匹配规则的页面内自动插入相关元素。小概率是你设置了Chrome开发者工具自动执行的自定义代码片段、或者项目前端依赖隐式引入该组件未做隐藏。

移除方法 #

• 优先排查扩展：打开Chrome无痕模式访问对应页面，如果该元素消失，直接进入chrome://extensions/页面逐个禁用扩展，刷新页面定位到对应扩展后，关闭它的全局页面注入权限，或者直接禁用不需要的扩展即可。
• 排查自动执行脚本：打开Chrome开发者工具的「源代码」面板，检查Snippets分类下是否有你之前保存的自动执行脚本，若有对应插入CodeMirror的脚本删除即可。
• 临时快速移除：可以直接在你的PHP页面前端代码中加入以下规则，强制隐藏/移除该元素：
  强制隐藏的CSS代码：

  .CodeMirror {
    display: none !important;
  }
  

  直接移除节点的JS代码：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.CodeMirror').forEach(node => node.remove())
  })
  

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