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.
Related
I am trying to use the new feature of chrome devtools "blackboxing a script".
This Chrome Devtools article lists script blackboxing functionality
What happens when you blackbox a script?
Exceptions thrown from library code will not pause (if Pause on
exceptions is enabled)
Stepping into/out/over bypasses the library code
Event listener breakpoints don't break in library code
The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
I have tried to blackbox the file directly by right clicking the file from source tab and everything goes right the yellow notification shows at the top of file "This script is blackboxed in debugger". Strangely none of the above listed points work, debugger goes through blackboxed script also event listeners reference the blackboxed script. I have also enabled Developer Tools experiments at chrome://flags/
With these options set i thought i would have been ok, i also have the latest chrome at this time 39.0 beta,i have no idea what i'm missing. Did anybody go through this?
Thnx!
I had the same issue. One quick and easy way is to look at your Call Stack. As a for instance, Right-Click on one of the 'jquery' functions and select 'black box' from the menu. Nothing else needed. In this example jquery.js will be step-over from that point on.
In your screenshot, I can see a breakpoint.
If you put a breakpoint, it will always break (except if you deactivate it, of course), even with blackboxing being active.
Had the same issue and used good old
have you tried turning it off and on again?
Go to developer tools settings -> Blackboxing -> Remove all entries one by one + disable Blackbox content scripts
Blackboxed again and after that this works fine.
I feel that this is a very, very basic question, so please excuse me in advance. I've created both an HTML file that links to a Javascript file, and in the javascript file, I have console.log("Random Statement"). But it's blank for every browser I try it on.
I have tried reading forums, and have gathered something about "developer tools" and F12, and Firebug. But can someone please give me a concrete answer as to what I need to do to make "Random Statement" appear on the screen?
In Firebug, choose 'Console' from the menu at the top (it's the leftmost choice). When your call executes, the message will appear in the console window. I use console.debug rather than console.log.
You will need to use development tool (F12 for most browsers) or download Firefox and Firebug plugin(F12).
Console is a way of debuging your code (in case of errors).
You can also use alert(); or write() in Javascript
Also if you post some of your code, it would be useful for us to check your syntax, because that could also be an issue
console.log writes to the browser's console. In chrome f12 pulls up the dev tools. From there click console to see the actual console.
alert() will output it in a dialog to the "screen"
$('#someId").html() will do it in jQuery to a particular DOM element id="someId"
How to use the Chrome console:
https://developers.google.com/chrome-developer-tools/docs/console
Try this if you want console.log to output to the screen
console.log = function() {
document.writeln(arguments[0]);
}
And then
console.log("Message");
Should do it
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.
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.
Firebug has a multiline feature in their console tool. Is there a way to get this functionality with the debugger tool in Safari/Chrome?
Shift-Enter on Windows allows multi-line entry where Option-Enter works on Mac.
A more fully featured editor is in the works.
For Google Chrome, you can Sources >> Snippets >> + New Snippet in the Developer Console.
Once you have written your multi-line code, you can execute it with the button or with Ctrl + Enter as mentioned on the button.
This is like a text-editor which has a host of keyboard shortcuts which you can find under Settings >> Shortcuts under Text Editor
Good Luck.
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
http://code.google.com/p/chromium/issues/detail?id=35487
Not yet.
UPDATE: the status of the issue I linked to is now "fixed".
Try pressing option (shift on Windows) at the same time as return. Inserts a newline on Mac.
Shift + Enter seems to work in chrome browser. I am using ubuntu 12.04 as my operating system. Thanks to Mr Bester and Sam Dutton for their inputs.
It is simple ... place semicolons between your multilines and it will work in the console.
For example
if you have html like this
<div id="test">This is a test statement</div>
You could paste following in the console and it will work
var ourTest = document.getElementById('test'); alert(ourTest.innerHTML);
I hope it helped.
There is cool extension to chrome https://chrome.google.com/webstore/detail/bigconsole/klommbdmeefgobphaflhmnieheipjajm
It just add another tab named BigConsole and it allow multiline code execution
Try using the notepad (or someting else) and then copy/paste to the console, works for me!!!!