{"id":15025300,"url":"https://github.com/nv/chrome-devtools-autosave","last_synced_at":"2025-04-04T16:13:50.816Z","repository":{"id":66026529,"uuid":"2520793","full_name":"NV/chrome-devtools-autosave","owner":"NV","description":"Auto-saving CSS and JavaScript changes from the Chrome Developer Tools","archived":false,"fork":false,"pushed_at":"2015-09-25T10:06:27.000Z","size":385,"stargazers_count":1042,"open_issues_count":30,"forks_count":90,"subscribers_count":45,"default_branch":"master","last_synced_at":"2024-10-30T06:54:57.306Z","etag":null,"topics":["chrome-devtools","chrome-extension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NV.png","metadata":{"files":{"readme":"README.mdown","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-10-05T17:33:31.000Z","updated_at":"2024-10-29T01:13:38.000Z","dependencies_parsed_at":"2023-02-19T21:30:43.147Z","dependency_job_id":null,"html_url":"https://github.com/NV/chrome-devtools-autosave","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NV%2Fchrome-devtools-autosave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NV%2Fchrome-devtools-autosave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NV%2Fchrome-devtools-autosave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NV%2Fchrome-devtools-autosave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NV","download_url":"https://codeload.github.com/NV/chrome-devtools-autosave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208142,"owners_count":20901570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-devtools","chrome-extension"],"created_at":"2024-09-24T20:02:01.394Z","updated_at":"2025-04-04T16:13:50.791Z","avatar_url":"https://github.com/NV.png","language":"JavaScript","readme":"# Chrome DevTools Autosave\n\n**[DevTools Autosave on Google I/O 2012](http://www.youtube.com/watch?v=3pxf3Ju2row\u0026hd=1\u0026t=18m24s)** · **[Intro to DevTools Autosave version 0.x (a bit outdated)](http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/)**\n\nChrome DevTools let you edit CSS and JavaScript. It even allows you to save it. I think, it’s annoying to choose a folder you want to save to for every file. DevTools Autosave saves the files on every change for you!\n\n## How to Install\n\nChrome 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.\n\n### Install [the Extension](https://chrome.google.com/webstore/detail/mlejngncgiocofkcbnnpaieapabmanfl)\n\n### Install [the Server](https://github.com/NV/chrome-devtools-autosave-server/blob/master/README.mdown)\n\n## How to Use\n\n    $ autosave\n    DevTools Autosave is listening on http://127.0.0.1:9104\n\nOpen example/index.html locally (using file:// scheme).  \nEdit some CSS and JS.  \nThat’s it. Files have been saved.\n\n## How Does It Work?\n\nGoogle Chrome has an [onResourceContentCommitted event](http://developer.chrome.com/extensions/devtools.inspectedWindow.html#event-onResourceContentCommitted) that fires when you edit CSS and JavaScript.\n\n    chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {\n        resource.url\n        resource.type // 'script', 'stylesheet' or 'document' (happens when you edit inline JS or CSS)\n        content // all the content of updated file as a string\n    })\n\nNice, isn’t it?\n\nMore on [Autosave protocol](https://github.com/NV/chrome-devtools-autosave/wiki/Protocol).\n\n### FAQ\n\n\u003e I’m developing on `http://localhost/` (or `http://you-name-it/`) instead of `file://`. Can I make Autosave work?\n\nSure, just add a new route to the extension’s options.\n\n![Autosave Options](https://lh6.googleusercontent.com/DA5oo80MQuRWLSim_0WmJfoMf060ZtkC1ITt4-cnesq3lMKO00bdL6yG1xUN548f82WeRn8WHw=s640-h400-e365)\n\n## Alternatives\n\nAll the alternative listed below miss one Autosave’s feature: saving newly added CSS rules to the last stylesheet file.\n\n### Workspaces\n\n![chrome-devtools-workspaces](https://f.cloud.github.com/assets/55838/727738/6e76debc-e1b9-11e2-8ae9-716b21090a7c.png)\n\nLatest Chrome DevTools support [Workspaces](https://plus.google.com/+GoogleChromeDevelopers/posts/644qQuBKZeL) which makes Chrome DevTools Autosave obsolete.\n\n### [Tincr](http://tin.cr/)\nThe same as Autosave but doesn’t require you to install the server and does both ways syncing!\n\n### [fb-flo](https://github.com/facebook/fb-flo)\nTwo-way sync, requires to install Node and write JS config files.\n\n### [JetBrains IDE Chrome extension](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji)\nWorks only with JetBrains IDEs, such as WebStorm.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnv%2Fchrome-devtools-autosave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnv%2Fchrome-devtools-autosave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnv%2Fchrome-devtools-autosave/lists"}