Editing Javascript files on Chrome Developer Console not working - javascript

I followed this tutorial on how to get my Javascript changes to save, and my changes are indeed "saved", in that I can see the changes when I reload the website. Despite this, the saved changes are not actually run, and do not seem to even exist in the website's mind, since an error that had occurred on Line XYZ still does, despite the code on Line XYZ being shifted down.
I also saw something about the code not running if it was prettified. I cannot seem to unpretify it though, because the {} thing on the bottom left does not seem to change anything.

reolad the website will reload all js files, so your changes will be lost. If you insert a breakpoint in line 100, and change your code after this line, your change will be executed after you stash js file and resume executing.

Related

What would make HTML/JS/PHP source suddenly end/stop while loading?

I've been building a set of mostly HTML and JS functions using Jquery and ajax with PHP backend. For some reason, a page that didn't used to have problems suddenly doesn't load. When I check the document inspector, I find that the code just... stops. Before it ended on a line of HTML. Today, it's in the middle of some JS code (around line 1364).
I had a chunk of JS code commented out that I removed from the code and suddenly it worked... until I brought in some more code from another file and it suddenly stopped again.
What makes HTML code suddenly stop? It's driving me nuts! My code became very fragile.
Check these :
1.does JavaScript has syntax error? (check inspector console)
2.does your PHP has syntax or logic error?(Ex:In CentOS 7,type command#tail -f /var/log/httpd/error_log)
Trouble Shoot
Sometime js do not report error even the program stop.
So, you can add some console.log('test') in your code to find out which line cause js exec stop.
I had to remove most of my code and reinsert it one section at a time. I found a missing tag though I still don't understand why the code responded in such a weird way.

JS Script execution order on displaying from cache

I am writing a rail app making trees, with bootstrap and jsPlumb.
I have this problem, when displaying a page for the first time, everything works perfectly. When I go again on a page, some code is not properly executed.
This happens with both jsPlumb and bootstrap-tagsinput: a simple tagsinput on a page is not displaying properly.
If I hit refresh, then the page loads properly again.
I tend to think this is related to the fact that when I display a page with some cached elements, some of the script are not executed, or are executed in the wrong order, but I have no clue about it, since I can't see any error.
Hence the questions,:
How can I check that everything is properly executed (i used the console.log, the function are called)?
Is there anything to know about the way the cache may have an effect on script?
How can I debug this type of problem?
Thank you!
I found the answer, this was due to turbolinks, which handles some of the caching on the server-side. It was a holdover gem that I suppressed, and the problem is gone.

Debugging Javascript. Is it possible to stop at the next file?

I am working with angular.js, and when I have some very, very wierd bugs with angular, I get stuck stepping through debugger hell.
Is there a way to have the Javascript console break on the first line of the next file accessed?
For instance, say I stepped through into angular.js.
Instead of stepping through angular and trying to get to the first line referenced of a next file, say "myFile.js," I would just like to tell the Javascript console to stop once it reaches a line of code from a different file than it is on right now, say, stop once it hits "myFile.js", or stop when it hits a line on anything other than the file "angular.js."
I have not mentioned any specific browser, for the fact that I assume that you may be able to do this with one browser and not the other.
I also understand that I should know my code well enough to know what the next line in the next file referenced should be, but the project I am working with is quite dynamic and it takes a lot of brain-power to figure out which line of which file I will actually hit next (ugh...)

Google Developer Tools for javascript modification doesn't work for long 'js' file

I am trying to edit a website, whose UI lacks the property what I want. I can navigate over items using KeyUp or KeyDown (keyboard keys). However, when it scrolls the window, it performs unnecessary animation and I want to remove this feature.
I used Google Developer Tools to browse and edit the main javascript file, but it doesn't change the webpage's features even if I edit the code. I think it's because the script file is written in one line so that it can't be properly displayed in 'not pretty' (or normal) mode of Source tab, where I can edit the code. The reason that I am suspecting this is that the code shows until it's end in pretty mode, but in not pretty mode, the source code is cut somewhere before the end of the file.
Is there anyway to get over this problem? The website I want to modify is as follows:
https://www.gqueues.com/main
If you edit the javascript it wont execute unless it is called, so you are probably binding to keyboard events but the code never gets executed because it does when the js loads, and not when it is edited.
I would suggest adding the functionality you want using the console if you can't edit the file on the server.

Making Firebug break inside dynamically loaded javascript

I'm looking for a way to debug a dynamically loaded jQuery document.ready function.
Obviously I can't just bring up the script panel and add a breakpoint with the mouse since the function does not exist there.
I've also tried adding "debugger;" to the function (without the quotes), but that did not do anything. I have ensured that the function is actually executed while I tried this.
Thanks for your help,
Adrian
Edit: I just noticed that Firebug actually breaks on debug. However, when it does so on a dynamically loaded script, it does not bring up the source code of that script as usual. Plus, the call stack ends right below my own code. I can bring up the implementation for document.ready via the call stack, but that does not really help. Is this a Firebug bug or have I missed something?
I just worked on this similar question. The solution involves adding the word debugger twice; once at the top of the external file and one more time at the top of the function that needs to be debugged.
I noticed that if the debugger word was used only once, it did not work. Example:
//myExternal.js
debugger;
function myExternalFunction(){
debugger;
/* do something here */
}
You might try placing a break point where the event is called, and then instead of click "Play", choose "Step Into" (F11). I don't have a test case in front of me, but I think this may work.
I don't know if you ever got this figured out, but in case someone else needs it...
I got around this by moving the code I wanted to debug to an external file that was linked from the main page.
In my case, I had default.aspx loading services.aspx into a content div using jQuery AJAX. Services.aspx in turn, was loading jQuery UI tab elements using AJAX from a webservice that was providing it data. The webservice code was in a file called data.js which was linked from default.aspx. I needed to debug the code that was in the header of services.aspx (that loaded the tabs with data), but couldn't ever see it in any of the available inspectors. I just moved the code I needed to a new function in data.js and called it from the header in services.aspx.
I hope that makes sense to someone who needs it!
Just encountered same behavior (Firebug ignoring debugger; statement in dynamically loaded code) in Firefox 5.0/Firebug 1.7.3.
Worked around by detaching Firebug window ("Open Firebug in New Window").
There's also a 'debugger' keyword that's supported by the IE JScript debugger, and Safari's Web Inspector, so i would be surprised ifit wasn't supported in firebug.
Basically:
// mydynamicallyloadedfile.js
... // do stuff
debugger; // triggers debugger
... // more stuff
And i would expect firebug to break at the debugger keyword

Categories