Applying JavaScript changes using Inspect Element

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.

Answers


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.


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.


Need Your Help

iccp:Not recognizing known sRGB profile that has been edited

android xamarin cross-platform srgb

The following warning keeps arising in my Xamarin cross platform PCL project: