nv / chrome-devtools-autosave Goto Github PK
View Code? Open in Web Editor NEWAuto-saving CSS and JavaScript changes from the Chrome Developer Tools
License: MIT License
Auto-saving CSS and JavaScript changes from the Chrome Developer Tools
License: MIT License
My webapp is located:
/Users/username/developer/projects/jimbeam/
with the following files:
/Users/username/developer/projects/jimbeam/index.html
/Users/username/developer/projects/jimbeam/css/style.css
DevTools Autosave -> Options:
Resource: ^http://jimbeam.dev/
Post To: http://127.0.0.1:9104/save
Routes are ~/chrome-devtools-autosave/jimbeam-routes.js:
exports.routes = [{
from: /^http://jimbeam.dev//,
to: '/Users/username/developer/projects/jimbeam/'
}];
I run the following from the terminal: autosave --config ~/chrome-devtools-autosave/jimbeam-routes.js
The response in the terminal is: DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104
When I navigate to: http://127.0.0.1:9104/
The browser responds with: DevTools Autosave 0.3.1 is running well.
I update some styling in chrome. I refresh the page, none of the styles are saved. No errors in the open terminal window where the server is running. It still just reads: DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104
I am running chrome 19.0.1049.3 dev, node v0.6.10
Any ideas?
This looks awesome, first of all.
Secondly, I'm doing all of my development work using SASS. Think it'd be possible to update the SASS file (that compiles into the CSS we edit in chrome devtools), instead of the raw CSS? That'd be so awesome.
I've completed all the steps correctly and am receiving " DevTools Autosave 0.3.2 is running on http://127.0.0.1:9104 "
Perfect. But when i do try and edit in Chrome (17.0.963.79) I receive a pop-up in the top right reading " DevTools Autosave Server doesn't run on http://127.0.0.1:9104/save' "
This is running on Mac OSX 10.6.8
I have installed both the Chrome extension as well as the server, yet when I go to edit the css of a page in browser, I am getting no detected change. Nothing comes up in the terminal and the site is restored to its original styling upon refresh.
I have:
The file I am trying to change is located at file://localhost/User/username/projects/etc...
If not is it still configured to auto update?
Hi.
I want to use the autosave extension for developing websites that aren't available via file:// because they use PHP.
I use MAMP as a PHP server.
The website now is available under http://localhost/index.php.
The files are available under /Volumes/test/index.php
I don't know how what 'Resource' and 'Post to' options to use for this scenario.
Thanks.
Я нашел такой способ
Нужно дать расширению разрешение на использование "tabs"
В devtools.html нужно в sendRequest также передавать chrome.experimental.devtools.inspectedWindow.tabId
В background.html используем полученный ID при помощи асинхронной функции chrome.tabs.get
, я сделал так:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
// detecting current URL
chrome.tabs.get(request.tabId, function(tab) {
request.tabUrl = tab.url;
if (request.message == 'Hi') {
sendResponse(getBackend(request, sender, sendResponse));
} else if (request.message == 'Send') {
................
Всё, дальше в getBackend можно заодно проверить по маске УРЛ текущей страницы, на которой мы находимся
My problem is this:
I've downloaded and installed the plugin and Node.js(in order to install the server). But, when I run npm install -g autosave on windows, it throws me
Error: failed to fetch from registry: autosave
I thik it probably has something to do with the fact that I have a proxy server configured. How can I configure a proxy server, username and password so I can install the autosave server?
Thanks
To break caching, I have version numbers at the end of the css and javascript files:
<link rel="stylesheet" href="css/reset.css?v=1.0">
When saving, this is added to the end of the filename.
Diffs are lean. Diffs allow several people to edit one file at the same time.
Can someone be kind to the windows users and provide a step by step for us? I see other Window users found a solution but I could not follow their explanation. Any tips would be much appreciated.
Hi there, ok here are the steps im following to install the extension on my chrome browser in windows 7.
I've installed the extension.
I'm stuck on installing the server.
This is what I'vedone:
I've also tried to navigate to the install directory and run "npm autosave"
Greetings!
OK. I'm posting this because I must be mentally slow. I've been able to successfully install the extension. I've successfully installed node.js, and I've successfully installed the autosave server. At the command prompt I can successfully run autosave and see 'DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104'.
I've then added the rule (in the extension itself) for http://localhost/ to point to the DocumentRoot of my server, but I nothing is saving.
What am I missing, what have I done wrong? I'm itching to use this and am pulling my hair (what's left of it) out.
Thanks in advance!
Rich
Hi im trying to edit through localhost. Ive read all the issues and markdown but still cant figure it out. Im on a mac using MAMP. The CSS file is located in /Users/Dan/Sites/xbox_repair/css/. What should my routes.js (At the moment i saved it in /Users/Dan/Sites/ ) look like and what should i run in terminal. Sorry am a new developer and love this extension!!
Hey, English native speakers, would you mind checking README.mdown?
It seems to be a Chrome bug that sometimes prevents newly added CSS rules from saving.
@drewcovi, looks like the same problem you once described.
Can't get autosave working with an example Meteor app. (Just downloaded the following app http://meteor.com/examples/leaderboard and ran it on my local machine)
I'll mention upfront that I'm a rookie developer but I did spend time reading through the instructions and several of the tickets. Tried countless config variations before posting here. Can't get the autosave feature to work on the external CSS file.
Your help is appreciated. Thanks.
Here's my setup:
App running here
http://localhost:3000/
App located on my local drive
Users/reshadnoorzay/apps/ramadanPledges
Css file located here
http://localhost:3000/ramadanPledges.css
Current routes.js file located here
Users/reshadnoorzay/apps/routes.js
routes.js file contents:
exports.routes = [{
from: /^http://localhost//,
to: '/Users/reshadnoorzay/apps/ramadanPledges/'
}];
DevTools autosave options:
Resource: ^http://localhost/
Post to: http://127.0.0.1:9104/save
I'm getting the following error in the background.html console:
POST http://127.0.0.1:9104/save 500 (Internal Server Error)
onRequest background.html:84
chrome.Event.dispatch extensions/event.js:183
chromeHidden.Port.dispatch OnConnect.connectEventextensions/miscellaneous_bindings.js:99
chrome.Event.dispatch extensions/event.js:183
chromeHidden.Port.dispatchOnMessage extensions/miscellaneous_bindings.js:164
I'm also seeing this chrome UI popup:
URL
(http://localhost:8000/file/path/styles.css?092011) doesn't match RegExp /^file://[^/]*//
Here are my options settings:
Resources: http://localhost:8000/
Post to: http://127.0.0.1:9104/save
routes.js:
export.routes = [{
from: /http:\/\/localhost:8000\//,
to: '/Users/spencer/Documents/webapp/path/to/html'
}];
Does the to
key of the routes
from routes.js need to point to the exact folder that my html file is in? I have a base root that holds a lot of different python files with my html files scattered all over the place.
Also, I'm seeing a slight discrepancy from the link on how to use localhost and this open issue in how you input the Resource
in the options and the from
key of routes
in routes.js ( http://localhost
vs ^http://my.domain.name/
with the caret character before http portion of the url)
I know one uses locahost vs a real web host but I imagine they would be the same.
Any chance of supporting this?
I know this is security vulnerability and almost insane, but I want autosave to work on remote hosts too.
The quick hack is very simple, just edit node_modules/autosave/bin/autosave:
#!/usr/bin/env node
var autosave = require('../index.js');
var program = require('commander');
program
.version(autosave.version)
.option('-p, --port [' + autosave.defaultPort + ']', 'set port to listen on', parseInt)
.option('-f, --config <routes.js>', 'set config file', String)
// adding address option
.option('-a, --address [' + autosave.defaultAddress + ']', 'set address to bind to', String)
.parse(process.argv);
var routes;
if (program.config) {
var path = require('path').resolve(process.cwd(), program.config);
routes = require(path).routes;
if (!routes || !routes.length) {
console.error('Error: ' + path + ' does not define any rules in exports.routes.');
process.exit(1);
}
} else {
routes = autosave.routes;
}
// adding program.address argument
autosave.start(routes, program.port || autosave.defaultPort, program.address || autosave.defaultAddress);
Now you can run autosave -a <IP_of_remote_host>
Well, I think to make this less dangerous, we can simply add a kind of allowed hosts directive. Similar to khow xdebug remote debugging works.
Can HTML edits also be saved?
I just want to say, autosave is one bad-a$$ tool. I am having a bit of an issue with multiple route replacements in the routes.js file.
exports.routes = [
{
from: new RegExp('^http://localhost/'),
to: 'src\/some.Web'
},
{
from: new RegExp('otherpartof/samepath/'),
to: ''
}
];
The second one seems to be ignored...if I change the order, the one in the first spot now works.
A current project is requiring the use of a Drupal multisite install, so I set up some virtual hosts and changed my ports in MAMP to use more semantic URL's on my development machine (i.e., http://localhost:8888/site_name is now http://localhost/site_name, or http://sitename.local).
After this change I also changed my routes.js file, removing the port number from the url, and removed the port number from within Autosave's Extension options.
Here are my current configuration settings:
Routes file:
exports.routes = [{
from: /^http://localhost//,
to: '/Users/MyName/Dropbox/Sites/'
}];
Chrome Extension Options: (I believe these are correct for me, since I still want to work outside Drupal/MAMP environment using the file:// prefix as well)
^http://localhost/
http://127.0.0.1:9104/save
^file://localhost/Users/commonmind/Dropbox/Sites/
http://127.0.0.1:9104/save
I've tried troubleshooting but haven't had much luck, as I cannot see anything in the console log. I am, by no means, a Javascript guy...so apologies for the ignorance here.
Wouldn’t it be awesome to make DevTools Autosave work locally without installing the server?! Chrome extensions can be bundled with NPAPI plugins which have permissions to write to unsandboxed files. So I need a plugin that provide JS API to write to files.
http://groups.google.com/a/chromium.org/group/chromium-extensions/browse_frm/thread/0372dfd06d94f55a
I’ve never written any NPAPI plugins (nor any C++ at all) so I’m looking for help!
I'm having a problem where using commands in the terminal aren't being recognized. For instance I had to cd to the correct folder to use npm install -g autosave, and now to start listening on the server i'm trying to do autosave but it is saying "'autosave' is not recognized as an internal or external command, operable program or batch file." and I am unable to locate the correct folder to use this command from. Shouldn't these commands be working from anywhere on my computer anyway?
Can anyone install latest.crx in the latest version of chrome?
I try to open the extension it but is just re-downloads (creates a copy of the extension).
2/11/12 3:44:48.040 PM [0x0-0x9009].com.google.Chrome: [281:519:1323848680882:ERROR:CONSOLE(28)] "Uncaught TypeError: Cannot read property 'url' of null", source: chrome-extension://fdebcbmmihnbmkkadfbgapegofoagajd/devtools.html (28)
seems to have just happened as I updated to the latest version of autosave....
hi,
actually my issue is like this issue "http://127.0.0.1:9104/save does not responding (Win 7)"
but little different...
when i write on console (node.exe) "autosave", it returns
autosave is not defined.
i don't know how can i use nodejs exactly... i guess it's work, because when i write on chrome http://127.0.0.1:1337/ i can see Hello World text. But autosave extension doesn't work on my chrome...
i can use autosave in my mac, but not windows 7...
and chrome's console give this error:
Uncaught Error: chrome.devtools can only be used in extension processes. See the content scripts documentation for more details.chrome-devtools://devtools/extensions/renderer_extension_bindings.js
Привет! Я на GDD задавал вопрос про авто-сохранение CSS при изменении через chrome devtools. :)
Попробовал эктеншн, все работает, сейчас добавляю поддержку в свою CMSку.
Хотел поделиться несколькими соображениями, хотя большинство ты и так наверняка хотел сделать рано или поздно.
chrome.experimental.devtools is about to get stable:
Pay special attention to the following APIs, which we expect to finalize soon: devtools, ...
I will finally be able to publish the extension to Chrome Web Store. So, I need an icon. I haven't even figured out a metaphor for this. Except a floppy disk but I don't like it.
It should be available in different sizes: 128×128, 48×48, 16x16. Google Web Store icons guideline.
I'm sorry if this has been already resolved but I didn't find any solution about that issue.
I am using win 7 64 bit, i've followed all instructions and read all comments in http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/ page to figure out something that would help me. And any error hasn't been displayed by the console.
So where am I wrong ?
I juste noticed that after I wrote in console "chrome-devtools-autosave-server/index.js", I've got that line :
"ReferenceError : chrome isn't defined", and serveral ones after it.
hello, i have a bit of an issue setting this up to work on my environment.
i have zend framework installed on my local host here: C:\xampp\htdocs\zendet\zendet Also i set up a xampp server that points to c:/xampp/htdocs/zendet/zendet/public and the name of the server is http://zendet.website/
i installed this auto-save plugin successfully and it seems to work if i just drag a file into the browser.
i tryed to go into DevTools Autosave and add a new route:
-resource: c:/xampp/htdocs/zendet/zendet/public (or resource: ^http://localhost)
-post to : http://127.0.0.1:9104/save
but it doesn't work.
Any ideas?
thanks
edit : i also get this alert
URL (http://zendet.website/css/global/site.css) doesn’t match RegExp /^file://[^/]*//
Any chance of supporting this?
I'm on Mac. I've mount my remote server files with SSHFS on my Mac locally.
the path is
/Volumes/[email protected]/my.domain.name/new/basic/css/style.css
server path is
file://localhost/Volumes/[email protected]//my.domain.name/new/basic/css/style.css
how will my route.js will look like and where do I save routes.js file?
Thanks.
Sri
Alright, so hear me out on this little stop in crazy town
For collaborators, it would be great to allow two people to work on the same site using this plugin. The best way to avoid clobbering eachother would be to use two stylesheets (and merge them at a later date).
However currently we're just searching for the last stylesheet, it would be pretty fantastic if we could pick a specific stylesheet for new styles in the Options, so user A and user B could then work independently.
The default behavior would still default to the last discovered stylesheet.
hi there, first of all im gonna excuse me cuz i dont speak very well english... so be patient and any help its gonna be awesome!!
i wanna edit css rules, and i keep getting that annoying message: -----> http://cl.ly/EbXi
i download the extension, installed like the instructions says..
i download and install the node
and when i have to run command lines in the terminal i think im messing things up..
BTW, im using OS X Lion. and Chrome 17.0.963.56
can anyone help me!?
This is frequently asked, but I don’t think I’m going to implement it any time soon since I believe undoing changes in Resources panel is a superior workflow.
Hi there, I'm wondering if there is way to upload saved css via ssh.
Something got broken in DevTools
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/KryTq_F8zWA
Hi.
I've followed the instructions exactly and I can't seem to get it working.
I have MacOS 10.7.3 (all updates installed)
Google Chrome: 17.0.963.79 (latest)
I've installed node.js from nodejs.org v.0.6.12
Experimental Extensions API is enabled from chrome://flags
Installed autosave server and activated it.
Terminal says:
Devtools Autosave 0.3.2 is running on http://127.0.0.1:9104
but when I go into the browser and load a file and do some changes to CSS it doesn't register the changes when I refresh.. any ideas why?
The url address bar is file:///Users/tareq/Documents/jQuery%20Lesson%204.html
Thanks
routes.js causes a lot of confusion: #7, #14, #15. As suggested in garbelini/chrome-devtools-autosave-server@04a44fd373e039415a694bc5fbf62d60b27cf9df, wouldn’t it be simpler to configure routes in the extension’s options? The idea is to move to
from
exports.routes = [
{
from: /^file:\/\/[^/]*\//,
to: '/'
}
]
into an input field near "Resource" and "Post to".
I used to don’t like sending a path to a file other the network due security reasons. It’s not a issue since most people use it locally or inside the closed network.
I was made it work fine in chrome,but few minutes ago,It doesn't work again.The Error msg is : Uncaught Script not found
Run autosave,The http://127.0.0.1:9104/ page display : X-URL header is missing
DevTools Autosave doesn't have any. Everyone can post to the server and override any file on the HD.
Hello,
I've got it working with a normal html & css file on Windows, but I need it for local IIS Websites in ASP.NET.
I Startet the Cmd with Admin Rights: autosave -f C:\Temp\route.js
My routes.css looks like:
exports.routes = [
{
from: /^http://localhost//,
to: 'C:/Temp/MvcJQueryTest/'
}
];
My Website runs on localhost on port 80 and the Directory where the Site can be found is "C:\Temo\MvcJQueryTest"
and I've no local firewall running.
In Chrome I've set the Options for DevTools To:
Resource: ^http://localhost/
Post to: http://127.0.0.1:9104/save
I try to set an other Color to the H1 Tag which is defined in the css file.
the Background.html Console don't shows anything also the cmd prompt shows nothing, when I am editing the Style.
I don't know what else I can try.
thx much SquadWuschel
Falling in love with this plugin and using it every day. THANKS!
Currently when trying to run two instances with different routes, I'm running into issues.
Error: listen EADDRINUSE
Is there a way we can assign different ports to listen on so we can map two directories to two different domains?
Or am I doing something wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.