Open a page in Chrome, enter the JavaScript console, and type debugger;. Immediately we hit a breakpoint at line 2 of the following code:
with ((window && window.console && window.console._commandLineAPI) || {}) {
debugger;
}
Can anyone make sense of this? Why the with statement? Why the breakpoint on debugger;?
Do you know what debugger is?
"Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect."
The code is basically saying if there is a console available with this browser and it has the feature "_commandLineAPI", start up the debugger.
The "with" statement basically is a catch all way to make sure there is not an error. In reality they should have just used an if.
Debug javascript Chrome doesn't need 'debugger' command.
Ctrl+Shift+J to Opens Developer Tools.
In the 'Sources' you can locate your js file or javascript in html.
Then click on line number to make a breakpoint on the left side.
Breakpoint will be triggered when it's executed.
You were in the command console that Chrome will try to excute any command line you input.
Related
I know that to debug content script use normal web developer tools (https://developer.mozilla.org/en/docs/Mozilla/Add-ons/WebExtensions/Debugging#Debugging_content_scripts), and this works perfect. debugger keyword works as intended.
But in this exact situation things get broken:
addon.id = "123-568-485"; // I never define `addon` before this line, so this cause: ReferenceError: "addon is not defined". We aren't aware of this mistake.
// Some more code
// Some more code
// Some more code
// Some more code
debugger; // Here we want to stop execution and inspect, some other stuff. Remember that we aren't aware of earlier mistake.
What we would expect, that in console error about Reference error will appear, but it doesn't. Console get silent, and we don't know why our debugger keyword doesn't work.
This kind of silent error, happened to me when I misspell variable name. In result couldn't figure out what's wrong.
The errors in the content script are not reported in the tab's Web Console due to Firefox bug 1410932, which is not fixed (as of Firefox 79, released on 2020-07-28).
I listed possible workarounds in another answer:
use try..catch with logging,
check the Browser Console (which does show errors from the content script)
use the Debugger's "pause on exceptions" option.
Content scripts are executed in webpage, So as you know to see it's output you should open up console menu in that specific web page (ctrl+shift+e then go to console).
But if something is wrong with content script and cause it to throw exception, The error log would be shown in debug area of your extension in: about:debugging
I think the reason is content scripts are treated like extra frame for webpage and their error is shown there.
In my project i need to debug a function call in java-script. I need to know which part of my project calling this function in running time, how can i view using chrome browser development tools
Add debugger statement within your function (or use a breakpoint) and keep open Chrome debugger tool open. It works like using a breakpoint, at this point you can inspect the Call Stack where you can see where you function was called from.
If no debugging functionality is available (Chrome debugger tool is closed), this statement has no effect.
Example:
function yourCode() {
debugger; // breakpoint here
}
More infos on debugging can be found here and here.
I need to be able to run my angularjs app in IE9 but this currently only works with devtools open(F12). From what I am aware is that console.log can cause this but this is stripped out in the app , I am using gulp.stripDebug. What can be another cause or is this a IE9 bug?
Is there a way of debugging/tracking js code without having to open the devtools at the same time?
If console is not defined, calling .log() will break javascript execution. An easy way to overcome this is to check if it exists and create a dummy object if it does not. If you load the page without developer console and open the console afterwards, logging won't work though.
if (!window.console) {
window.console = { log : function () {} };
}
You could make the function alert the debug message, but that would probably annoy more than it would benefit you ;)
I have a strange problem in Internet Explorer with JavaScript. In every browser I did the test the JavaScript is enabled, but it seems to run only after I press the F12, running it in debug mode. And what is more confusing, after starting the IE debugger everything is working as suppose to.
Any ideas what it could be?
If you're calling:
console.log('...some text here...');
or any related method of console without having checked if window.console exists, the script will fail silently. Opening the console leads to window.console existing, which allows the script to continue execution.
Add "window.console && " before your calls to console:
window.console && console.log('works');
I am facing this weird problem. The WebApp I'm debugging right now, is invoking the javascript console.log/console.log/error/debug/etc., the Firebug console however, doesn't print them at all.
This application uses Dojo/Dijit toolkit. Not sure if there is anything special about it
It doesn't appear to be a problem with the Browser, I tried another simple web-page with a console.debug call, and the message appears on the console as expected.
Please advise about what should I look for. I have also tried Chrome/IE.
Thanks in Advance/
console is not write protected, it can be replaced with anything. You could try
alert(console.log.toString());
to find out what console.log really is
Edit:
A better method would be
var originalConsole = console;
// now include your library
// ...
originalConsole.log(console.log);
In Firebug, clicking on the function takes you directly to its definition.
did you try window.console.log()? Maybe you are not in window scope
In case like this do not forget to check if "Logging" is enabled or active at your console of browser.
Just to update this question -:
Ensure that firebug is Enabled - - > On for all Web Pages.
Reload the application.
Then in the firebug panel - - > Console - - > All.
All the console.log messages will appear.