Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?

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:

  • Best way to capture JavaScript errors in production?
  • How do you edit Javascript in the browser?
  • How to edit JavaScript in Firebug?
  • How can I edit a js file sent by the server before it gets to my browser?
  • How to replace Javascript of production website with local Javascript?
  • with firefox w/firebug, how can I write javascript in the browser and use the .js file objects also?

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

like image 524
Ryan Avatar asked Jul 11 '11 22:07

Ryan


People also ask

How do I edit JavaScript in my browser?

Editing JavaScript code in real-time is possible in Chrome and Chromium based browsers. 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.

Can you change JavaScript to HTML?

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.

How do I edit a script in HTML?

By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you're done editing.

Can I edit JavaScript in Firefox?

Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.


2 Answers

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,

like image 105
Chris Laplante Avatar answered Oct 09 '22 02:10

Chris Laplante


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!

like image 39
Jacob Avatar answered Oct 09 '22 02:10

Jacob