编写 css代码的时候,如何让浏览器自动刷新,看调试?

编写 css代码的时候,如何让浏览器自动刷新,看调试?

阅读 12.6k
5 个回答

你希望一个什么效果呢?直接修改 css 代码后,浏览器自动刷新,我觉得这个自动刷新没什么必要吧,一个 ctrl+r 就可以解决的操作。
或者你是希望调试的时候页面能同步刷新,那么你直接在浏览器里打开调试工具,对样式修改编辑即可。以 chrome 为例,打开页面,右击鼠标,选择审查元素就可以修改页面中的任一元素,对元素的 style 进行调整,修改后的页面会及时响应更新。
我的建议是你可以先在页面内利用调试工具对页面进行调整,达到想要的效果后,再把相应的修改添加到对应的 css 文件里去。最后刷新页面检查效果。
【调试工具修改页面样式->达到效果->修改对应 css 文件并保存->刷新页面查看效果】
你可以参考 civerzhu 的博文 你不知道的Chrome DevTools(3):随意修改你的HTML

如果是希望保存 css 文件自动触发页面刷新的话,我推荐一个 javascript 小插件:CSS refresh
这个插件用起来很简单:

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

先下载好 CSSrefresh.js 文件,然后指定需要自刷新的 css 文件即可,如上代码所示。

假设你的 html 页面是 index.html,包含以下代码:

<head>
   <link rel="stylesheet" type="text/css" href="test.css" />
   <script type="text/javascript"
src="http://cssrefresh.frebsite.nl/js/cssrefresh.js"></script>
</head>
<div>my style can refresh automatically by cssrefresh!</div>

为了方便,我就直接调用远程的 javascript 文件了。然后同级目录加入 test.css 文件,内容如下:

div { color: blue}

所以默认 index.html 页面显示蓝色字体,此时修改 test.css 文件为:

div { color: red}

按下 ctrl+s 保存修改的 test.css 文件,大概1-2 s 的间隔时间就可以看到页面已经自动刷新,字体显示红色。我在本机已经测试,应该没问题。你使用的页面定时刷新方法,虽然达到了目的,但是有点 tricky,不建议使用。

http://livereload.com/

类似的工具还有很多,Google 一下。

玩正规的,那就 Grunt(或类似 Task Runner)走起,想怎么刷就怎么刷。

一般用工具,以前用过一个 F5,现在官网好像没有了。功能就是,每次保存CSS文件,浏览器就自动刷新。

现在有个更好的工具 Adobe Brackets

还有一个不是工具的工具,也很简单 http://livejs.com/

我一般修改是使用谷歌浏览器的审查元素。在里面修改CSS之后就会刷新显示出来。

推荐问题
logo
101 新手上路
子站问答
访问
宣传栏