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.
Related
I am building a web based JS REPL (similar to http://jsfiddle.net/), but I find it really annoying to have to switch between the Chrome Developer Console and my own code to debug. I have a text area on the left (using the wonderful Ace Editor) and clicking a preview button loads another window into an iframe on the right with the code I was editing. It made me wonder, what if I was able to add breakpoints to my code editor in the browser window and when it hits the breakpoint I could see the state of variables, step through the code, and remove breakpoints all while still editing the code in the editor. Very similar to real debugging, but in the browser instead of an editor like Eclipse.
I think a Chrome Extension is the right way to go. I can make calls to the debugger using the debugger API, then add breakpoints, step over, step out, etc. using this protocol. This works great and I can even get the current state of variables when the breakpoint is hit using Runtime.getProperties.
The problem is... that once I pause the code to debug, everything on the entire page freezes (of course, because I'm debugging). Can anyone think of a way to get around this? The ideal solution would allow me to freeze and debug the result on the right in the iframe and still manipulate the code on the left.
I want to inspect elements of my page in development that disappear right after he mouse leaves them. Fot this and other scenarios I want something like a "disable JS" plugin or console-command, that works not only at pageload time, but can completely halt any and every js of the current page at any time.
Does such a solution exist? I would prefer chrome, but accept firefox. Thanks.
What worked for me to pause execution:
Open Chrome javascript console (Ctrl+Shift+J)
Go to "sources"
On the right side, click the little "pause" icon, or press F8 to
pause script execution.
You can also put in "breakpoints" within the same console. Try the following to use breakpoints:
Open Chrome javascript console (Ctrl+Shift+J)
Go to "sources"
On the right side, click the little "pause" icon, or press F8 to
pause script execution.
Now you can click the "Step over", "Step Into", etc functions on the right side to slowly step into the code, line by line.
You can also click on the line number for any of the sources to add a breakpoint. Breakpoints will stop the code execution when it is reached. You can enable/disable breakpoints on the right side next to the other buttons mentioned above.
Try using the debugger; directive (relevant MDN article). This acts like a breakpoint and should help you debug your scripts using the normal developer console.
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
Is there anyway that I could trace/see the exact order that a website is processed across html, css and javascript?
I have a function that is not firing off on the first pass and I'm pretty sure it has to do with the order of execution.
but also, it would be very informative to see the individual steps as they are processed (slowly)
Thanks for any advice.
this is in relation to this question:
flashMovie.Play is not a function
It sounds as if you want to set up breakpoints in your code, and then step through the execution path.
Click on the Wrench symbol on the top right of the Chrome screen, select Tools, and select Developer Tools
Click on the Scripts tab on the bottom pane of the Chrome Screen
Click on Folders on the top left corner of the bottom pane of the Chrome Screen
Click on the script that you want to debug
Click on the line that want to setup the breakpoint
The Chrome Developer Tools official documentation is also available here: https://developers.google.com/chrome-developer-tools/docs/scripts
Once you have hit the desired breakpoint (which could just be the first line of the script), the click on the "Step into next function call" (it looks like a down arrow pointing to a dot) button on the top right section of the bottom pane of the Chrome screen.
These questions should help as well:
How to step through code in Google chrome javascript debugger
How to set breakpoints in inline Javascript in Google Chrome?
Javascript breakpoints not working in Chrome Developer Tools
Set a breakpoint in XHR in Chrome
In Chrome, use the Developer Tool Bar. Press the Keyboard Key: F12.
Place an alert(1); or console.log(2) in your JS and see what happens. If you use Firefox start with opening its web console and look if you get any errors there. Ctrl+Shift-K to open the Web Console.
Press F12 OR Ctrl+Shift-K for developer tools, it works almost in any browser. you will be debug your code and use consol
suppose i am seeing the site http://www.webspiders.com/ and i want set break point and debug the whole page. whenever i click or mouse over any element and for this action if any javascript is fired then i need to see and debug that javascript too. please help me with detail instruction for debugging with firebug. thanks.
You can enable the "Break On Next" button near the top left of the "Script" tab of Firebug. Once enabled, Firebug will break as soon as JavaScript is executed.
You will need to know where to place your breakpoints or must place a breakpoint ta all reachable members of every js file. A help would be the framework that the site use, if the is any.
Here's a tutorial on setting breakpoints in Firebug.
On the firebug script tab:
1. click on the number where you want to break the script
2. refresh