Debugging a Missing Footer Share Button in Production Using Chrome’s File Override Feature

Background – A production page showed a missing share button at the bottom while the same page worked correctly in the test environment. The author investigated the DOM and discovered that the button’s visibility is controlled by a computed property isShowFooter whose value depended on three reactive variables.

Initial Suspects – The problem was not caused by CSS positioning (e.g., iOS 12 fixed‑position bugs) because the DOM element itself was absent. The focus shifted to the Vue state variables state.isChat , state.bannerDetail?.shareSidebar and state.bannerImageInfo?.id , and their initialization logic.

Code Analysis

<ActivityFooter v-if="isShowFooter" :staffId="staffId" :activityFooterInfo="state.bannerImageInfo" @share="shareShow" />

The computed property is defined as:

const isShowFooter = computed(() => {
  return !(state.isChat && !state.bannerDetail?.shareSidebar) && state.bannerImageInfo?.id;
});

In the production environment the variables evaluate to state.isChat = false , state.bannerDetail?.shareSidebar = true , and state.bannerImageInfo?.id = 44 , which should make isShowFooter true, yet the button remained hidden.

Breaking the Stalemate – The author turned to Chrome’s built‑in file‑override feature to replace the online script with a local copy for easier debugging.

Step 1: Locate the Debug File – Using the Network panel, the author filtered out irrelevant scripts (e.g., sdkMsgXXX.js , polyfillXXX.js , vue.XXX.js ) and identified three index.XXX.js files. A search for the variable isChat pinpointed the relevant file index.58a9f303.js .

Step 2: Enable File Override – A local folder (named assets ) was created, then in the Sources panel the “Override → Choose folder” option was selected and permission granted. The target script was saved to this folder, allowing Chrome to load the local version instead of the remote one.

Step 3: Modify and Debug – The minified script was beautified in VSCode, and additional console logs were inserted to print the three reactive variables. After refreshing, the logs showed the values but the computed property only executed once during page initialization, not after the API responses.

Step 4: Resolve the Issue – The investigation revealed that the st import (which maps to Vue’s computed ) came from different modules in test and production builds. By aligning the production import to the same module as the test environment ( ./vue.85dd2d76.js ) and removing the conflicting export, the computed logic behaved correctly and the share button appeared.

Conclusion – Chrome’s file‑override tool proved invaluable for quickly iterating on production code without redeploying, and the case highlights the importance of understanding module imports and reactive computations in Vue applications.