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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With