Assuming I have following HTML
<div id="box" style="display:none;">Hello World</div>
<button id="showbutton">Show The Box</button>
And following JQuery button handler to show the div
$('#showbutton').click(function() {
console.log('test');
$('#box').show();
});
Notice the console.log statement. If I click the button on a freshly opened IE9 browser, it won't work. It seems the console object is not yet initialized. But if I press F12 to open the developer console, the handler will work.
This behavior doesn't exist on Chrome/Firefox.
Is this an expected behavior of console object on IE? Is there a documentation related to javascript console object support on IE?
JSFiddle for the demo is here: http://jsfiddle.net/6tHB5/.
To reproduce the problem on IE, you have to close your browser first, run the browser again, then click the button straight away without opening developer console (F12)
Yes, this is unfortunately just how IE works. There are a few possible solutions:
You can check beforehand if you want to avoid JS errors.
$('#showbutton').click(function() {
if (console) console.log('test');
$('#box').show();
});
Make your own log function to check automatically.
function log(){
if (console) console.log.apply(console, arguments);
}
You could also mock out the console like this at the top of your page to make life easier:
if (!window.console) window.console = {log: function(){}};
In IE 9 console object is not defined before it opened, so you should check it before log:
$('#showbutton').click(function() {
if (typeof console != 'undefined') console.log('test');
$('#box').show();
});
Related
How can i display the console for debugging JavaScript on jsfiddle.net?
I only see a results tab. When trying to do a console.log('test'); only a white result tab appears.
Does a console panel exists at all?
Normally by pressing F12 or using inspect on your result pane.
Alternatively add
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
to the resources on the left as seen here
for (var i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
console.log({
foo: 'bar',
baz: function() {}
});
console.log([1, 2, 3]);
console.log(window.alert);
throw new Error('This is error log..');
<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
Old answer
Until recently if you wanted the "Stacksnippet Console" type of console, you could choose jQuery and turn on Firebug which would show console messages in the result pane:
-- Latest Simple JSFiddle Solution --
JSFiddle now has its own beta settings for displaying the console:
which appears at the bottom of the results panel:
You can open it by right clicking and selecting Inspect Element on that menu or you can use f12 as a shortcut key to open console.
You can use the package below to redirect console output in an 'inspection style' manner to the HTML pane.
GitHub: https://github.com/karimayachi/html-console-output
If you also have normal HTML output, you can use CSS to overlay this console or have it stick to the top or bottom.
Basic example (no CSS) here: https://jsfiddle.net/Brutac/e5nsp2mu/
To run it inside jsFiddle, simply add the CDN-version (url below) to the resources (see example).
https://unpkg.com/html-console-output
you can use browser console by
Rightclick > inspect element > console
F12, opens the debugger view and on console tab you get the logs. You can filter as required warning/info/errors/all
(Tested on Chrome)
1- Write some simple JS code on the JS pane. e.g.> console.log("hello");
2- Click on "Run".
3- On the "Result" pane, right click and pick "Inspect".
4- Go to the Console.
5- Make sure that you filter your results.(See picture down below).
And do NOT click on "Update" in order to keep a clean console. Every time you want to test new code, just hit "Run" or use shortcut: Ctrl + Enter.
I am using Chrome browser Version 52.0.2743.116 (64-bit) on Mac OSX 10.11.6.
I have a chrome extension with a background.js where I have a console.log statement for debugging purposes. However, I am unable to see the output in the Chrome browser console. Alert works fine but console.log outputs nothing.
alert("CSS code: "+css);
console.log("CSS code:"+css);
I have checked to make sure "All" messages are selected, the context is set to "top", etc. When the page loads, I see other console.log messages (not from my extension), the alert window pop up but nothing printed to the console.
How do I see console.log output?
EDIT: Adding the function code where the alert and console.log statements appear.
function doSomething(tab) {
var tabUrl = tab.url;
if (tabUrl && tabUrl.indexOf("my-site.com") != -1) {
var css = "";
if (hideAds == true) {
css += ".adsBanner {display: none !important;} .promo {display: none !important;} ";
}
alert("CSS code: "+css);
console.log("CSS code:"+css);
chrome.tabs.insertCSS(tab.id, {
code: css
});
}
}
EDIT 2: In response to the comment that this is a duplicate of this question, I want to print console.log statements from the background file, I don't have a popup.html file. The other question has solutions to execute console.log on the background page called from the popup page.
This has been previously answered here. It seems the background.js has its own console window that needs to be watched (launched from the extension's inpsect view link under chrome://extensions).
The answer to your problem is to use document.write();
I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:
window.onload = function(){
console.log('before print');
window.print();
}
It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.
Does any body came up with this issue? Any help will be appreciated.
Updated
Here is the situation i have:
We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print() get called. The console.log() is just an example code for observing. I tried to add an <div id='test'>Test HTML</div> in test HTML and add
var test = document.getElementById('test');
test.style.background = 'yellow';
before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.log issue.
Updated
I am using Safari 5.1.7(7534.57.2) on Windows 7
For me, the setTimeout solution didn't work. I found this jQuery plugin https://github.com/jasonday/printThis that has plenty of workarounds for window.print() because it seems not to be fully supported by all browsers.
I took this line that worked for me Safari document.execCommand("print", false, null)
and this worked ok for me for now in safari and chrome
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
This is odd behavior. I tested in Safari 6.1 on Mac.
But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
window.onload = function() {
$('body').html('before print');
console.log('before print');
window.print();
};
</script>
When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.
After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?
window.onload = function() {
$('body').html('After change');
setTimeout(window.print, 1000);
};
Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.
var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
this.print();
});
Adding one more solution which worked for my case:
First make your popup window.
$( ".myButton" ).click(function() {
var url = 'www.google.com';
var printWindow = window.open( url, '_blank');
printWindow.focus();
});
Then, inside the HTML page which is loaded in the popup:
$(window).bind("load", function() {
setTimeout( function () {
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
}, 500);
});
I'm encountering quite a weird JavaScript Issue in IE9 (It works fine tough in Chrome, Safari, Firefox).
I have some JS that selects a different Color of an Image when you click on that associated swatch. In IE9, it seems that is completely ignoring this and it is simply doing nothing. But, as soon as I open up the F12 Developer Tools it starts working - Even without reloading the page. Am I mising something here?
jQuery
$('.product-details-description-colors .circle img').click(function() {
if(!$(this).hasClass('oos')) {
url = $(this).parent('label').data('image');
color_value = $(this).parent('label').prev('input');
color_value.prop('checked', true);
$('.circle').find('input').not(color_value).attr('checked', false);
$(this).css('outline', '1px solid black');
$('.product-details-description-colors .circle img').not(this).css('outline', 'none');
$('.product-details-images-showroom img').attr('src', url);
}
});
I assume you haven't posted all your code. One of the most common causes of this is trying to use the console object, specifically console.log. This is only available when the F12 tools are open and if they aren't, it will cause mysterious errors from propagating undefined.
Hence, this is a good idea to put somewhere in your coffeescript app:
# Fix IE logging issues
if not window.console
window.console =
log: ->
I am using code to create a custom context menu. Its working however there is an issue in Firefox. When right clicking on either a Select box/dropdown list or a button it gives me the following error in Firefox:
TypeError: this.target is undefined
[Break On This Error] Filtered chrome url chrome://browser/content/nsContextMenu.js
nsContextMenu.js (line 162)
TypeError: gContextMenu is null
The following code works in Chrome and Internet Explorer but gives an error in Firefox:
$(document).on("contextmenu",function(e){
if($(e.target).prop("tagName")=="A"){
//do something
}
});
Note that this error only happens in Firefox so far with the following tags when right clicking on them.
<select>
<button>
<input type='checkbox'>
Text boxes work fine however.
Edit: Ok it seems even with no code inside "contextmenu" function it still gives the error.
Update: This appears to be a Firebug issue in Firefox as no erros appear using Firefox's Developer tools javascript console.
This issue can be solved by disabling Firebug. It is a firebug related issue and not a Firefox bug in itself.
Try using tag name with DOM object like this e.target.tagName
$(document).on("contextmenu",function(e){
if(e.target.tagName =="A"){
//do something
}
});