I'm trying to build a very basic, pure JavaScript app (no jQuery).
Using jQuery I feel like I'd be able to do this easily. But JavaScript not so much.
Here is my JSF app:
http://jsfiddle.net/abustamam/CLenJ/2/
So the purpose is for the question and its accompanying answers to be cycled through when the "Next" button is pressed.
Problem is, nothing happens when "next" is pressed. Even if I set the next() function to be something like
function next() {
alert("pressed!");
}
nothing happens.
At the suggestion of another question, I changed the "onLoad" into No wrap - in head.
At this point, the question and values are not initially loaded.
On looking at the console errors, it seems like the load order plays a big difference on whether or not the button works, or whether or not the first question will load, but I can't find a way to get them both work concurrently.
Can someone shed some light? Thanks!
In the fiddle, your script was under the load callback which means the next method is inside a closure so it is not available in the global scope.
If you look at the browser console you could see a script error saying Uncaught ReferenceError: next is not defined
In the left hand side panel in the second dropdown under Frameworks and Extensions select No Wrap - In Body
Demo: Fiddle
Related
I'll pick Chrome for this example, but I'm open to a solution from any browser.
Use Case:
I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow a user to enter a 0 and click update in order to remove the item. Trouble is, there is some listener in some js function that is denying the ability to enter a 0 and click update (after clicking update the old quantity remains).
My question is, what developer tool can I use to find which js function is running during that event? I don't think that Chrome's inspector does this, and I'm not very familiar with Firebug, but I couldn't find the functionality there either.
I feel that I should be able to inspect js firings just like I do css stylings. Is anyone aware of a tool I may use?
I've had to debug some particularly nasty unseen-cause Javascript issues at my job. Knowing the full depth of developer tools like Chrome's is definitely helpful. It undeniably takes some creativity to find places that might be causing the issue, but a few tips:
Tracking down event listeners
Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners. Here you can view what code files have hooked up an event. Often, this will just point you to a middle-framework from the really devious code you're looking for, but sometimes it will point you in the right direction.
Trapping a DOM modification
Many of the unwanted effects I see are because of something changing some value or attribute on the page that I don't want. Anytime this happens, you can right-click on the element (under the Elements view) and say "Break on..." and the specific scenario you're looking for. When Chrome then hits a breakpoint, you can then look downward in the Stack Trace until you find something recognizable that shouldn't be called.
EDIT after reaching ten votes!
Trapping a JS object modification
If the change you're interested in is code-internal, not in the UI, things get trickier. What's meant by this scenario is that you know somewhere in the code, something incredibly annoying like the following is happening.
company.data.myObject.parameter = undefined;
In this situation, you know myObject is still the same object, but it's being modified, perhaps unintentionally. For that, I often insert the following bit of code, sometimes just through the developer console at some point before said modification happens.
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
This includes an arrow function - you're only using this for debugging and Chrome supports it, so might as well save keystrokes. What this will do is freeze your debugger as soon as some line of code attempts to modify myObject's "parameter" property. You don't necessarily have to have a global reference to the variable if you can run this line of code from a previous breakpoint that will have the given object in the locals.
Otherwise, if all I'm starting out with is the HTML code, and I want to tie that to Javascript code, I'll often just look for identifying features like "id" elements, and search all JS files in my development directory for it. Normally, I can reach it pretty fast.
Open your page in Firefox with Firebug enabled.
Go to console tab in firebug and click profiling
enter 0 in the textbox and click the button.
Stop profiling.
You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.
Go to you code. If you are using jQuery there is going to be a function that will be called with the class or id of that particular update button. Or, if you are using Javascript, there is going to be a function called inside the
<input type="button" name="update" onclick="update()">
These are the two ways to look for the function that is being called; there is no software that I know
Download Firebug for Mozilla Firefox, open it, click on Net and refresh your website. Than, you can see which files are loaded on the page.
If you want to check on errors and what goes wrong with an explanation, than click on console and refresh the page once again. You will see the errors and on which line it goes wrong.
Note: in your console, you can say hold or stop, so that the js file stops loading. And you can edit the script by clicking on script in Firebug. Debugging is simple, as it says on their official page https://getfirebug.com/javascript
This issue has come up for me a few times:
I write some code that handles an event, for example a click. I click the element and nothing happens. Some other code is calling e.preventDefault() before my code has the chance to handle it.
Question:
Is there a way to find the code that is preventing default that i have overlooked?
I usually solve this by running javascript profiler in firebug and looking at every function that is called during the click (not inside jquery etc) that may be doing the evil. There has to be a better way.
I would put a test alert in the function that is supposed to execute, starting at the top and then moving it downwards after each statement. If the alert doesn't execute at the top of the function I would check your HTML element and how you are selecting it. If everything appears to be good, I would search your files using possible element selectors.
I have a weird one here. I am working on a JSF2 (Java) based system using Primefaces component library (not sure its relevancy), and I have a number of buttons that execute a JavaScript function called checkParams() on a onclick event. I need to edit this function to reivew its code and adapt it to some newly added components but I cannot for the life of me actually find the JavaScript function. I am working in NetBeans & I have performed a project search for this function and the only search results returned are the button references to this component. Similarly I have done a search for the function in Google Chrome's developer console, which again only returned the button references. I have also tried creating a quick dirty function that calls an alert(checkParams()); on the body load, but Chromes console tells me the function is undefined.
However the buttons work perfectly, checking various input boxes and submitting the information to the backing Java files...
Does anyone have any idea where this function may be hiding or how I can locate it?
It might be contained in a JavaScript Closure in a script file that is executed and then removed from the DOM. It would be a neat trick to 'hide' it a little bit. But, that is only if the checkParams() in the onclick is not in the onclick attribute. It would have to be assigned in JavaScript.
If this is the case, you would want to see what scripts are loaded initially, and look through those. Also, this is a lot of effort to hide a function for your own site unless you're trying to make sure people don't see how you are validating your parameters. There are ways to obfuscate it to assign the function without having it defined by name directly in the file, but, again, that is a lot of effort.
Outside of the above, I'm not sure there is a lot I can say for finding it. But I'm not sure that this is actually the case. One thing to note is that alert(checkParams()) will alert the return value, which means the function could be defined. Try running alert ( typeof ( checkParams ) ) instead. If that is undefined, than your function doesn't exist. If its not, you can also do console.log(checkParams) which should output the toString() of the function, which will often show you the code.
I'm examining someone else's code and I'm trying to find out what functions are executing when I take certain actions. Is there a way in firebug to do this? (or any other way).
In this particular case I'm trying to find out what happens when I click the 'next' and 'previous' buttons in the editor found at http://trirand.com/blog/jqgrid/jqgrid.html, "Live Data Manipulation >> Navigator" (then clicking the pencil, then the arrows at the bottom).
I've tried grabbing the item I'm clicking and looking at its properties in the console by doing this:
>>> obj = $('#nData')
>>> console.log(obj)
but there doesn't seem to be a handler for click.
What would be wonderful if if there's a way to see what functions are called when I perform an action.
FireQuery may be of some use to you. It hooks into Firebug and displays additional meta-data on all DOM elements which have been modified by JQuery.
You can use Firebug's "Break on next" (the pause looking button in the toolbar)
Then you can the step buttons to move around. Set it to use that, and then click whichever button you want to check the action for.
Since my description probably sucks, check this out.
Edit: This sounds like what you want:
It's primary goal is breaking the Javascript execution at required place in the code that is unknown to the developer beforehand. The typical example, probably well known to most web developers is: "Where in the hell is the code, which is executed if I click this button?".
In firebug, in the Script tab, put a breakpoint in the line you want to inspect. In the right, there is a "Stack" tab where you can see the current stack trace!
I am working on a site that has loads of legacy Javascript and jQuery includes and there is no documentation to show what is happening when.
I have a specific problem to fix and I cannot find the relevant code that is being executed when a button is clicked. To save me from trawling through (and making sense of) hundreds of lines of legacy script, is there a feature, possibly in Firebug, that will identify what script is being executed when I click on a button?
I believe there is a feature in Firebug's console window called Profile. Click profile, click the button, then click profile again. It should give you what all functions were called in that time. Be warned that if this code includes jQuery, you might get a huge long list of functions because jQuery uses tons in its code. Unfortunately, the profiler will also show anonymous functions, which can really be a pain.
Otherwise, do a search in the code for the button's class or ID and go through them. If you have an id of fancy then you might do a search for #fancy in your code and attempt to find it. That may lead you in a general direction, at least.
You can click Firebug's "Break on next" button (in the Script tab; it looks like a pause button), then push the button that you want to debug.
The next time any JavaScript code executes, Firebug will break into the debugger and show you that line of code.
The break button didn't work for me. Instead I did edit the onclick attribute with FireBug and prepended it with "debugger;" ... then you'll break right there once you click :)
None of the above answers worked for me. I am trying to use Firebug to figure out how a feature on a page is working for a site I have no control over. Here is what worked for me.
First, got the id of the element I am clicking on from the page source, and then get a temporary reference to it by creating a watch (under the script tab):
tmp=document.getElementById("idOfElement")
Next, I assigned the current onclick value to another temporary variable.
oldfunc=tmp.onclick
Next, I defined a new onclick function. Initially I tried putting debugger; as the first thing in the function, but this does not work! So instead, I created an alert:
tmp.onclick = function() { alert("Ok"); oldfunc() }
Now, as soon as I click on the button the alert comes up, at which point I then click the "Break on next" button as outlined in another answer to this question. Then I dismiss the alert and immediately I am in the debugger at the correct place.
In my case, the "Break on next" button did not work by itself, because there are a lot of other events, just mousing over the page was causing the breakpoint to be hit, preventing me from ever clicking the button.
In Firebug you can set a breakpoint in some JS and then you get a stack which will let you know the current function call stack. So if you set the breakpoint in function used by several handlers then you can use this to discover exactly which handler you are in.
This probably won't work if you are dealing with AJAX callbacks and the like though.