7

I know you can use Firebug in the DOM view to edit JavaScript variables BUT... is there a way I can use (anything else) to edit live JavaScript that is embedded in a HTML page?

Like this kind that is in a .html page:

<script type="text/javascript>
// code here
</script>

Thanks.

test
  • 17,706
  • 64
  • 171
  • 244
  • 1
    You could use Opera. Opera allows editing of inline JS and JS files. After you soft reload the page, your changes will be applied. Right click > Source > Make changes > Apply Changes. – XP1 Jun 25 '12 at 15:49

10 Answers10

3

bookmarklets

From the Wikipedia entry

A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. The term is a portmanteau of the terms bookmark and applet. Whether bookmarklet utilities are stored as bookmarks or hyperlinks, they are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction. Usually the applet is a JavaScript program.

And as a related note not trying to spam or anything I created a bookmarklet generator to help me create bookmarklets easier.

Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Alright, i just re-read the question, maybe bookmarklets aren't what you're after, you could try http://jsfiddle.net/, but I'm not sure that that does *exactly* what you want either. – zzzzBov Jan 21 '11 at 22:20
  • I meant going to a different web page and edited THEIR javascript blocks. – test Jan 21 '11 at 22:26
  • Google Chrome, and Opera also have a decent DOM editor. Firebug is my tool of choice to live-edit other pages. *yes i know you asked for other options* – zzzzBov Jan 21 '11 at 22:29
2

You could use Opera 12. Opera 12 allows editing of inline JS and JS files. After you soft reload the page, your changes will be applied. Right click > Source > Make changes > Apply Changes.

XP1
  • 6,910
  • 8
  • 54
  • 61
1

Firebug has a console (the first tab of the firebug window) where you can write JS code and execute it in the current page. Suppose the webpage has a function called myFunc defined and you want to override it: executing the following in the console will do the trick.

myFunc = function(/* function arguments here */) {
  /* new function body here */
}; /* notice the ; */

and to see the the current version of a function you can execute

uneval(myFunc);

this will print out the current myFunc

note: I think that by default the console comes with a single-line input box, but somewhere in the options you can switch to a multi-line input box. When in multi-line, goes to a new line, + executes the code.

CAFxX
  • 28,060
  • 6
  • 41
  • 66
0

Eloquent javascript has a console type window in the bottom (click the small arrow on the bottom right side). This might be what you're looking for. The exact term for what you means is an REPL, a Read-Evaluate-Print loop.

Exelian
  • 5,749
  • 1
  • 30
  • 49
0

Well, you won't be able to edit JavaScript code that has been loaded into your browser, except with the help of that same browser. That basically means through a plug-in and I'm not aware of any plug-ins other than FireBug that will let you do that.

Is there a specific reason you can't/won't use FireBug?

Lasse
  • 686
  • 4
  • 9
  • This isn't necessarily true. One could use a standard input element (eg. a textarea) to input code. Then use the javascript `eval()` function to run it, effectively providing a console. – Exelian Jan 21 '11 at 22:25
0

Firebug itself has a non-plugin-dependent "lite" version. If you examine the source code of that, you can find out how to implement a large subset of the Firebug functionality.

http://getfirebug.com/firebuglite

Jason LeBrun
  • 13,037
  • 3
  • 46
  • 42
0

Chrome also has a console window that can be activated once you inspect the element (or page). From there you can write simple javascript. It even has a pretty decent debugger.

Ryan Castillo
  • 1,135
  • 10
  • 22
0

If you go to Tools/Developer Tools on Chrome, you will find a space where you can change all the code from html, to javascript and CSS, live on your browser. Obviously it does not generate a real change on the page, just in the way you see it, since it just can be edited for the administrator of the website

pfernandom
  • 929
  • 10
  • 22
  • If you want real changes to be applied, you could use Opera. Opera allows editing of inline JS and JS files. After you soft reload the page, your changes will be applied. Right click > Source > Make changes > Apply Changes. – XP1 Jun 25 '12 at 17:39
  • @XP1 which version of opera, opera 12 not showing inline js in source. – Praveen Yadav Jun 04 '18 at 11:48
  • @PraveenYadav, Opera Presto (version <= 12) has had a built-in source editor for a long time. [See video here](https://imgur.com/NaNdRV9). Of course, Presto is very old now. For Opera Blink, you should try the new feature in DevTools called "[Local Overrides](https://developers.google.com/web/updates/2018/01/devtools#overrides)". See the answer here: [https://stackoverflow.com/questions/16494237/chrome-dev-tools-modify-javascript-and-reload/48843321#48843321](https://stackoverflow.com/questions/16494237/chrome-dev-tools-modify-javascript-and-reload/48843321#48843321) – XP1 Jun 04 '18 at 21:33
0

You able to edit inline script tags with Firebug's HTML view. Just select script tag, and then press "Edit" button. After editing, press "Edit" button again to apply changes.

Pixus.ru
  • 106
  • 3
0

Firefox' Greasemonkey plugin wasn't mentioned yet. That way you can store, re-use and share youre scripts. I'm not 100% sure you can run your code in the exact same scope as the page's code OOTB. Inserting arbitrary script tags is still possible, though.

line-o
  • 1,885
  • 3
  • 16
  • 33