前端开发的好帮手:chrome-devtools-autosave

虽然我不是前端 开发工程师,但是有时候也需要自己写写页面什么的。当然质量是不能和前端相比的。做前端的页面不可能一次性写好的，需要不停的调试。调试的时候一般都是启动web服务器，然后用浏览器访问，发现问题后，然后到页面上调整下，然后刷新，继续调试。可恶的重复劳动。。。

今天在逛各种网站的时候偶然发现了一个很好的工具: chrome-devtools-autosave。看了这个名字就知道只适合在chrome下使用。我们知道使用chrome develop tools是可以修改页面的js和css的，修改的效果能够立刻显示，但是不能够保存后台的文件中。而有了这个工具以后，能够将修改的内容自动的保存到后台的资源文件中。很给力啊！！

他的原理其实比较简单，更欣赏的是这个创意。这个项目主要有两个部分 server 和 google插件。这个插件会降修改的文件推送到server,然后server会解析文件的路径，然后覆盖旧的文件。(Chrome DevTools Autosave consists of a Chrome extension and a server. The extension pushes changed files to the server. The server resolves URL of these files and overwrites the old ones with the new ones.)  那插件又是怎么获得修改的文件的内容的呢？ 原来是google chrome提供了接口：

//Google Chrome has a [onResourceContentCommitted event](http://code.google.com/chrome/extensions/dev/experimental.devtools.inspectedWindow.html#event-onReso//urceContentCommitted) that fires when you edit CSS and JavaScript.
chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(event) {
    event.url
    event.type // 'script', 'stylesheet' or 'document' (happens when you add new CSS rule)
    event.getContent(function(content) {
        content // all the content of updated file as a string
    })
})

这个项目是托管在github上的。项目地址是：https://github.com/NV/chrome-devtools-autosave : 这个是客户端，可以配置文件使用的协议,默认是file://, 也可以使用http://.

https://github.com/NV/chrome-devtools-autosave-server 这个是server.  这个是chrome插件http://userscripts.ru/js/chrome-devtools-autosave/latest.crx

怎么安装，其实文档中已经写的非常详细了！不过我还是写下吧。

安装插件：

1.首先要启用chrome的实验性程序扩展API，默认是关闭的。 在浏览器地址栏中输入: chrome://flags

2.重启chrome

3. 安装插件 http://userscripts.ru/js/chrome-devtools-autosave/latest.crx

安装server:

1. 这个server是用node.js写的。需要先下载node.js。我是在windows下的，所以下载的是msi程序。安装后就可以在命令行中用node命令启动了

2.下载server。从命令行中进入到server的根目录。运行命令: node index.js. 就开启了server

 然后就可以在chrome直接修改了。。。

对了，作者还专门拍摄了一段视频来说明怎么使用。http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

哈哈！ 预祝大家圣诞快乐！！