如何用JS在Chrome控制台修改input值并正确存储修改后的数据

值回退的核心原因是React/Vue等现代框架及二次封装的表单组件，不会直接把DOM节点的value属性作为唯一状态真值源。你直接修改DOM的value属性、再触发老式change事件的写法，无法同步更新框架内部维护的状态，一旦组件触发重渲染（比如点击输入框、页面局部刷新），框架就会用内部存储的旧值覆盖你手动修改的DOM内容，表现为输入值回退。
另外你原有代码存在两处会直接导致失效的错误：一是事件参数使用了中文全角引号，会触发语法错误；二是使用了已废弃的document.createEvent+initEvent旧API创建事件，多数现代框架不会响应这类老式事件。

// 获取目标输入框节点
const bc = document.getElementsByClassName('css-13lt97d')[0];
// 调用原生Input元素的value赋值方法，确保赋值操作能被框架监听到
const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
nativeValueSetter.call(bc, '25');
// 按框架事件监听顺序触发冒泡事件，覆盖绝大多数框架/组件库的监听逻辑
bc.dispatchEvent(new Event('input', { bubbles: true }));
bc.dispatchEvent(new Event('change', { bubbles: true }));
bc.dispatchEvent(new Event('blur', { bubbles: true }));

• 上述修复代码适配React、Vue2/Vue3、Ant Design、Element UI/Plus等绝大多数主流技术栈的表单组件，执行后值会直接同步到框架内部状态，不会出现点击回退问题，后续表单提交也能正常读取到修改后的值
• 如果遇到做了特殊交互封装的输入框（比如带输入防抖、自定义分词、实时校验的复杂输入组件），可以在现有触发事件的基础上，补充触发focus、keydown、keyup事件，模拟完整的用户输入操作即可
• 编写JS脚本时所有引号、括号必须使用英文半角符号，否则会直接抛出语法错误无法执行

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