Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Live Editing Remote JavaScript in Chrome Inspector

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.

like image 347
Ben Pearce Avatar asked Sep 26 '14 21:09

Ben Pearce


People also ask

How do you edit JavaScript code in your browser and see changes in real time?

After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file. After making modifications press Ctrl+S to save the changes.

How do I inspect JavaScript in Chrome?

You can launch it by hitting F12 while in your browser or by right clicking on a web page and selecting the Inspect menu item. The images below show a few different views that you'll see in the Chrome DevTools browser.

Can I edit JavaScript in Chrome DevTools?

View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools. Learn how to use Chrome DevTools to find and fix JavaScript bugs.


2 Answers

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.

like image 94
BornToCode Avatar answered Sep 22 '22 22:09

BornToCode


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.

like image 35
Ben Winding Avatar answered Sep 21 '22 22:09

Ben Winding