How do I view all JS objects that I created in chrome? I know if I type window into the console, I will see everything, but where is the tab that is filled with all my things?
I think you might be looking for something like Chrome Breakpoints. Basically, in the developer tools, you will go to 'sources', click the file you are wanting to debug, and set a breakpoint on the line in the file that you want to see your active variables. You do this by simply clicking on the line number. When you reload, the browser will pause execution on this line and you will be able to see all the information you are looking for.
Related
Is it possible to view JavaScript function calls in the browser's JavaScript console? I know you can view XHR, but can you view function calls?
For example, I hover my mouse over some element on a page and a div pops up. I know there was a JavaScript function that was called to show the popup so it would be nice to be able to view this call in the console so I can see what function was called.
Am I missing something or is this not possible?
So basically you want to view JS calls in real-time?
The Firebug extension on Firefox offers that (http://getfirebug.com/javascript).
Basically, what you want to do is find your function within your code, then set a breakpoint on it. You should then be able to step through execution on it, just like a normal debugger. It shouldn't be hard to find the JS function associated with a and a particular event (e.g. mouseover) on that - is this page in question using straight JS or a framework? And if so, which one?
Google Chrome's built-in developer tools offer a smaller subset - depending on what you want, the Profile tab on it might be useful?
What exactly do you need to trace this JS function for? We might be able to recommend a better tool for you based on your particular need.
Check into the Firebug Profiler you can use it to see a break down of what's going on without having to manually add in console.log statements.
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
Understanding Firebug profiler output
Not unless you explicitly attach that information to the DOM.
You can, however, set breakpoints in the developers tools for some browsers, such as Safari, Chrome and Firebug for Firefox.
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.
I am tracing a bug in Javascript,
And want to know where is the original root cause,
But the function calls are too deep.
I use this way to find the first caller.
arguments.callee.caller....
How to print all the callers in a time ?
Thanks
Either:
A) Insert a debugger; statement on its own line in your JavaScript (at a point where you'd like execution to pause). Open Chrome Dev Tools and reload your page.
Or:
B) Open Chrome Dev Tools, select the Sources panel, open the relevant (JS) file, click on a line number to add a breakpoint, and reload your page.
And then:
Inspect values by hovering over them in the upper Sources panel (and clicking the resultant popup to drill down into them) or by clicking them the Scope Variables and Watch Expressions panels on the lower-right.
While debugging, you can also insert further breakpoints (the blue pentagons), step into/through/over function calls, and run code-checks in the console.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
https://developer.chrome.com/devtools/docs/javascript-debugging
https://www.codeschool.com/courses/discover-devtools
I am currently trying to debug a js script in chrome, I put a breakpoint in the script and it breaks properly when I use only one tab, but on a second tab it doesn't break even though I see the break point in the code.
Did you use the pretty print option when viewing the source:
I have noticed that the formatted copy can get out of sync. I remove all of the breakpoints, close both the formatted tab and the original tab (in sources), then open the original, click the pretty print option, and add back my break points.
I haven't looked in depth as to why this is happening, it's just what I've experienced and the work around I found (assuming it's something with the cached version of the formatted source).
you have to open a new debugger window for each tab that you want to debug :)
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.