为什么有时候开发难以按预期完成？

水滴间网站现已升级到Drupal10，默认主题已随之切换为olivero主题，这里以升级过程中遇到的一个问题来说明：为什么有时候开发难以按预期完成，问题描述如下：

BigPipe模块导致olivero主题在导航菜单中，点击搜索图标不弹出搜索表单的问题

升级Drupal 10 后，发现点击导航栏中的搜索放大镜图标无法弹出搜索表单，浏览器控制台显示以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'classList')

排查过程如下： 
最直接的原因是web\core\themes\olivero\js\search.js文件的第10-12行代码：

  const searchWideWrapperSelector ='[data-drupal-selector="block-search-wide-wrapper"]';
  const searchWideWrapper = document.querySelector(searchWideWrapperSelector);

无法找到这个搜索表单包装元素，但在浏览器控制台中查看是有这个元素的

然后查看源代码，发现这个搜索表单元素被BigPipe模块做了处理，此时你需要知道BigPipe模块的作用：

它将不耗时的静态内容先发送给浏览器，以便浏览器尽快有所显示，避免用户等待着急，而将页面中耗时的动态内容先用占位符替换，等浏览器渲染完页面后，再从后端拉取那些动态内容来替换之前放置的相应占位符。

换句话说：BigPipe模块就是将内容分批发送，以便浏览器尽快显示，而传统方式是将内容一次性发送，这样做的目的是尽可能快的显示页面，提高用户体验。

之所以搜索js找不到表单包装元素而浏览器控制台中能看到，就是因为查找时机发生在动态内容替换占位符之前，此时尚未替换，当然就找不到，所以报错无法弹出搜索表单了。

那么BigPipe模块为什么要把搜索表单识别成动态内容加以处理呢？默认情况下是不会这样的，进一步排查，是因为“yunke_captcha”模块为所有的表单元素添加了缓存元数据（这样做的目的是验证码配置变动后及时让表单响应更新，逻辑上是没有问题的），正是因为向表单元素添加了缓存元数据这个动作，导致了BigPipe模块将搜索表单元素识别为动态内容，从而进行了处理，进而导致了搜索表单无法弹出。

一个JS错误，想不到会牵扯到两个模块和缓存系统。

这是一个非常典型的故障排除案例，一个小故障导致一连窜的分析检查，所以，为什么说开发有时候难以按预期完成进度？就是因为不知道有什么坑在前方等着，也不知道会为此耗去多少时间去查阅那些本不用查阅的资料

目前“yunke_captcha”模块已对该问题做了规避，为此发布了2.4版本

但该问题并不是“yunke_captcha”模块的bug，而是olivero主题和BigPipe模块需要改进，尤其是BigPipe模块需要添加排除处理的方法，云客针对该问题已向Drupal官方提交修复建议