Chrome 控制台 |仅重新加载或刷新特定元素，而不是整个页面

Question

我正在测试一个具有大约 50 个只读字段的页面，每个字段都显示来自数据库的值。该页面工作正常，当该字段（在数据库中）发生更改时，页面会正确显示更改。

问题是：

要查看更改如何反映，我必须刷新整个页面（使用 f5），这需要很长时间才能从头开始重新加载整个页面。我需要一种方法来使用 chrome console 刷新该 HTML 元素（包含我正在测试的字段的元素）并加快测试速度。有太多的价值观需要我去尝试：/

例如，我知道我可以从控制台向浏览器发出命令，如下所示：

document.getElementById("combo-1123-trigger-picker").click();
document.getElementById("combo-1123-trigger-picker").remove();

这些都有效。但是，如果我尝试这样的事情：

document.getElementById("combo-1123-trigger-picker").load();

或者类似的东西：

document.getElementById("combo-1123-trigger-picker").refresh();

...它不起作用。

有没有一种方法可以使用 Chrome 控制台或开发工具仅更新一个 HTML 元素？

Answer 1

在控制台中，您可以使用 document.getElementById(...) 获取元素，并获取它的innerHTML。

1. 获取内部html

   document.getElementById(...).innerHTML

2. 复制输出html

3. 将内部 html 设置为空字符串

   document.getElementById(...).innerHTML = ''

4. 现在再次粘贴 html。 document.getElementById(...).innerHTML = //这里是你之前复制的html

那么它的行为应该像数据的当前状态一样