Debugging in Google Chrome - javascript

Is there a way to debug a specific function without knowing where it is?
For example you have a project that has 100 000 lines of code on a lot of files. To find some function that's triggered by some button you need to search a long time and then you put the break point. Is there some tools to do that when I click the button automatic to stop the debugger of Google Chrome?

On the right side of the Sources Tab look for Event Listener Breakpoints, expand the Mouse events, and select the click event, chrome will go into debugger mode every time there's a click event

You can check on the console tab what triggers your error, and what will be the files involved.
Here's an example on Chrome :
Chrome console example
On the left, you got the file involved (VM998 for example) and the corresponding line (3, for example).
Hope it helps.

Related

Chrome dev tools: How to see attached event listeners for an HTML element

I am switching from debugging JS in Firefox to Chrome.
One thing that I am missing is this:
In Firefox I can see in the HTML see "[event]" that there is a custom event handler attached.
I think this preview is very handy.
In chrome I need to explicitly search for the event handler.
Is there a way to enable this feature (see event-handler in the tree) in chrome, too?
The feature you are looking for is available in google chrome dev tools
I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,
If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.
Hope this is what you are looking for.
it's available in chrome you can find it in developers option press
(CTRL+SHIFT+I) or F12
and then you will find tab named "Event Listener" in right hand upper corner if developer options is in full screen mode or else you'll find it it lower right corner.
And if you are unable to find that just simply find the >> symbol and click on it and select Event Listeners.
Here is the image for event listeners tab.
I think you can use getEventListners($0) api of chrome which gives the event listners of the particular selected element.
getEventListners($0) where $0 - The selected element in the DOM.
The console drawer can be added to the Elements tab by clicking on Esc key it will toggle the console drawer.Then in the console you can write getEventListners($0) as shown in the image.
As this is my first answer and don't have that much reputation as of now,it is not allowing me to directly add the image to the answer so I am really sorry for that. Please have a look at the image:
Inspecting google from my chrome browser.

Track what JavaScript is called when a link is clicked [duplicate]

I'm trying to debug a 3rd party widget (+1 button to be exact). Specifically, I'd like to set a breakpoint in Chrome that stops when a button in the widget is clicked.
I would like to break on the 3rd party code that handles to click event. Is there a Chrome extension (or something else I haven't thought of) to help me find the right place in the code to break on?
You can make use of Chrome's Developer Tools; no extension is required.
I made a +1 button example here: http://jsfiddle.net/rPnAe/.
If you go to that fiddle and then open Developer Tools (F12), then go to Scripts and expand Event Listener Breakpoints and lastly expand 'Mouse' and tick the 'click' checkbox, then whenever you click somewhere (which includes an event listener), the debugger will now break at the line of code which contains the listener function.

How do I find out what functions are called when a button is pressed in Chrome Console?

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

How do I find out what javascript runs when I click an element? [duplicate]

This question already has answers here:
Using Chrome, how to find to which events are bound to an element
(8 answers)
Closed 8 years ago.
I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.
I would like to discover what javascript runs when I click on tools in the drawing toolbar.
I have looked at the html and there is no onclick event declared on the element.
I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.
There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?
I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.
I've used the Profiler in Chrome's debug tools for this purpose before.
Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.
Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.
Firebug probably has something similar.
To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.
Google Chrome has a global search that works great.
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.

Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point

I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......
Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.
Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});
One option for debugging tricky cases is to set an interval to poll the focus in the console.
setInterval(function() {console.log($(':focus')); }, 1000);
Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.
*MDN docs for setInerval()
You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)
On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.
There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.

Categories