Live Editing Remote JavaScript in Chrome Inspector

Question

I'm trying to debug remote javaScript using Google Chrome inspector. I recall in the past being able to:

1) Edit remote javascript using Chrome Inspector

2) 'Save' the change using (cmd + s)

3) Test the effect the the altered javaScript on the page

Now when I try to 'save' the change I get a yellow warning icon in the 'tab' that says

"Changes to this file were not saved to the file system"

Can anyone help me with this, please bear in mind that I'm working with remote code (not trying to alter local files) and I do have the developer tools extension installed.

Populace

you found any solution for this? – Bac

@Bac - See my answer that you can still add code and make the browser run it without saving it to disk. – Braces

Answer 1

The changes were not saved to disk because you obviously can't access the remote js file, but they will take effect when javascript will reach to these lines of code.

You can add a breakpoint before the place you want to dynamically add your code, reload the page, add the code you want, click ctrl-s. Ignore the warning you mention about the file system and enjoy.

So you can follow these steps and just ignore the warning.

Braces

Answer 2

For anyone who stumbles across this, as I did...

For Local Files

You may need to run chrome as Administrator. Or in my case (Ubuntu) as root user.

sudo google-chrome --no-sandbox

Then you can save the files within devtools.

Knecht

Answer 3

I manage to use chrome dev tools to live edit remote files by using FUSE and sshfs.
SSHFS allows you to mount a remote filesystem using SFTP, so you have your remote files accessible from your local machine and chrome is able to edit your local files and SSHFS auto detect changes and push your files to your remote server.
Here is an exemple of using SSHFS on mac :

mkdir /Users/username/Sites/localhost/yourLocalfolder
sshfs [email protected]:public_html/wp-content/themes/yourRemoteFolder /Users/username/Sites/localhost/yourLocalfolder

To stop SSHFS, you only need to do :

umount /Users/username/Sites/localhost/yourLocalFolder

The only thing you need to do is saving your file from chrome dev tool and SSHFS will automaticaly push your file to the remote server!

Ozzie

Answer 4

UPDATE: Per the link below, the docs have moved here.

You have to have Workspaces set up in order to do this. Read the docs on how to use Workspaces: https://developer.chrome.com/devtools/docs/workspaces

Purl

Part of the articles: Workspaces is known to not work with these frameworks: Create React App – Press