使用 Chrome 开发工具刷新模式以查看 HTML/CSS 更改
refresh modal with Chrome dev tools to view HTML/CSS changes
我正在处理在表单字段中提交邮政编码后弹出查询结果的模式的 HTML 和 CSS。我在 HTML/CSS 中进行更改，然后在浏览器中刷新页面，并且必须输入邮政编码并再次提交表单，以查看对模态的更改是否按照我期望的方式呈现。我只想刷新模态，而不必每次都提交邮政编码。曾经有人在 Chrome 开发工具中向我展示了一种方法，但我不记得她是如何做到的。这会为任何人敲响警钟吗？谢谢！
既然一切都应该可以通过JS处理，那么可以使用DevTools Snippets。这些是方便的 JS 小块，您可以按需执行它们以执行页面中需要的任何操作。
就像一个普通的脚本，即：
// Grab the zip input and change the value.
let zipInput = document.querySelector('[name="zip"]');
zipInput.value = '90210';
// Just get the associated form to the zip and submit.
zipInput.form.submit();
假设您的事件是通过吃掉表单的 submit 事件来处理的，该片段应该起作用（当然需要 selector/zip 修改。）这样您就无需重新输入和提交每次重新加载，您只需要做的是 运行 片段。
如果模式的 HTML 和 CSS 是在服务器端生成的，并随每个请求发送到客户端，您只需关闭模式并重新提交即可。因为这会产生一个新的请求，并且模态的内容将被重新应用。
我正在处理在表单字段中提交邮政编码后弹出查询结果的模式的 HTML 和 CSS。我在 HTML/CSS 中进行更改，然后在浏览器中刷新页面，并且必须输入邮政编码并再次提交表单，以查看对模态的更改是否按照我期望的方式呈现。我只想刷新模态，而不必每次都提交邮政编码。曾经有人在 Chrome 开发工具中向我展示了一种方法，但我不记得她是如何做到的。这会为任何人敲响警钟吗？谢谢！
既然一切都应该可以通过JS处理，那么可以使用DevTools Snippets。这些是方便的 JS 小块，您可以按需执行它们以执行页面中需要的任何操作。
就像一个普通的脚本，即：
// Grab the zip input and change the value.
let zipInput = document.querySelector('[name="zip"]');
zipInput.value = '90210';
// Just get the associated form to the zip and submit.
zipInput.form.submit();
假设您的事件是通过吃掉表单的 submit 事件来处理的，该片段应该起作用（当然需要 selector/zip 修改。）这样您就无需重新输入和提交每次重新加载，您只需要做的是 运行 片段。
如果模式的 HTML 和 CSS 是在服务器端生成的，并随每个请求发送到客户端，您只需关闭模式并重新提交即可。因为这会产生一个新的请求，并且模态的内容将被重新应用。