如何设置chrome浏览器无需刷新即时调试?

例如在本地写一个index.html,用chrome浏览器看效果,每次修改代码后都要刷新一下看效果,能不能每次保存代码后,浏览器就自动更新?而不需要每次都去手动刷新

阅读 37.4k
9 个回答

1 使用叫 F5的一个工具, 国内做的,还可以. (已购买,几十元,但新版的好像没老版好用)

2 使用live.js 文件 纯客户端的, 在HTMl代码中引入.

3 使用nodejs 架设服务器,通过一些autoload 组件 实现自动刷新

4 使用webstorm 的live edit 插件. 挺好用的, 但必须使用webstorm, 同时Chrome或firefox需要装webstorm的插件

可以试一下LiverReload这个工具。

你可以尝试从后台每隔几秒去请求新的页面,比如通过 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>

在chrome developer tools里,右键点击Js代码,有个Live edit功能,你可以直接在developer tools里修改代码并查看效果。还有local modifications可以查看修改的记录。

首先,做一个本地服务(Server),他用来干两件事情。

  1. 用于检查文件是否变化。
  2. 提供一个 websocket 端口通知 Chrome

然后,再做一个 Chrome extension,这个扩展也做两件事情。

  1. 去连接前面的本地服务的 websocket
  2. 当收到刷新消息的时候,调用 js 去刷新页面。

整个流程就是

  • 静态文件更新
  • -> Server 使用 websocket 通知 Extension
  • -> Extension 收到消息后刷新页面

是不是挺简单的?

Server 端,可以用 Gruntjs,Socket.io 轻松搭建一个起来。

Chrome 就自己看看文档写一个吧,也很简单。

其实很简单啦,你只要F12打开开发者工具,点击右下角的齿轮“设置”按钮进入下一界面,选中General选项卡中的Disable cache (while DevTools is open) 就行了。下次只要你是在开发者工具打开的情况下

新手上路,请多包涵

comhard 的 其实很简单啦,你只要F12打开开发者工具,点击右下角的齿轮“设置”按钮进入下一界面,选中General选项卡中的Disable cache (while DevTools is open) 就行了。下次只要你是在开发者工具打开的情况下 巨正解。试用一段时间看看。

chrome装个扩展程序 Live Reload 不过要翻墙去谷歌商店 如要我可以发你一个

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏