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

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

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


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

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

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

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

整个流程就是

是不是挺简单的?

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

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


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


你可以尝试从后台每隔几秒去请求新的页面,比如通过 ajax 读取,如果 lastModified 大于当前的 lastModified 就执行页面 reload,不知道可行不


上面这个方法可能不可行, Chrome 貌似不支持对 file protocol 进行 ajax,它会认为是跨域的,要想达到效果,给你下面几个建议:


如果楼主没有这么强的实时需求,完全不用装扩展呀。

<!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这个工具。

【热门文章】
【热门文章】