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 ;)
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.
I have set of Javascript loaded in page and that will be executed onclick of some button . My browser is IE11 latest version and since my application tools doesn't support IE11 I made that change to run application and anything inside it in document emulation mode to IE9 (with "X-UA-Compatible" ) And I have added my domain in compatibility list in IE11.
I am getting a very surprising issue.
All my JS code executes fine if console (F12 developer tools) is keep opened. However it stops executing certain part of JS once console is off in IE11.
Note that, none of my JS code has anything with console.log .
And I have explicitely tried adding below in my JS and it is still not working,
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Can anyone help what could be the possible issue ?
Thanks and appreciate your help.
I am possibly hitting similar issue mentioned below :
Why does JavaScript only work after opening developer tools in IE once?
but below doesn't work for me when I add my code inside head section or body section : so not sure if IE11 this is still a problem and how to resolve this:
<script>
if ( ! window.console ) console = { log: function(){} };
if(!console) {console={}; console.log = function(){};}
</script>
I put the resolution and fix for my issue . Looks like AJAX request that I put inside my javascript was not processing because my page was having some cache problem. if your site or page has a caching problem you will not see that problem in developers/F12 mode. my cached javascript AJAX requests it may not work as expected and cause the execution to break which F12 has no problem at all.
So just added new parameter to make cache false.
$.ajax({
cache: false,
});
Looks like IE specifically needs this to be false so that the AJAX and javascript activity run well.
Today I see this post
Find out whether Chrome console is open .
#zswang gave the way to detect if Chrome DevTools(console) is open. That's really suprise me, then I began to think is there any way to walk around this detection technique?
There are two way to detect chrome DevTools is open(detail in above post)
Using Object.defineProperty
I can walk around this, it can be assign to another function.I have tried Object.defineProperty=null ,then the detect function die(I know write a mock function is better, here just an example)
Using obj.__defineGetter__ (Object.prototype.__defineGetter__)
Object.prototype.__defineGetter__= null would not break the detection, how to walk around?
Finally, I have to say I don't like to be monitored.Hope there is a proper way to walk around.
There are so many ways to detect the use of DevTools, that it would be difficult to block them all. As DevTools gains new features, there are new ways to detect its use. Any third-party tool to block detection can't be trusted to block 100% of detection techniques.
There is a bug reported to the Chromium team here on the idea of integrating detection blocking directly into Chrome.
Disable javascript
The only way to definitively block any detection of the use of DevTools is to disable javascript. You can still execute javascript in the DevTools console when javascript for a page is disabled. I have found it sufficient to disable javascript immediately after opening DevTools, like this:
Open DevTools Command+Option+J (Mac) or Control+Shift+J (Windows, Linux)
Type the hotkey to open the command menu – Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux)
Type dis and hit return to select the Disable Javascript option.
… inspect the website …
Re-enable javascript by evoking the command menu and typing ena and hit return (selecting the Enable Javascript option)
Of course, this method is useless for monitoring malicious code because no code is running when javascript is disabled. But at least it may give you a chance to set breakpoints before re-enabling javascript.
Chrome DevTools Protocol
It may be possible to use the Chrome DevTools Protocol to connect to a separate instance of Chrome and inspect a website without opening DevTools in that instance at all:
The Developer Tools front-end can attach to a remotely running Chrome instance for debugging. For this scenario to work, you should start your host Chrome instance with the remote-debugging-port command line switch:
chrome.exe --remote-debugging-port=9222
Then you can start a separate client Chrome instance, using a distinct user profile:
chrome.exe --user-data-dir=<some directory>
Now you can navigate to the given port from your client and attach to any of the discovered tabs for debugging: http://localhost:9222
The most popular method of detecting if dev tools is open involves invoking console.log() which happens only when devtools is opened.
Below is an example:
var image = new Image();
Object.defineProperty(image, 'id', {
get: function() {
$('#<element_to_remove_on_detection>').remove();
console.clear();
}
});
console.log('%c', image);
In the above case, a new image object is created and the getter is overridden for the 'id'. When console.log is invoked, the getter is called as well.
So basically, any time the getter is called, the website knows that the devtools has been opened because console.log() doesn't get called until devtools is open.
It is a really clever way of detection. Nonetheless, when trying to debug such code, Simply using extension like Resource Override and injecting
console.log = null;
Into the head of the page should stop the website from detecting if devtools is open.
For me, I just added a breakpoint at the top of the offending script, then ran Image = null in the developer console.
I found this solution by googling how websites do that, which brought me this stackoverflow post, I could see in my console a new Image was being logged, so setting Image to null causes an error, which causes the detection to fail.
You could try something like this:
var oldDefineProperty = Object.defineProperty;
Object.defineProperty = function() {
var firstArg = arguments[0];
arguments[0] = _.extend({
get id() {
return firstArg.id;
}
}, arguments[0]);
return oldDefineProperty.apply(this, arguments);
}
var element = new Image();
element.id = "something";
Object.defineProperty(element, 'id', {
get: function() {
alert("detected");
}
});
console.log('%cHello', element);
<script src="http://underscorejs.org/underscore-min.js"></script>
This seems to prevent the alert from showing for me. I'm using the _extend function from Underscore. I don't know if I'm missing anything but just playing around.
As for __defineGetter__, this was deprecated so you'd expect this not to be used.
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.
misspelling javascript function alert to alerler('hell'); and firebug doesn't report an error.
Why is that? It is enabled for localhost (or my site).
I'm guessing you mean you have a <script> that has a call to alerler somewhere, right? Well, Firebug only catches errors for code that gets run. ;) So if the code with the misspelled function isn't actually run after the page loads, Firebug won't catch the error. This is the only reason I can think of as to why Firebug didn't catch your error.
Works On My MachineTM, or should I say Doesn't Work On My MachineTM
>>> alerler('test');
ReferenceError: alerler is not defined
Maybe your FireFox Error Console (Ctrl+Shift+J) could help you on that
Firebug has some weird quirks sometimes like if you setup a debugger; and refresh the page without stopping the debugger, firebug well no longer work properly. Sometimes you get lucky and don't have to restart the browser.
This is very unlikely, could you have defined a function?
function alerler(text) {
// this is a possibility!
}
Though, I would say musicfreak has the most probable reason.