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.
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.
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
I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
Here's a screenshot of me doing it: http://d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI
The thing that you are looking for is called 'Profiling'.
It can be achieved by:
Go to Profiles
Choose first option ('Collect JavaScript CPU Profile')
Start it before pressing button 'Cut'
This may be helpful for some people:
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging
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 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.