I have really complex page with a lot of javascript to fix. It involves a lot of functions and I need to find out one specific function, which triggers on dragging Raphael JS object. I can't figure out which one that is.
Is there some possibility to log whatever runs "right now" to console?
I know, that the output would be messy, but I would get a chance to see, what happens, whan I grab the object with my mouse.
If JavaScript is executing at that precise moment, pressing the Pause icon in the Sources tab of the Developer Tools will stop the script and show you the call stack.
If you want to debug what happens when particular event listeners happen (for instance on a drag-and-drop script), you may be able to do this by right clicking the page element, selecting Inspect Element, then in the right column of the Elements tab, scroll to the bottom and view the Event Listeners attached to that element. Clicking on a particular listener will show you the script source of that listener, and you may be able to add a breakpoint at that point. (Beware that compiled scripts can make this difficult to comprehend)
When investigating problems with a page, either my own or a third party page, one trick is to sprinkle breakpoints liberally on scripts I suspect that fire on button press etc. Then I manipulate the page with the Developer Tools open so that the breakpoints will cause debugging to halt when a breakpoint is hit.
Other tricks if it's your own code is to use console.log statements logging activity to the console, or debugger (which are like software breakpoints). And of course the old-school alert dialog box generating statements can still be useful too.
I might be wrong but you should manually use console.log() to write to browser console.
Have you tried :
console.log(yourObject)
Where yourObject is the draggable element ?
In the new chrome console, there is in depth object browsing, maybe you can find what you want in your object prototyppe.
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'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.
As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.
For example there is a button. It is wrapped by <div>.
When pressing to this button, there is Javascript function call happen, then another function, then calling by ajax to the server and if it's OK, Javascript redirecting this page to another page.
It's hard to debug.
Is it possible to "catch" this event? I.e. to know, what function is called after the click on the button? Button doesn't have attribute onclick i.e. event listener is connected in Javascript.
And if it's not possible then is it possible to make trace? That is to look at all functions calls, which is called after which?
It would be better in visual way, though in textual is also good:)
Yeah - this sort of thing is not as simple as you would like.
Google Chrome, Edge and Opera have an Event Listeners panel. Right-click your button, then select Inspect Element. Make sure the correct element is selected, then check the Event Listeners panel on the right.
In Firefox this feature is implemented differently:
The inspector shows the word “event” next to elements in the HTML
Pane, that have event listeners bound to them. Click the icon, then
you’ll see a popup listing all the event listeners bound to this
element.
You can also use the debugger keyword to set a breakpoint in the call stack somewhere. Then use your favorite javascript debugger (built-in dev tools in Safari, Google Chrome & IE8, firebug for Firefox). In each of these, there's a call stack that'll allow you to navigate through the current call stack.
You can use firebug to trace the javascript code. Its plugin of Firefox to trace the styles (css), js and also allows to edit.
Opera provides dragonfly which is similar to firebug
Besides the accepted answer (upvoted) which mentions the event listeners available on the developer tools, I want to emphasize a simple, yet potentially useful point. If the expected event does not appear on the list, as expected, an alternative to a debugger is good plain old console.log() to find out what's going on.
As a practical example, it helped me to literally see the cause of the issue, when I logged the relevant element.innerHTML at the right place. Particularly helpful after changes to the DOM.
Check out the debugging features in Firebug, it'll let you add JavaScript breakpoints and step through your code.