使用Chrome开发工具刷新模态以查看HTML / CSS更改

Question

我正在处理在表单字段中提交邮政编码后弹出查询结果的模式的HTML和CSS。我在HTML / CSS中进行了更改，然后在浏览器中刷新页面，并且必须输入邮政编码并再次提交表单，以查看对模态的更改是否按照我期望的方式呈现。我想刷新模态而不必每次都提交邮政编码。有人向我展示了一次在Chrome开发工具中执行此操作的方法，但我不记得她是如何做到的。这对任何人都响铃吗？谢谢！

Answer 1

由于一切都应该能够通过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事件来解决的，那么该代码片段应该有效（当然还有选择器/ zip修改。）这样可以避免重新输入和提交每次重新加载，这样您只需要do是运行代码段。

如果模式的HTML和CSS是在服务器端生成的并且随每个请求发送到客户端，则可以简单地关闭模式并重新提交。由于这会产生新的请求，并且将重新应用模态的内容。