Applying JavaScript changes using Inspect Element

Question

Is it possible to edit the JavaScript code of a webpage using Google Chrome's Inspect Element?

For example, if I open a simple webpage, open Inspect Element, and change things like text inside paragraphs and headings, the changes are immediately reflected on the webpage and stay as long as I don't reload the page.

Similarly, I tried to do some changes to the JavaScript code (Really simple code that does not connect to any server), but the changes did not take effect (What I did was edit the function a button activated so it did document.write() instead of displaying text in a blank paragraph element) I'm fairly sure this is possible to do, and I'm missing out on something.

I am fully aware I can just save the webpage and do whatever I want with it's code, but I'm just seeing if I can do it this way as well.

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-03 09:24:45Z

2

Of course, you can. Open "Sources" tab in your developer tools.

Then, find your file in the sources tree on the left side. Select a file, edit it and save it using Ctrl+S, Chrome will substitute the original file with yours.

You can also click {} icon in the bottom to prettify JS and make it easier to edit and debug.

Note that it works only with .js files. You cannot modify inline scripts using this approach.

answered Dec 3, 2015 at 9:24

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aswin G Over a year ago

Doing this gives me "Changes to file were not saved to file system".

Yeldar Kurmangaliyev Over a year ago

@AGZuniverse Yeah, you want to update the script, but not save it to your file system. Chrome just warns you that this file is not saved anywhere and if you update a page - you will lose your results. It doesn't mean that it hasn't substituted the script.

Marcel GJS Over a year ago

Editing inline javascripts hasn´t any effect on the page. It´s not saved and consenquently after reload hasn´t effect on the page.

Yeldar Kurmangaliyev Over a year ago

Editing scripts in Sources tab has an effect, but it lasts until you reload \ close a page. Editing inline javascript has no effect.

Darren Gourley · Accepted Answer · 2015-12-03 09:23:25Z

1

You can inject javascript methods via the console. That will have the same effect and will also allow you to copy / paste the new methods in fairly easily, instead of manually editing a JS file each time you refresh the page. As an example, open the console and paste the following in (on this page):

$('p').on('click', function(){alert("clicked paragraph")});

Now click on a paragraph and you will see the alert.

answered Dec 3, 2015 at 9:23

Darren Gourley

1,81812 silver badges11 bronze badges

1 Comment

HendraWD Over a year ago

Then how to remove that function without refreshing the page?

Collectives™ on Stack Overflow

Applying JavaScript changes using Inspect Element

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related