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.
Related
I know how to set breakpoints in chrome dev tools.
But is there a way to stop at the first JS line which gets executed after a button click without setting a break point?
That's how I would like it to be:
tell chrome to stop at first JS line which gets executed
do some action (for example press a button)
Chrome stops at the first JS line and shows me this line.
A very terse answer: In Chrome Inspector, switch to the Sources tab and hit F8.
If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome.
But unfortunately it will also switch to the Sources tab and display the line where the debugger statement happened. Most of the time, I want to type JavaScript commands, so I have to manually switch back to the Console tab.
Can I avoid the tab-switching and stay in the Console tab?
Or am I using it wrong?
Right-click on the source-tab and select 'move to bottom'.
Looks like Chrome added a preference for this in the intervening 9 years: https://stackoverflow.com/a/69216922/66673
Quoting that answer:
I had the same issue and it was driving me nuts! The way I managed it to stop switching was to go to into the DevTools settings -> Preferences.
Under Sources options, uncheck Focus Sources panel when triggering a breakpoint.
There's a reason for that - and is that whenever the code has stopped, because of a breakpoint or a debugger statement, you'd usually want to actually see where the execution has stopped. So, the developer tools switches to the Scripts/Sources tab, and this is a common behaviour among the major browsers, that may also show the local variables, the call stack and so on.
The best thing you can do is to keep the console frame always open, so you're ready to work. Just press Esc or click on the second icon on the lower left corner. That's what I usually do.
Switch to the Console tab when you expect to get a large response from the command you type.
When you are in the infinite loop or recursive calls, basically the browser stops responding to anything (either on Chrome or FF). You cannot see logs, cannot get into debugger, even you cannot open the console itself. The browser just simply freezes. This is so annoying. It seems I can do nothing but sitting here scratching my head... Anyone can shed light on how to solve this?
Another trick you could try is to have the Web developer tools in Chrome open and try to hit Pause when the Browser apparently hangs. Then it should break at the line where it's currently executing. With some stepping out you should get to the bottom of this.
Assuming you know (or suspect) the function where the infite loop happens you could add code like this:
var calls = 0;
function iSuspectToBeLoopingInfititely() {
calls += 1;
if (calls > 100) { debugger; }
}
This will stop the JavaScript debugger in Chrome once the method has been called 100 times.
Note: Chrome will only break for debugger; calls if you actually have the Developer Tools window open.
Found another way of debugging. In my case the error was caught and so no errors where logged to the console. Found the bug with the checkbox Pause on caught exceptions. You find the option in den dev tools unter the Sources tab. To show and enable the checkbox click on the last icon:
After enabling this, the debugger pauses on every caught exception.
I had issues in Chrome, I would see in the browser window 'Paused in debugger' but couldn't see where as maybe Chrome was confused since it was in a loop ... In Firefox, it recognized its taking too long and then a popup comes up after 30seconds to 1minute saying the file and general line # its frozen on which helps out to debug further and set Breakpoints around that area.
I solved this by placing Chrome breakpoints along all functions in the function file that I knew was causing the issue. I started with one debugger in the file so the execution would stop, which made it easier to add the chrome breakpoints.
Click the code numbers on the left side of the source file in Chrome Dev Tools "Sources" tab to add a blue debugger breakpoint. Place several of these and you can use the command buttons at the top right of the Sources tab dash to step through the functions. You can even add console.log items that will run on each time you step through.
Additionally, note that at any point in the paused execution, you can switch to the "Console" tab and type the name of any variable or function, and you'll get the current value of that variable or function.
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
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.