例如在本地写一个index.html,用chrome浏览器看效果,每次修改代码后都要刷新一下看效果,能不能每次保存代码后,浏览器就自动更新?而不需要每次都去手动刷新
首先,做一个本地服务(Server),他用来干两件事情。
- 用于检查文件是否变化。
- 提供一个 websocket 端口通知 Chrome
然后,再做一个 Chrome extension,这个扩展也做两件事情。
- 去连接前面的本地服务的 websocket
- 当收到刷新消息的时候,调用 js 去刷新页面。
整个流程就是
- 静态文件更新
- -> Server 使用 websocket 通知 Extension
- -> Extension 收到消息后刷新页面
是不是挺简单的?
Server 端,可以用 Gruntjs,Socket.io 轻松搭建一个起来。
Chrome 就自己看看文档写一个吧,也很简单。
在chrome developer tools里,右键点击Js代码,有个Live edit功能,你可以直接在developer tools里修改代码并查看效果。还有local modifications可以查看修改的记录。
你可以尝试从后台每隔几秒去请求新的页面,比如通过 ajax 读取,如果 lastModified 大于当前的 lastModified 就执行页面 reload,不知道可行不
上面这个方法可能不可行, Chrome 貌似不支持对 file protocol 进行 ajax,它会认为是跨域的,要想达到效果,给你下面几个建议:
- 将 html 放在本地的 apache 下,然后通过 http 访问,用上面提到的方法就可以了。
可以使用下面的库,它会自动检测变化为你刷新:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
- 需要借助 Chrome 扩展实现自动检测变化并刷新(如果你不急着用,我可以尝试帮你写一个)
- 使用开源中国提供的 http://runjs.cn/ 它可以实现实时预览(推荐)
如果楼主没有这么强的实时需求,完全不用装扩展呀。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5;url=index.html">
</head>
<body>刷新就应该这个亲子嘛!</body>
</html>
1 使用叫 F5的一个工具, 国内做的,还可以. (已购买,几十元,但新版的好像没老版好用)
2 使用live.js 文件 纯客户端的, 在HTMl代码中引入.
3 使用nodejs 架设服务器,通过一些autoload 组件 实现自动刷新
4 使用webstorm 的live edit 插件. 挺好用的, 但必须使用webstorm, 同时Chrome或firefox需要装webstorm的插件
comhard 的 其实很简单啦,你只要F12打开开发者工具,点击右下角的齿轮“设置”按钮进入下一界面,选中General选项卡中的Disable cache (while DevTools is open) 就行了。下次只要你是在开发者工具打开的情况下 巨正解。试用一段时间看看。
其实很简单啦,你只要F12打开开发者工具
,点击右下角的齿轮“设置”按钮进入下一界面,选中General选项卡中的Disable cache (while DevTools is open)
就行了。下次只要你是在开发者工具
打开的情况下
可以试一下LiverReload这个工具。