directly spot what line of code is being executed in certain event - javascript

Is there any way to directly spot what line of code is being executed (javascript) when clicking a button in a webpage or scrolling down .. etc?
For example: Not onMouseClick function when clicking a button and doing debug via browser in the same time but some function like $('#xx').click() instead.
If so, How?
Thanks in advance.

I've always battled to find this feature in Chrome, I'm sure it's in there, somewhere but no one seems to be able to find it. In Firefox is quite easy: Inspecting an element will show if it has an event attached, and will even show the code. Clicking the arrow next to the file and line number will jump to that location inside the debugger.

Related

programatically putting text at Chrome console prompt

I defined a function that I run using Chrome console.
So I would type my_function() then hit enter to call my function.
Sometimes I need to call my function many times (the exact number is unknown), so I'll repeat up enter to repeatedly call my function.
I was wondering if I can let my function write my_function() at the prompt after it's execution, so that I'll just need to keep hitting enter to call my function however many times I want?
I don't know much about JavaScript, so my approach could be totally wrong.
I'd insert a button into the document instead, then click that button as needed:
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click me';
button.addEventListener('click', my_function);
If you want to be able to do this sort of thing automatically (have the button inserted on pageload without having to type the code into the console yourself every time), put it into a userscript.
First thing first I am ok with the first solution. But in case you really want to stay in the chrome devtool why not using snippets they are the perfect tool for what you what:
-Go to the snippet pane. Write a snippet of your function.
-Call it.
-Keep running it by clicking or use Control+Enter or Command+Enter.
Another solution can be stackoverflow site. Go to any question. your for example in the answer part click on javascript/html/css snippet and do your thing

What could be blocking my javascript click() function?

I am attempting to write a script to automate some tasks on a third party site. The very first step is simply clicking a div on the nav, but document.getElementById('myId').click() does nothing.
In my searching I found this answer that fully simulates a mouse click: Simulating a mousedown, click, mouseup sequence in Tampermonkey?
However, that also does not work. I did notice that there's a class added when hovering, and the script successfully simulates that. And obviously physically clicking works fine. I'm not sure what else I could be missing
Edit: It turns out that the clicking was just fine, but the site is actually checking pieces of the event such as the coordinates, which is why it appeared to not be functioning properly
If I understand correctly, what you want is this:
document.getElementById('myId').addEventListener('click', myFunction);
This will run the function myFunction() when the element with the ID of "#myId" is clicked.
Hope this helps!
P.S. If this doesn't work, I suggest using Shashank Bhatt's suggestion of checking pointer-events.

Selenium Javascript Executor Click() searches for element on page before actually clicking on the page

I am automating a website with Selenium, however click() is not working. It returns an element that can not be scrolled into view.
I used Javascript Executor to invoke click(), the code is written to find an element on the page clicked on after click(). However, Selenium attempts to find the element before it clicks on the website.
I checked the website while the script was running, and it attempts to find the element and then clicks on the page it's on. How do I fix this?
(code below)
I have tried waiting for the element to be clickable using WebDriver. However, it times out every time, so I am out of ideas. Any help is appreciated.
Find_Section = Driver.find_element_by_xpath('//div[contains(text()="Text"]')
Driver.execute_script("arguments[0].click();", Find_Section)
Tester = Driver.find_element_by_partial_link_text('Test19')
Tester.click()
Edit:
I believe i have figured out what the problem is according to WebDriver click() vs JavaScript click()
click() behaves like a actual user does and execute_script does not and just calls the event so what i believe is happening is the execute_script is clicking on the event but not doing the same as click() so it isn't loading the page correctly.
The reason why i am using execute_script is because the click() method is throwing can not scroll element into view each time.
I may be wrong about the reason why i think it is not working if so correct me
I finally figured it out since no one here would help me for anyone interested you need to insert a wait statement before the next element for example
try:
time.sleep(2) # Could be WebDriverWait
Find_Example = driver.find_element_by_partial_link_text('Example')
time.sleep(2) # Try to make bot less noticeable
Find_Example.click()
except InvalidElement: # Defined in the import section
# Syntax may be wrong i wrote this by hand in this little text window
print("\033[31m Could Not Find The Desired Element [STATUS] \033[31m")
exit()

How do I debug jQuery events using Firefox debugger?

I've been wracking my brain over this and cannot figure it out for the life of me.
Here's a test page I built for the sake of this discussion:
http://jsbin.com/garokalocu
Let's assume this page is very complex and I didn't build it, and I'm trying to see the code that runs when the user clicks "Do It." So I open the debugger, open the side pane and click "Events." I checkmark the click event for #execute which is the button.
Now I click the button, and the code hits the breakpoint. But strangely, the name "Bob" has already been filled in, so clearly it flew right past the actual code, and lands me here:
I don't understand what's going on here. So I tried something else, a new feature in Firefox that I thought might be handy. If I inspect the code, there are little "ev" tags on certain DOM elements. Supposedly you can click those and see the code.
Well, that was fruitless. I'd be forever grateful if someone could please tell me how on earth to debug jQuery events, and see the actual code that gets executed. Thanks!
You see jQuery as the handler because you used jQuery to make those listeners. jQuery code is called when event is triggered. If you used normal JS addEventListener, they will show up in the event without having to step through.
According to the article here the feature is coming in Firefox 34, so if you use Firefox beta it should have the behavior you want.

jQuery & Chrome - Finding Button Hooks

Using Chrome's developer tools I am trying to determine what jQuery function is hooking an input button on the page for debugging purposes. I usually just keep searching until I find it, but I figured I'd ask this time.
Is there a way to find a jQuery button hook for a specific button in Chrome? I've tried looking through the Event Listener Breakpoints, but can never seem to find the right thing to pause it.
Basically, I need to know what jQuery / Javascript is being executed after the button is clicked.
The hooks are implemented in the application like so:
$('.button_class').click(function (){
$('#button_id').click(function(){
etc...
try this :
$(yourbutton).data('events');
Depending on the number of events/timers on the page this doesn't always work. But you can try "pausing" before clicking the button you want to debug in the JavaScript debug window. That way the debugger will pause on the next line that executes. The thing that occasionally prevents you from using that is if there is a "hover" or mouse move/in/out event tied on an element you have to pass over to get to the button (including the button itself). In that case I just remove those events (if I can) until I get the one I want. The event listener breakpoints would be more ideal but they're sometimes difficult when using jQuery or another library, I've actually put in a feature request to the Chrome Dev Tools team to address this very issue. (allowing you to specify what files are "yours" and only "breaking" in those specific files)
good luck -ck

Categories