I am using bootstrap modal, I dont know where I have put the js code that triggers the modal after clicking the button.
jQuery('#signin').modal('show');
I checked each file...even checked each JS file in source in browser.
How can I find which code is triggering the event in browser when I am clicking the button to open a modal?
Use a developer tool for a browser which will allow you to perform Javascript debugging. Your best bet is most likely Firebug. If you set a debug point at a line within a JS file, firebug will allow you to inspect the stack to see which line has called the function.
Instructions
In Firebug, click the script tab.
Select your .js file using the drop down.
When the JS file displays find the target line and click to the left of it, setting a debug point.
Load your page, the script should stop at your debug point.
Click the Stack tab on the right and inspect.
Searching for Script in Firebug
If you click the script tab you can enter a known piece of the script in the upper right hand corner of firebug, this should take you to its location in the code.
I agree with Kevin, another option is to print the stack trace using something like:
http://www.codeovertones.com/2011/08/how-to-print-stack-trace-anywhere-in.html
Related
everyone.
I need to parse web page, that is result of search request. I write Python script. So I need to fake search button click. So here's my question:
How can I find what script is run when the button is clicked?
The button code is (as I found in page inspection in Chrome):
<div class="submit button" data-ember-action="2">Search</div>
I feel that I should read more. I'll be grateful for ideas what direction to dig for.
The second is who to get script output. But, perhaps, the answer for the first question will be the answer for both
You can use Google Chrome's Developer Tools/Inspector to set a breakpoint that listens for any click. Once you set that breakpoint, you can click the button in Google Chrome and get more insight.
Here is a link that can show you how to get to the Google Chrome Developer Tools/Inspector (AKA DevTools).
Once you have the DevTools open, Click on the Sources tab near the top, then expand the Event Listener Breakpoints accordion. Next, you can expand the Mouse accordion and activate the click event listener breakpoint by checking the box next to it.
After that, you can go back to the web page and click the button to stop the application in its tracks. From there you can use the debugger to step through the code and see more information about the application.
You will need to run the JS for that, not just read the page code.
So use something like Spalsh: https://splash.readthedocs.io/en/stable/ for javascript rendering. Then you can inspect the JS events more like you did in Chrome.
For a real Chrome inspection experience use headless Chrome: https://developers.google.com/web/updates/2017/04/headless-chrome
I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition() is executed in order to determine which external JS file it is contained in.
I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.
Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?
You can search in all files using Chrome DevTools. Find your function and debug it:
Open DevTools (F12)
Go to sources tab
Open Search All Files by pressing ctrl + shift + f (Win) or cmd + option + f (Mac)
Search getCurrentPosition
Put a breakpoint (By clicking the line number at the left of the line)
Open Google Dev tools(F12)
Press Ctrl + p
In the opened box search for all files(JS, CSS, ...).
In the box you have 5 options:
At the first select a file for using options 2-5
Type 'filename' and select it.
Type ':linenumber' to go to specific line number(':10' go to line 10).
Type '#symbol' to go to specific symbol('#TestSymbol' go to TestSymbol symbol).
In this option, if you write #JSFunctionName or #CSSClassName then the cursor
will navigate to the JSFunctionName or the CSSClassName.
Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
Type '>googleCommand' to go to specific command('>Clear console' clear the console).
You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging
By simply putting it (copied from the webpage)
Open a site such as the Google Closure hovercard demo page or the TodoMVC
Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app
Open the DevTools window.
If it is not already selected, select Sources.
Debugging with breakpoints
A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.
Add and remove breakpoints
In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.
Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:
With the above simple example you can actually "stop" the function getCurrentPosition() and debug it.
One way would be to replace the Geolocation.getCurrentPosition method with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.
If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.
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 am trying to follow the guide here:
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints
But it doesn't seem to work, i.e.
I have done the following:
Open the Developer Tools by hitting the Control-Shift-I shortcut
Open Scripts panel and select "script.js" from scripts drop-down
Set breakpoint on line 19 by clicking the line gutter (you can use the Control-G shortcut to reveal a line in a large file)
Move your mouse over this page
You should stop on the breakpoint
Nothing happens when I hover over "this page", and it doesn't stop at the breakpoint when I hver over "this page"...
What is going on?
I need to good way to debug javascript/jquery code
If you hover over the second screenshot on the page, it work as expected.
If this doesn't work, please try another page, as I use the chrome debugging tools quite often and I have never had a problem with it.
I am using javascript for an ascx control in my application.
I am getting some errors and want to debug the same.
I have put the debugger in my javascript and unchecked disable script debugging for internet explorer.
When my script is getting executed, I get the debugger launched, and when I attach the javascript (here it is in a separate file ), There is a message as,
There is no source code available for the current location.
What could be going wrong here.
I hope to get some tips on debugging javascript with ascx control
To debug Javacript embedded in a ascx control, you can use chrome explorer.
Here is the step.
Open the page that has the user control in it.
Press F12 on that page.
go to Sources in the "DevTools"
Find pages in the "Sources" tab
click on the page name that you are debugging.
you will see the source code in the middle pane.
your user control javascript is included in the page's source code, this is the key.
use Ctrl + F to find that javascript by the method name you want to debug
add breakpoints to that method and debug
Hope it helps.
To debug JavaScript, Hit f12 in your browser. This will open the developer tools in most browsers. (with Firefox, this assumes you've already installed firebug, which has to be installed separately as an add-on.)
Select the script tab, set your break points by clicking the margin to the left of the line of code where you want to break. If you are using IE, click "start debugging". Then perform an action on your page that will trigger your code. Happy debugging.