How to set breakpoint in Firebug on alert()? - javascript

I have a very complex website and I know that somewhere is an alert() with a description. Is there a way to set a breakpoint on the alert() call? The HTML is generated, so I cannot just grep for the message.

You can use the console to replace the alert function:
window.alert = function() { debugger; };

Firebug's Script panel allows you to search for code throughout all your JavaScript sources.
So you can simply search for alert( or search for the message that the alert box shows and set a breakpoint on the line where it's called.
Another way is to use the Break On Next button ( ) to stop at the next JavaScript statement that gets executed. So, click the button and then do the action that causes the alert box to be displaced.
Note: This only works if there are no other event handlers called before the event showing the alert box.

Related

How can you find the source for an "onevent" handler in HTML, without the event listeners panel?

I'm looking at an element that has several event handlers added to it the old-fashioned way--
<input onblur="doSomething()" onkeyup="doSomethingElse()">
When I check the event listeners panel in the inspector, it is entirely empty.
Is there a way to find the code for these in the page's source besides manually ctrl+f'ing for the function names?
You could use the toString method in your console:
doSomething.toString()
Or you could find it via the debugger:
function findMyCode(element){
debugger
element.onblur.call(element);
}
findMyCode(document.getElementById('idOfYourInput'));
Then step into the function call.
This is fixed in Chrome 70. Here's a screenshot of Chrome DevTools showing the registered event handlers for the selected input element,
And to find the source code for those function, just copy-paste the function name in the console, and press enter - you'll get the source code for those function.
Or, you can do a quick search by pressing Ctrl+Shift+F, which will open up the search panel. Now, check the regular expression box and type "function\s*doSomething\s*\(" and press Enter. This will take you directly to the function definition.

Overriding native Javascript alert function to capture onbeforeunload alerts

My question is not about how to override the alert function and then decorate it as you want. My problem is that when you override the alert function like this:
window.alert = function(str){console.log('alert is called: '+ str);}
For a page with a registered handler for onbeforeunload event like this:
window.onbeforeunload= function(){return 'bye!';}
It is supposed to pop up an alert box with the string "bye" before leaving a page and you could catch it using your custom alert function. But the problem is that your custom alert function won't be called in this case. It looks like the browser is calling another alert function to put your string there. How can I override that alert function?
According to MSDN
Remarks When a string is assigned to the returnValue property of
window.event, a dialog box appears that gives users the option to stay
on the current document and retain the string that was assigned to it.
The default statement that appears in the dialog box, "Are you sure
you want to navigate away from this page? ... Press OK to continue, or
Cancel to stay on the current page.", cannot be removed or altered.
this is not an alert, it is a confirm box which browser provides and we can not alter that. please find the link https://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

Assign event to button from external library

Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");

JavaScript UIEvents being blocked by synchronous debug code

I was debugging some blur/click event handling and discovered that using breakpoints or alert popups to debug event handling can block other events from being handled. I've provided a jsfiddle with 2 input fields. One input field has a blur() event handler that alerts when called. If you click the input field to gain focus, and then click the button, the button will trigger an alert popup UNLESS the input field you chose has the blur() handler. The action of the blur handler seems to stop the click() handler from even happening.
I have discovered that the same thing occurs when using breakpoints. Using breakpoints in place of the alerts has the same effect. Breaking in the middle of the blur() will prevent the click() handler from even being called.
Is something going terribly wrong? What would be a good way to stop this from happening?
http://jsfiddle.net/stconrad/vtka7tt3/
$(".text").blur(function(e){
var x = 0;
});
$(".text2").blur(function(e){
alert("blurred")
});
$("button").click(function(){
alert("clicked");
});
Your issue is due to alert() method. When you are calling this method, only a single alert can be displayed at once. Then, here, two alerts are triggered in the same time (almost). Unfortunately, second one is simply ignored.
If you test with console.log(), you can see there are two outcomes in your debugger.
What you can do is to use a FIFO to handle your triggers. Simply append your call to the structure and pop first item. If there is a single call, it will be identical to your current process. Otherwise, first one will be triggered, then other one.
If you are using actions such as alert() which are blocking operations, use callbacks to trigger next operation: when alert is done, pop next item if there are some.

Why is this Javascript code executed twice?

When a link is clicked on my site the Javascript code below is executed, if the condition is true it will display an alert dialog. When the user selects the OK button in the alert dialog the block of code is executed again.
So the alert closes, the code below is executed for a second time and the alert dialog is displayed again. When the used selects the OK button on the alert dialog the second time the alert dialog is closed for good.
How can I prevent the code below being executed twice?
$("#my-button").click(function() {
var login = someVar;
if(!someVar || someVar == ''){
$('.close-reveal-modal').click();
alert(myMessage);
}
});
Check if you are adding the click handler twice, maybe that is what is causing that behavior.
In that case remove one of them.
From the very limited information that's provided, this is all that I can think of as going wrong:
$('.close-reveal-modal').click();
This piece of code should have some kind of function which is executed to display a similar Alert Box.
A complete code would be more useful for a complete answer!
Might not have anything to do with that code at all. Check to make sure that your javascript file isn't being called twice in the same app.
From what we have here, I'm guessing that your .close-reveal-modal element is in #my-button (or is the same html node).
When you trigger the click on it (by $('.close-reveal-modal').click();), it also trigger the click on its parent node, so on #my-button too.
I can be wrong, we need the HTML part (a fiddle would be great) to validate my theory.

Categories

Resources