Can HTML edits also be saved?

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....

Hey, English native speakers, would you mind checking README.mdown?

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.

If not is it still configured to auto update?

-prefix-free

Any chance of supporting this?

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://[^/]*//

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

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.

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.

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).

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:

• Installed the plugin after enabling experimental api's in Chrome.
• Installed the Node.js server
• Typed "autosave" in the command line and get "DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104".

The file I am trying to change is located at file://localhost/User/username/projects/etc...

Not working on css present on html files.
Insure if it's either related with issues #11 or #40?

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.

Diffs are lean. Diffs allow several people to edit one file at the same time.

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

Я нашел такой способ

• Нужно дать расширению разрешение на использование "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 можно заодно проверить по маске УРЛ текущей страницы, на которой мы находимся

Asset Pipeline

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?

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.

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?

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!

https://bugs.webkit.org/show_bug.cgi?id=81414 :(

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

DevTools Autosave doesn't have any. Everyone can post to the server and override any file on the HD.

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.

Привет! Я на GDD задавал вопрос про авто-сохранение CSS при изменении через chrome devtools. :)
Попробовал эктеншн, все работает, сейчас добавляю поддержку в свою CMSку.

Хотел поделиться несколькими соображениями, хотя большинство ты и так наверняка хотел сделать рано или поздно.

• Посылать не файл целиком, а только diff. Судя по форкам, это уже в работе. Только это стоит сделать опциональной возможностью
• Указывать в конфиге через запятую хосты, на которых эктеншн будет работать. Хотя это можно уже сейчас в регулярном выражении из "Resources" в конфиге указать, но можно сделать более "юзерфрендли"
• Дать возможность слать запрос на текущий хост, я сделал для этого плейсхолдер "{host}" в "Post to", при запросе соотвественно меняю его на нужный мне хост. Или еще проще - если "Post to" начинается со слеша, подставляем текущий хост и протокол
• Имеет смысл добавить обратную связь с сервером - проверять успешно ли изменен файл, достаточно ли прав на изменение файла

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

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

Something got broken in DevTools
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/KryTq_F8zWA

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.

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?

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:

1. installed node.js
2. in cmd, i navigated to the install directory, and ran "npm install -g autosave". i get the following reply/message "npm http GET https://registry.npmjs.org/autosave".
3. I then open up a new cmd, and try run auto save, but i just get an error "not recognized".

I've also tried to navigate to the install directory and run "npm autosave"

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.

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

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

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

-prefix-free

Any chance of supporting this?

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.

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.

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!!

Hi there, I'm wondering if there is way to upload saved css via ssh.

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.

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!?

...to the latest stylesheet included via <link rel=stylesheet>

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.

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.

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.

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