I would like to know how I can use a debugger (Firebug or IE's F12 tools) to trace step by step the code I am receiving from a webpage once I POST.
My problem is that I fill out a form, and after POSTing the form, I get a response that has some redirects and other stuff apparently happening there. I would like to know how can I simply halt execution upon POST and go step by step on the javascript code that is happening, and see exactly how the redirects are formed.
The thing is I cannot place any breakpoints because I don't have the page's response before I even POST it...
I hope I was clear enough about my issue.
Thanks in advance.
You can add a debugger; statement as the first line of your JavaScript code, which launches a debugger if one is registered.
Therefore, all you need to do is ensure Firebug is launched before the page is loaded, and the JavaScript execution should be halted to allow you to step through the program.
Another (hacky) way you could do this is to place an alert() or similar as the first line; an alert() blocks the program flow until the prompt is closed. Without closing the alert, you could place a breakpoint on the next line of executable code after the alert(), then OK the alert, and then debug away.
Assuming you have IE9 installed:
Press F12.
Click on the network tab
Click "Start capturing"
Execute your script
You will see all the responses and redirecs there.
Related
I have some JavaScript that, I believe, is stuck in an infinite loop. I know I can just reload the page, but I have data in a form on the current page that I'd like to keep. The tab is completely unresponsive, so I can't just copy and paste everything and then reload. So is there any way to kill the javascript thread, but keep the DOM in Chrome?
You can open the developer console F12 and stop the script
Open chrome developer tools and go to the sources tab. On the right panel press "pause script execution".
looks like someone had the same problem
Cancel infinite loop execution in jsfiddle
Answer:
With the developer mode, go into resources and find your script and copy and paste it into a text document or a new window. If you can't find it in resources, do a search for a variable or line of code you used.
Is there a browser that will allow me to trace the execution of Javascript events? For example, for some random site online, if I click on something in one area of the page, it causes the text in some other area of the page to get updated with some new text. I would like to be able to trace what happens from the click all the way to the value being updated. When I say trace I mean that I would like the browser to tell me the name of the Javascript function that handles the click (and which file it is located in) and which Javascript function updates the value on the page.
The solution must work for any random website on the internet.
In chrome you can trace js codes in website with DEBUG mode.
Open Chrome.
Open a website.
Open Dev Tool with press F12.
On the menu click Sources. Now you can see all js files at there. And there is a debug panel. You can start, renew, break, trace a code line with these tools.
On js code panel you can put breakpoints on the line numbers.
Press F5 and refresh the page. Code will pause and you can trace js values.
For example, if there is a slideshow moving along, I can see the HTML changing live in Firebug's HTML tab.
The Console tab only shows things that are console.log()-ged to it, or if there is an error. I would like to see confirmation that each line of the Javascript is getting executed - as well as any output/values that are returned/generated as that happens. Like a little cursor on the left going down line by line as it executes - and stopping as soon as error is encountered?
Use breaking points and debugging in console. You can open your script in firebug and choose lines where you can add breakpoints. Then, you can run your script and see in panel on the right a lot of stuff.
I'm looking at a web page where when I push the submit button on a form, it brings up a new page where it runs some javascript and then closes the window.
Is there any way I can step through the javascript on the new page? I tried setting break on next in Firebug on the first page, but the next page still closes the window.
(I'm open to other tools besides Firebug if neccessary, I just need to step through the javascript)
Update:
I should have mentioned I don't have access to the code :-(
If you have access to the code, you can place this little statement where you want to have a breakpoint:
debugger;
I am not sure about firebug, but I expect it to work there too.
put debugger; in your JavaScript code. and press F12 key just after window open.
I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js
I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.
Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.
What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?
Cheers
Adam
If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).
I believe you can do the same thing with Firebug
It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.
A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use console command to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.
If there is a javascript error, then the easies way is using firebug or the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.
If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.