69

Within JSP files, I have some pretty complicated Javascript. On a production machine, we're seeing a very weird bug that we have not been able to understand. We have never been able to replicate it in a local or development environment. It might be related to the javascript, but I haven't found a good way to do this: use my browser to visit the page (on the production website) and then use browser tools to edit the javascript that runs on that page, including on reloads of the page.

I'm always able to do this to tweak CSS etc, but as these questions point out, it's not obvious how to tweak JS client-side:

However, those answers don't help me because:

  • "Execute JS" (Firefox addon) doesn't seem to work (doesn't do more than the console in Chrome already can do),
  • "Charles" might work if I'd used separated js files, but my javascript is embedded in JSP

It seems like How to modify javascript code on the fly in browser in debugging mode? is the closest thing to what I'm talking about, but that guy isn't able to talk about what he did because it was for his employer.

Thanks for your help! Ryan

Community
  • 1
  • 1
Ryan
  • 22,332
  • 31
  • 176
  • 357

6 Answers6

44

The problem with editing JavaScript like you can CSS and HTML is that there is no clean way to propagate the changes. JavaScript can modify the DOM, send Ajax requests, and dynamically modify existing objects and functions at runtime. So, once you have loaded a page with JavaScript, it might be completely different after the JavaScript has run. The browser would have to keep track of every modification your JavaScript code performs so that when you edit the JS, it rolls back the changes to a clean page.

But, you can modify JavaScript dynamically in a few other ways:

  • JavaScript injections in the URL bar: javascript: alert (1);
  • Via a JavaScript console (there's one built into Firefox, Chrome, and newer versions of IE)
  • If you want to modify the JavaScript files as they are served to your browser (i.e. grabbing them in transit and modifying them), then I can't offer much help. I would suggest using a debugging proxy like Fiddler

The first two options are great because you can modify any JavaScript variables and functions currently in scope. However, you won't be able to modify the code and run it with a "just-served" page, like you can with the third option.

Other than that, as far as I know, there is no edit-and-run JavaScript editor in the browser. Hope this helps,

Just Mohit
  • 141
  • 1
  • 13
Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
  • Could you elaborate on "Via a JavaScript console"? I'm using Internet Explorer 11 and I can *view* the Javascript in the console but I can't *edit* it. – Matt Feb 01 '16 at 21:05
  • 29
    @MarcosPérezGude If you application is relying on client side code for security it's written wrong. Even if browser doesn't provide the functionality to change the javascript that is running there is a million ways anyone can alter how their client interacts w/ the server. – csga5000 May 19 '17 at 21:05
  • No, but is often to write client-side applications with only api requests through ajax that returns json. You must write security layers on server, but if you can modify javascript `on air` it's more insecure than disabling the possibility, for sure. You can alter methods through console, but you need to override all aspects of it, and this method is hardest to skip security methods. – Marcos Pérez Gude May 20 '17 at 12:13
  • 3
    BTW Firefox support for this is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=737743. – rugk Jan 24 '18 at 20:58
  • @goat does firefox also have this feature? – Gellie Ann Aug 06 '19 at 10:22
35

I know that you can modify a javascript file when using Google Chrome.

  1. Open up Chrome Inspector, go to the "Scripts" tab.
  2. Press the drop-down menu and select the javascript file that you want to edit.
  3. Double click in the text field, type in what ever you want and delete whatever you want.
  4. Then all you have to do is press Ctrl + S to save the file.

Warning: If you refresh the page, all changes will go back to original file. I recommend to copy/paste the code somewhere else if you want to use it again.

Hope this helps!

Jacob
  • 3,835
  • 8
  • 25
  • 25
  • 4
    I sounds nice, but when i do that, the moment that script's code get into the flow a new script tab appears with name "[VM] originalname.js (123)" and it does not have the local modifications. – gcb Oct 30 '13 at 20:45
  • Anyone know of a workaround like this for IE? I'm on a gov't computer and can't install Firefox or Chrome. – C. Tewalt Mar 12 '15 at 20:16
  • I doubt the changes would go back to the original file. Do you mean it overwrites your changes by redownloading the original file? – jumxozizi Jun 22 '16 at 12:50
  • I did not find Script Tab but Sources Tab worked for me – Akashxolotl Nov 09 '22 at 08:04
14

I'd like to get back to Fiddler. After having played with that for a while, it is clearly the best way to edit any web requests on-the-fly. Being JavaScript, POST, GET, HTML, XML whatever and anything. It's free, but a little tricky to implement. Here's my HOW-TO:

To use Fiddler to manipulate JavaScript (on-the-fly) with Firefox, do the following:

1) Download and install Fiddler

2) Download and install the Fiddler extension: "3 Syntax-Highlighting add-ons"

3) Restart Firefox and enable the "FiddlerHook" extension

4) Open Firefox and enable the FiddlerHook toolbar button: View > Toolbars > Customize...

5) Click the Fiddler tool button and wait for fiddler to start.

6) Point your browser to Fiddler's test URLs:

Echo Service:  http://127.0.0.1:8888/
DNS Lookup:    http://www.localhost.fiddler:8888/

7) Add Fiddler Rules in order to intercept and edit JavaScript before reaching the browser/server. In Fiddler click: Rules > Customize Rules.... [CTRL-R] This will start the ScriptEditor.

8) Edit and Add the following rules:

a) To pause JavaScript to allow editing, add under the function "OnBeforeResponse":

if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
  oSession["x-breakresponse"]="reason is JScript"; 
}

b) To pause HTTP POSTs to allow editing when using the POST verb, edit "OnBeforeRequest":

if (oSession.HTTPMethodIs("POST")){
  oSession["x-breakrequest"]="breaking for POST";
}

c) To pause a request for an XML file to allow editing, edit "OnBeforeRequest":

if (oSession.url.toLowerCase().indexOf(".xml")>-1){
  oSession["x-breakrequest"]="reason_XML"; 
}

[9] TODO: Edit the above CustomRules.js to allow for disabling (a-c).

10) The browser loading will now stop on every JavaScript found and display a red pause mark for every script. In order to continue loading the page you need to click the green "Run to Completion" button for every script. (Which is why we'd like to implement [9].)

not2qubit
  • 14,531
  • 8
  • 95
  • 135
  • @cullub Fiddler runs just fine on Linux. Probably even on OS X. – Forivin Dec 15 '16 at 10:21
  • 1
    @Forivin Now it's available on Mac and Linux, however, that wasn't always the case. Currently, they have a Beta version on their site for Mac, and an Alpha version for Linux. The only non-development version available is currently for Windows. – Cullub Dec 15 '16 at 16:16
5

chrome local override may come handy to apply local version of JS CSS files over server downloaded. https://developer.chrome.com/blog/new-in-devtools-65/#overrides

Rajesh
  • 79
  • 1
  • 3
3

Firefox Developer Edition (59.0b6) has Scratchpad (Shift +F4) where you can run javascript

Mindau
  • 690
  • 6
  • 19
-1

I would still recommend Firebug. Not only it can debug JS within your JSP files, it can enhance debugging experience with addons like JS Deminifier (if your production JS is minified), FireQuery, FireRainbow and more.

There is also Firebug lite which is nothing but a bookmarklet. It lets you do limited things but still is useful.

Chrome as a developer console built-in that would let you modify javascript.

Using these tools, you should be able to inject your own JS too.

not2qubit
  • 14,531
  • 8
  • 95
  • 135
Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • 1
    Does it allow you to *edit* the JS? In my experience I've only been able to view/debug. – Cullub Feb 19 '16 at 21:26
  • 1
    TBH, I haven't used Firefox in years. Chrome is my go to browser now-a-days so I'm not sure if Firebug allows you to do that. – Mrchief Feb 19 '16 at 22:01