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

标签 html css google-chrome google-chrome-devtools

我正在研究在表单字段中提交邮政编码后弹出查询结果的模式的 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 事件来处理的,该片段应该可以工作(当然有选择器/zip 修改。)这使您无需重新输入和提交每次重新加载,您需要做的就是正在运行代码段。

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

关于html - 使用 Chrome 开发工具刷新模式以查看 HTML/CSS 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35925898/

相关文章:

javascript - 如果内容非常少,如何将页脚始终贴在页面底部?

javascript - 谷歌财经放大缩小图表逻辑

google-chrome - Chrome 和其他浏览器会放弃对同步 XMLHttpRequest 的支持吗?

c# - ASP.NET 为信用卡字段禁用 Chrome 自动填充

jquery - 防止 jquery-validate 使用 title 属性作为错误信息?

html - 尽管只指定了一种颜色,但线性渐变显示两种颜色

html - 在占位符中的元素之间添加空间

css - "i"在 CSS 属性选择器中意味着什么?

php - CSS 样式没有应用到我的论坛 任何人都知道为什么?

javascript - HTML:通过单击单元格来选择单选按钮 - 代码在 Chrome 中运行,而不是在 Firefox 中运行