javascript interactive debugging (equivalent of python's pdb.set_trace()) - javascript

I'm working with some javascript code and I'd love to be able to get an interactive console running in the context of a function call - that is, basically exactly what python's import pdb; pdb.set_trace() accomplishes. Is there any way to do this? If not, what's the best approximation out there?
I'm currently using Chrome's console to mess around with things, and I'd basically love to be dropped into the middle of a function call and use Chrome's console to poke around the local variables and such.

Set a breakpoint, and Chrome's Inspector will allow you to inspect your app's state.
Click the line number. A blue marker will appear. Execution will pause when you hit that line.
Write a debugger statement in your code. The Inspector will pause when you hit the statement.
function something() {
// do stuff
debugger;
}

You can set breakpoints in chrome developers tool as well as firebug in firefox and developer tool in ie 8 and above..

Related

How do I pause everything running on a webpage?

I have a piece of JavaScript code running in browser and I want to pause it to see what values are in the console.
I have a lot of logs going on so I need to see whats logged at a certain point through running the script.
I am running chrome, is there a button or shortcut to do this ?
Whenever you want to add breakpoint enter the following in debug console (F12 in Chrome):
debugger;
It works in most browsers.
You must to use developer tools. If you use the debugger you can put break points and pause in exceptions. You can view variable values, objects structure, and much more information.
Maybe this link is useful for you: https://developer.chrome.com/devtools/docs/javascript-debugging
Good luck
PD: Note that firefox's developer tools are better and more complete than chrome developer tools, but in essence are for the same purpose.
F12 brings the Developer Tools. There, go to Sources and pick your source script. You may either change some lines to include a debugging directive, namely
debugger
which will pause the processing and let you fiddle around.
There is also a possibility of signing a line where you want to pause, by simply clicking on the line's number in source view in the developer tools.
This is what you are looking for.
https://developer.chrome.com/devtools/docs/javascript-debugging
You can pause scripts and hover your mouse over to see variable values at that point in the script. Enjoy.
Open Developer Tools (Ctrl + Shift + I)
Go to Console tab
Paste this to the console:
setInterval(() => { debugger; }, 5000)
Now make the page to be on the state that you want (open drawers, open gallery menus, etc...) after 5 seconds (you can tweak this 5 seconds by changing 5000 to other numbers 5 * 1000 = 5000) website will freeze.
Now do what you wanna do with the site!

console.log() doesn't work in Safari 6.0 Web Inspector

console.log('hi');
undefined
Is there any similar implementation in 6.0? or Did I do something wrong?
Make sure that you're selecting "All" at the top of your console window. Sometimes it'll automatically switch to only show Errors, Warnings, or Logs. If you select "All", then you should see all your console.log()s!
I found the problem! Logs don't appear in the interactive console (which is located on the bottom), but in the Current Log window instead! You can access it through Develop > Show Error Console or the rightmost source icon in the Web Inspector.
So strange! Is it that hard to get simple output in the console, like puts and print in Ruby?
Not preferred but it works.
console.error(message);
Note: I was running gulp serve -d -w which includes a watch. Even then I couldn't see the messages until I restarted gulp.
I have to develop "for Safari" as my primary target, but because Chrome and Safari both use WebKit as their engine, they are ALMOST identical in execution (one difference is the Safari parses date strings to Date worse).
So debugging and developing in Chrome is generally good enough as long as you do a final sanity check in Safari before checking in your code.
That being said, I wrote a console wrapper that gives me the ability to call console.log in any browser... if it supports console.log, then it just works... otherwise it logs the message in an array that can be inspected.
//======================================================//
// multi browser compatibility - not all support console
//======================================================//
var dummyConsole = [];
var console = console || {};
if (!console.log) {
console.log = function (message) {
dummyConsole.push(message);
}
}
If you are using JQuery what I do is dynamically add an ouput field to the page so I can see JavaScript values. The z-index is to keep it on the top. Style it however you want. I usually add a colored border or bright background color so it is easy to find on screen.
var output= 'hello';
$('body').append("<div style='width:50px;z-index:1000'>" + output + "</div>");
I recently came across this post because I was having a similar issue with Safari 14. I use Grammarly for Safari and it creates another frame where the requests are sent. This may happen with other extensions as well.
Safari should select the correct frame by default, but if it does not then you will not see the console logs. If this is happening, there will be a dropdown at the lower right corner of the console window. If you select the website frame the logs will start appearing.
Image of dropdown

Is there any way to force Internet Explorer to break on alert()?

I'm trying to debug an error message in a large and complicated frames based web/ASP.Net app using IE8 and Visual Studio 2010. Specifically, I am getting a "Member not found" message box which appears to be a straightforward JavaScript alert(). Unfortunately I don't know where in the code the problem is happening, and fiddler2 wasn't much help in this case.
My question is, can I get IE to break at the alert() call so that I can debug it?
String search for "Member not found"
Add 1 / 0; before the line.
Turn on break on all errors.
(I assumed you knew the developer tool existed. Hit F12 and navigate to the script tab)
Edit:
Thanks to #DmitriyNaumov
var aalert = window.alert;
window.alert = function() {
aalert.apply(this, arguments);
1 / 0;
}
You can try using the IE Developer Toolbar from Microsoft. I don't know if it allows you to Set JS breakpoints, but it is a great tool to have on hand anyway!
You can use the IE debugger , press F12 and then under the script tab you can add breakpoints
Using IE 8 you can use Developer Tools which is a little like Firebug for Mozilla Firefox.
http://www.microsoft.com/download/en/details.aspx?id=18359
(for more information)
this way you can create breakpoints and debug the script execution on the page step by step
Just press F12
Change alert into a new function that throws a proper error.
window.alert = function(msg) {
throw "Alert: " + msg;
};
Older versions of IE don't allow overwriting window properties like alert in this way in JavaScript ... but you can still do it with VBScript.
Sub alert(msg)
Err.Raise 8, "Alert", msg
End Sub
If you go the VBScript route, make sure it precedes any JavaScript that references the alert function, or you'll have missed your opportunity.
If it's a window.alert, you can do this:
Enable external debuggers in IE.
Attach visual studio as a script debugger.
Reproduce the problem.
While the alert box is shown, break in the debugger.
When you dismiss the alert, the debugger will be paused on the next line of code.
Use the current call stack to set a breakpoint where ever before the call will be most useful for the next time.
Unfortunately this trick only applies to alert and confirm, since they are modal dialogs.

How to write and run scripts in the Google Chrome Javascript Console?

I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.
It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739
You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands
Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?
I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console
Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.

Google Chrome won't let me place breakpoints

I've been using Google Chrome to debug my javascript, but then all of a sudden I can no longer place breakpoints. I click on the line number, where I previously clicked to add a breakpoint, but no breakpoint will be added. Sometimes if I click very fast, like a madman, I can see it trying to add breakpoints, but it won't stick.
The only thing I changed was adding JSONView. I uninstalled that, but still can't add breakpoints.
Does anyone have any idea?
An edit:
I can place breakpoints on other pages, like StackOverflow, just not the one I'm developing running on localhost.
No it's not fixed. The Chrome debugger has done this for as long as I can remember. Just close and reopen the debugger and it usually comes right again. Sometimes you may need to try several times for it to work.
This bug was fixed yesterday (February 3) with the introduction of a new api for managing JavaScript breakpoints: http://code.google.com/p/chromium/issues/detail?id=69988
I downloaded the most recent Chromium nightly from http://build.chromium.org/f/chromium/snapshots/ and was able to successfully set breakpoints in JavaScript, which I had been unable to do using the current stable/beta/dev builds of Chrome.
Hopefully this fix will be incorporated into the next releases of Chrome. Until then, adding debugger; statements to your code is a decent workaround for setting breakpoints.
This will also happen when trying to set a breakpoint on unreachable code. If starting up a debugger in a new chrome process continues to cause problems, make sure there's no errant breaks or returns etc. prior to the breakpoint.
eg:
var foo = 'bar';
return foo;
foo = 'baz';
debugger
^^^ statements after return in above example will not be reached, chrome will rightly refuse to honor debugger commands or set breakpoints
Check your JS code! Got the error too on Chrome (and Firefox) and the error was a method named exactly like another.

Categories