I have some React app here that has a malfunction that causes the page to open a new tab with itself. Recursive. and that is rather annoying as the number of tabs runs quickly into an out of memory situation. I want to debug the code to see the stack when the window.open call happens. I do not know where in the application the call happens and so wonder if there is a way to trigger Chrome to jump into script debug mode when something wants to open a window/tab?
So you can use the debugger of chrome, and then add some breakpoint to exactly decide when the code should stop, and then you use the control to jump to the next execution and decide when to go a step back and forth.
it's available for free, all you need to do is to inspect your React app and then visit the Sources tab, there you will see the code in javascript and you can start adding breakpoint and so.
You can also add mouse event listener , like click , dbclick...
You can also trigger and debug how a specific function si running.
Related
I'm seeing some strange behavior in Chrome that I'm trying to verify is intended (or possibly a bug?). Here are the steps I took:
First I opened the Chrome task manager, right-clicked and selected "JavaScript memory"
Next I navigated to a test page that has a link that opens a new popup window when clicked
The popup window loads a page that includes a lot of large third-party JavaScript libraries
I checked the Chrome task manager and the JavaScript ram had increased significantly for the test page after opening the popup
Finally, I closed the popup window and waited, but the memory usage basically stayed where it was at.
If I clicked the link on the test page multiple times to open multiple popup windows, closing them doesn't seem to lower the memory usage.
I tried this test in IE and Firefox, and when closing the popups in those browsers the memory usage goes down as expected.
First off, it's great that you identified an action that you think is causing the leak! This is the first step in tracking down your problem, since it gives you a specific scenario to test before / after.
Since you already confirmed with the Task Manager that the memory is not being released, the next step is to do a Timeline recording:
Open your application on the page where the leak occurs and start the DevTools
Go to the Timeline tab in the DevTools and click Start Recording; Also, press the "Garbage" icon right now, to make sure Garbage Collection is triggered before you do your recording
In the application, open the dialog and then close it; you can also do this multiple times
Back to the DevConsole, click the "Garbage" icon again and then stop the recording
What do you see? Do you see in the Memory lane that it is never going doing? Or is the memory at the end the same as when you started?
Make sure to check the official DevTools documentation for more info on using the Timeline and other tools to find common memory leaks.
I have a website with javascript and when I move my mouse on that website, there is function triggered. I need to debug whole javascript code step by step when it is executed. I need to find out which function is called (and parameters too).
How can I do this - what should I use for this?
Any real time debugger?
EDIT: Now I see it is script loaded from another url (my site is mydomain.tld, second script loads from seconddomain.tld). Second script is obfuscated/minimized and it control clicks on website (when clicked, it triggers one function).
Is it possible with javascript on my site to call function in that second script? If yes, how please.
Just put the command debugger anywhere and Chrome will stop there when it happens to pass that place by.
Don't forget to keep the debugger open by pressing F12
I need to find out which function is called
In console (Firebug, Developer tools, etc.) you can click Profile button or use commands:
console.profile();
//...
console.profileEnd();
And it will display what functions were called during the profiling.
Then you can use debugger; command inside the functions as everyone mentions.
If site uses jQuery then you can go to the function source with Chrome DevTools. Go to event listener sidebar in elements panel, expand interesting event and click the link to source.
E.g. input#new-todo has internal jQuery listener but DevTools has resolved it and show link to user defined function outside framework.
You can use Chrome for that. You can add breakpoint.
See the doc https://developer.chrome.com/devtools/docs/javascript-debugging
you can track mouse move event by
<script>
$(document).mousemove(function(event){console.log(event);});
</script>
and open console window in browser when mouse move it will display all things...
I've a HTML page which contains some hacked script which contains something like, e.g.
setTimeout(function () {
window.location = window.location;
}, 3000);
But assume this page used a lot of minified JS and span over multiple files, with Chrome/Firefox developer tool, how to spot the above section of code from multiple files? i.e. stop the execution and break on the currently running line?
"spot(ting) the above section of code" and "stop(ping) the execution and break on the currently running line" are completely different things.
spot(ting) the above section of code
To find code anywhere in the various source files, your can use Chrome's Dev Tools' global search feature:
Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)
Switch to the Sources pane
Press Ctrl+Shift+F (probably Cmd+Shift+F on a Mac)
Type what you want to find
stop(ping) the execution and break on the currently running line
Open Dev Tools (F12, Ctrl+Shift+I, or via the menu)
Switch to the Sources pane
Click the pause button (it looks like two vertical bars)
Dev Tools should break on the next bit of JavaScript that tries to run (according to this page on developer.chrome.com).
If the code is large and unknown to you, one option is to use the Profiler.
There's a "Profiles" tab in Chrome devtools and a "Performance" tab in Firefox devtools.
Each of these tools behave pretty much the same in that you start a recording, then wait (or perform any action on the page that you know leads to script running), then stop the recording.
The panel in the middle is going to display a call tree of all the scripts that ran during that period of time with columns that should, hopefully, tell you more about what took time.
Using that call tree, you can then drill down to discover what got executed exactly and then from there, jump to the actual line in the script.
Here's the chrome devtools profiler documentation page and here's the firefox devtools counterpart.
One other option you have, using the firefox devtools is the tracer. A tracer is a tool that record everything that occurred at the javascript level: what functions got called, what arguments where passed, what value got returned, what functions did those, in turn, called, ...
To check it out:
open about:config in firefox, then switch pref "devtools.debugger.tracer" to true.
Then open the devtools and switch to the debugger panel.
Then click on the double arrow icon, next to the pause/step over/step in/ step out buttons.
This will start the tracing and switch the side bar to the "traces" panel.
Click again to end the recording.
You should see the trace of what got executed. If you click on any entry in the trace, you'll see the associated script and in the sidebar, the arguments and return values.
I am porting a html5 game to win8. To save the game state, I call a function save_game (which uses localStorage to store some data) in window.unload, which of course does not work here. So I use WinJS.Application.oncheckpoint instead. Strangely, if I launch a game and press alt-f4, the game state is not saved. Debugging in VS with console.log in the event handler, I found that it seems to be triggered only when I resume the app. Bizarrely, if I put a break point in the code, the event handler will then be correctly executed during suspension.
Anyone has any idea why this happen? Is this a bug in win8?
Thanks in advance.
You are seeing known behavior when debugging your app with VS. When you close an app via user action (Alt-F4 / top swipe), the app is actually held open for a while by the debugger. If you set a breakpoint in oncheckpoint, debug app, press Alt-F4 and then WAIT for ~5 seconds or so, you will hit the breakpoint. The best way to simulate a user "close" event is to use the Suspend and Shutdown option from within VS that will immediately fire oncheckpoint.
When I click a button in my app a series of Javascript code is executed, in this particular case, I click on a "Cancel" button to close the currently open modal window. This close button looks like this on HTML:
<a class="cancel close">Cancel</a>
What I need is a way to track what is "triggered" by the action of clicking this <a> element in Javascript, without having to look into .js files for a reference to this DOM element (where the event was binded to the <a> element).
Is there a way of creating some sort of breakpoint in Javascript after a user generates an event but I don't know where that Javascript code is? In order to actually find where that code is.
I'm using Google Chrome/Developer Tools for debugging Javascript.
Open the developer console; switch to the scripts tab; click in the left-hand margin (on the line number) to set a breakpoint. The script's execution will pause at the breakpoint, and you can inspect the call stack, local variables, and so on.
Or, you can click "Pause", before you trigger an event, and script execution will pause (like setting a global breakpoint) as soon as a script is about to execute, and show you the code. Then you can resume, step over, step into, or step out of the current function/expression.
You can do that in Firebug and the built-in consoles in Safari, Chrome, Opera and IE.
Edit: I should add, that the pause-button is less useful if you have javascript-driven animations, ajax polling, or other code being called with an interval, since the pause button stops any script execution until you click resume. So it'll pause when, say, an animation's update function is called, probably way before you have a chance to trigger the code you're interested it.
However, in there's also "Break on exceptions" and "Break on uncaught exceptions" option in most (if not all) developer consoles. Like the pause button, it's like having a global breakpoint, except it only stops when there's trouble. So if the code you're trying to find is causing errors or throwing exceptions, you can set the debugger to pause the script when that happens.
Firebug is an option for FF.
http://getfirebug.com/doc/breakpoints/demo.html