It sound like a simple debug question but I cannot find the solution.
On a web browser like chrome, in the dev panel, I would like to inspect an element (like a button) and then ask chrome to find the corresponding javascript events on the page / file (in order to place breakpoint or to look at the code).
How can I do that ? (without fireing the event and checking the timeline as proposed by #dev3078 in this post How do I monitor what Javascript is being triggered when I click an element in a webpage?). I'd like to have, as in IDE, a 'goto javascript events declaration' !
go to sources, on the right side you'll see a dropdown called Event Listener Breakpoints, expand Mouse Events and select click, when you click on your Dom button, dev tools will go into debugging mode inside the first function called after the click event, you can also choose more events other than click
Related
I am currently trying to scrape some data from the trading dashboard on Plus500. The information I am interested in is only visible (on the right-hand side) when the 'Information' button is clicked next to a particular security, as shown in the screenshot below:
I have so far written some basic JavaScript which clicks on the information button next to each security on the page and attempts to scrape the data in the info pane. However, when the 'Information' button is clicked it takes a few seconds for the new data to load:
As a consequence, my Javascript is scraping from the info panel before it has loaded and the information it is collecting is incorrect. This means that I am now trying to work out how to tell my Javascript to wait until the new data has loaded.
I suspected (perhaps incorrectly) that an Ajax request was being used to fetch this new information. However, looking at Fiddler, no such processes are being captured when I click the info buttons.
I also wondered whether the information was all already there on the page, but hidden until the info button was clicked. This would explain why I cannot see an Ajax request being made in Fiddler. However, a brief inspection of the HTML seemed to suggest that this was not the case.
To avoid the guess-work, how can I definitively find out what process(es) are being run when I click these 'information' buttons?
NB: If anyone thinks there is a better way to be scraping this data then please let me know!
Cheers.
Use breakpoints in the JS debugger of your browser:
Open the dev tools of your browser (usually F12)
Go to the tab "Debugger" (Firefox) or "Sources" (Chrome/WebKit)
Find the panel for breakpoints (rightmost panel or bottom left panel depending on your dev tools dimensions)
Navigate to Event Listener Breakpoints -> Mouse and there you can set a breakpoint for all click events
Now whenever you make a click that has a JS event listener, the JS debugger will halt in the JS code of the listener and you can debug it. Since most websites minify their JS code, you might have to fight through an unreadable mess, but at least it's a start.
You can also see all event listeners for a node in the DOM inspector:
Firefox: The DOM inspector shows a small bubble "event" next to each node with event listeners. Click on it to list all listeners bound to this node. Note that events might bubble up and be handled by a higher node, so there might be an event listener not shown at the node directly still handling events for the node.
Chrome: Select the node, then in the right panel go to the tab "Event Listeners" and select the event type you are interested in.
I have a page with so many elements I dont need but I cant remove them because I dont see them in the html templates so I assume javascript is creating them at some point.
I would like to use Firefox developer tools to detect which functions are doing that in order to stop the page from creating those elements. What should I do? I use Firefox 53.0.3
Thank you.
First of all, you should verify whether the HTML is really added via JavaScript or it's already part of the page source.
To do that, right-click the page and choose View Page Source from the context menu or press Ctrl+U. In the source view search for the element, e.g. via its ID or its contents.
If you find it, it is obviously added within the server-side script, so you need to check there where it's added. If you cannot find it, it's added via JavaScript.
If the element is added by a specific action you do on the page, you can use Firebug's feature called Break on Child Addition or Removal, which allows to stop the JavaScript execution at the line where the change happened. To do so, right-click the parent of the element and choose the above option from the context menu.
A second way to find out where the HTML is added is by setting an event breakpoint for the load event. To do that, switch to the Events side panel, right-click the load event handler and choose Set breakpoint from the context menu:
Then reload the page. The script execution will stop at the related line. Starting from there, you need to step through the code until you reach the line where the element is added.
Having said that, Firebug is officially discontinued in favor of the Firefox Developer Tools and Firebug's Script panel doesn't work anymore in current versions of Firefox. (Also the option to set the breakpoint is missing.) Unfortunately, the Firefox DevTools are currently (as of Firefox 54.0) still missing the feature to break on DOM changes. There is already a bug report for it, though.
Having said that, the second option to stop at the page load is also available there. To do so, switch to the Debugger panel. In there click the button to expand the side panels (), then switch to the Events side panel. There you need to check the load event listener:
Then follow the steps as described above, stepping through the code until you reach the line where the element is added.
I don't know if there is a way to recognize which JS script is performing the action which is in progress in a page?! For example, when we click on a button, it's doing something using javascript. But how to know which script and even which line of the script are involved in this event?!
for this kind of task i can suggest you to use google chrome, its developer tools offer a lot of functonality that most of us dont even use or know.
just open up your page, then hit F12 to open developer tools. find and click Sources tab, there you will see a tree mapping all the files in your site, then look at the right upper corner of the dev tools, there you will find handlers for your events, and under it a list of event you can look into and pause, next to the pause button its a really useful button "Step over next function call" this will take you through every event related to the JS execution. in this list you will find at the bottom a tab that say "Event Listener Breakpoints" just expand it and you will find every event javascript can check, just look for the events you need, ie. find Mouse, expand it and check click, so in every 'click' the execution stops and you can see whats going on. or just check the whole Mouse event list and it will pause at every mouse event.
I'm trying to understand the code of a chrome extension I did not write. This extension is active the entire time and working in background. Now I'd like to see which functions are being called on the different actions I do on websites.
I got so far that I have to use the Debugging Console which I open with Ctrl+Shift+I, but how exactly do I have to do this?
I would try using the "Event Listener Breakpoints". You can get to it under the sources tab on the right hand side. Just expand desired section.
For example, if you want to track a click event on a button, expand Event Listener Breakpoints -> Expand Mouse -> Select 'click'. Upon clicking the button in the tool, it should stop in the code where the action is handled.
It is worth noting that the code will probably be minified, so reading it might not be trivial.
I'm currently toying around with some autocomplete form fields, and am finding it very hard to inspect the generated drop down items. As soon as I click on the "inspect element" button or try to right click on the dropdowns, the original autocomplete input runs an onclick event (or something that triggers on a focus change) and hides, deletes or otherwise modifies the element I was trying to inspect.
Is there a way to work with the debugger so that the mouseclicks and other commands I give to it don't get intercepted by the script I'm trying to debug?
I currently have this kind of problem on both Firebug and on Chrome's inspector. The only solution I can think right now would be setting some smart breakpoints inside the appropriate event handlers but that is hard to do if I don't know what event handlers to look for or where they are hidden in the original code...
You could set a breakpoint and inspect after it is triggered, I have noticed that freezes the DOM.
You need to use breakpoints. As far as tracking down what's happening where, Chrome's "Call Stack" window can be very helpful.
Cheers
In Firebug you have a Break on next item in Script panel. Since Firebug 1.10, there's a keyboard shortcut for this: Ctrl+Alt+B on Windows (it works even if focus is in the page, not in Firebug).
You'll probably need to have Script panel focused in Firebug since this is a shared shortcut for Break on... which differs in each panel.
It generally freezes the DOM although it's not 100% reliable.
It's also not ideal because it will stop at any JavaScript execution, and will not be helpful if there is some aggressive polling in the background, or global capturing of keyboard events. Anyway it's still better than nothing.
Chrome pauses Javascript execution on F8; it took a bit of repetition but pressing F8 at the right time prevented JS from defocusing the element.
If you are having problem selecting the element, you can try cmd + shift + c on Mac to select the element without right clicking it.
If its DOM manipulation problem, you might try to force state on the input element by right clicking on the element in the Elements panel and set force state to focus.
Open the docked DevTools first (the undocked approach will not work due to the OS limitations.)
Once the autocomplete box is displayed, right-click it and select "Inspect Element" in the context menu. The focus will move to the DevTools but the autocomplete box will still be shown (this worked for me on Linux, tip-of-tree Chromium, M25. Your mileage may vary.)
/**
* Utility to freeze actual DOM state, for example dropdown menu
*/
function easyBreak() {
function doBreak() {
// put breakpoint here to freeze actual dom and write to console easyBreak()
// you have 3 seconds to get to desired state
var a = 0;
}
window.setTimeout(doBreak, 3000);
}
You could use DOM breakpoints.
I'm having a similar case here : I want to inspect dropdown items that only show when the input has focus.
On Chrome, I right-click on the parent element and choose Break on > Subtree modifications.
It will pause - like it does with JS breakpoints - anytime the DOM changes within that parent. You can then inspect the children while the DOM is frozen.