Pause after each line in javascript - javascript

I would like to have a program pause after each line is executed in javascript. This is for a teaching tool where the user will type in there js and be able to step though it line by line. I want to then be able to step through each line and pause after it is executed. Something line popping up an alert() between each line, but without the dialogue.
Is this possible?
I am looking to keep it in the browser and not use DevTools or Firebug.

Yes, you run your code through FireBug (which is a FireFox extension).
Get firefox here
Get firebug here

Related

Get browser console to show filename + line number in javascript file

a tricky question to word. I'm new to React and have been debugging my code using console logs in Firefox.
However, at times the Firefox console window stops showing the filename and line number of the console log and displays a different format. I can click on it to inspect it in Firefox's debugger but I'd prefer to change it to the standard filename:line number view. Anyone know how to do this?
I'd prefer to keep it like this:
And not like this:
Still unsure as to why this happens - but the quick solution is to restart npm via command line. Browser's command line then resumes the form of the first image above.
npm start

Chrome dev tools: Stop at first JS line after button click

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.

How to deliberately freeze javascript in chrome (plugin/console)

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.

Prevent chrome console from processing javascript until I'm finished writing it

Is there a way I can set up javascripting in Chrome's console so that it does not process my statement as soon as I hit return. If I'm trying to test something out by just writing some javascript there, it processes before I'm done writing.
//here I am writing in the console
if ($(el).size() === 0){
//now I hit return because I want to type some stuff if this evaluates to true
//but return submits it as a finished piece of javascript and of course
//I get SyntaxError: Unexpected end of input before I can have a chance
//to finish the logic
I know I can hit shift+return and get a line break, and though that's a small inconvenience, it's still a bit of an inconvenience. Is there anyway I can tell it to hold off processing until I hit a macro like shift+return?
It's the same way in Firebug. Maybe there's an option there. Or maybe someone knows of a good third party add-on. Thanks.
In the comments I posted the ticket for the request for support, but it has been there for awhile. Chrome does have snipplets, but you have to enable them.
In the address bar type about:flags
Enable Developer Tools experiments
Restart the browser
Open the Developer Tools open the settings menu [gear on bottom right corner]
Click the Experiments tab [on left], check Snippets support
Restart the browser
In the Scripts panel, there will be a Snippets tab, click on it.
Right click on the area below and from context menu select New
You can than Edit and Run the code like a file. Run it with the context menu or play button.
A multi-line console effectively lets you do what you want. Chrome has a request for this but is otherwise not really available.
Firebug Lite for Chrome does allow it. Just click the little red button at the bottom-right of the Javascript console.

How to debug javascript when it goes into infinite loops and recursive calls in Javascript?

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.

Categories

Resources