我最近了解了DevTools中引入的工作区,但那不是我需要的。例如:页面使用从CDN加载的jquery,我修改jquery库代码,按下ctrl-s,重新加载页面->修改将丢失。或者我想要调试一些我无法更改文件的站点。
我不仅想要保存更改,就像在浏览时保存CSS,在Chrome Dev或Firebug内部如何将CSS文件保存到本地目录,我希望它们在页面重新加载之间保持存在。
我最近了解了DevTools中引入的工作区,但那不是我需要的。例如:页面使用从CDN加载的jquery,我修改jquery库代码,按下ctrl-s,重新加载页面->修改将丢失。或者我想要调试一些我无法更改文件的站点。
我不仅想要保存更改,就像在浏览时保存CSS,在Chrome Dev或Firebug内部如何将CSS文件保存到本地目录,我希望它们在页面重新加载之间保持存在。
这是可能的,但相当棘手:
function restyle() {
$("*").css("color", "blue"); /* development elements, css, js */
$("head").append("<script>console.log(\"restyle\")</script>"); /* js */
var t = document.querySelectorAll("*"); /* modified document */
var outer = document.documentElement.outerHTML; /* modified document */
var inner = document.documentElement.innerHTML; /* modified document */
return $.ajax() /* `pseudo` `reload` */
.done(function(data) { /* original document */
document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */
console.log(data, inner, outer, $(t)) /* options, `callbacks` */
/* $.each($(t), function(index, value) { console.log(value) }); */
})
};
restyle();
小提示,在Firefox浏览器中,我使用Greasemonkey。我不知道您是否了解这个工具,但它允许在网站上运行JavaScript脚本,从而可以使用适当的JavaScript动态更改CSS。
以下是使用greasemonkey的入门指南: http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/
对于chrome浏览器,可以使用tampermonkey插件: http://tampermonkey.net/faq.php
我使用Eclipse将Apache设为调试模式,这样当我保存页面时,更改会立即反映到网站上。
参见https://dev59.com/32Qn5IYBdhLWcg3w5aay#31585725:
Resource Override扩展程序可以让你做到这一点:
- 为要替换的URL创建文件规则
- 在扩展程序中编辑js/css等文件
- 随时重新加载 :)
你甚至可以在开发工具中添加一个选项卡。