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

Question

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

User · Answer

Firefox Developer Edition  59 0b6  has Scratchpad  Shift  F4  where you can run javascript

User · Answer

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 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  http   www fiddler2 com fiddler2    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

User · Answer

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  gt  Toolbars  gt  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  gt  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   gt -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

User · Answer

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

User · Answer

I know that you can modify a javascript file when using Google Chrome     Open up Chrome Inspector  go to the  Scripts  tab  Press the drop-down menu and select the javascript file that you want to edit  Double click in the text field  type in what ever you want and delete whatever you want  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

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

Examples related to javascript

Examples related to browser

Examples related to firebug