답변:
대체를 위해 더 나은 것은 이것입니다 :
var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
if (alertFallback) {
console.log = function(msg) {
alert(msg);
};
} else {
console.log = function() {};
}
}
console.log는 개발자 도구를 연 후에 만 사용할 수 있습니다 (F12를 열고 닫은 상태로 전환). 재밌는 것은 그것을 연 후에는 그것을 닫은 다음 console.log 호출을 통해 여전히 게시 할 수 있으며 다시 열면 볼 수 있다는 것입니다. 나는 그것이 일종의 버그라고 생각하고 수정 될 수 있지만, 우리는 볼 것입니다.
아마 다음과 같은 것을 사용할 것입니다.
function trace(s) {
if ('console' in self && 'log' in console) console.log(s)
// the line below you might want to comment out, so it dies silent
// but nice for seeing when the console is available or not.
else alert(s)
}
그리고 더 간단합니다 :
function trace(s) {
try { console.log(s) } catch (e) { alert(s) }
}
alert
악하다. 문서가 포커스를 잃기 때문에 이전에 없었던 버그를 진단하거나 작성하기가 더 어려워지기 때문에 경고가 사용될 때 일부 코드가 다르게 작동합니다. 또한 실수로 console.log
프로덕션 코드에 코드를 남겨두면 코드가 부드럽 지 않다는 가정하에 콘솔에 자동으로 기록됩니다. 실수로 alert
생산 코드를 남겨두면 사용자 경험이 손상됩니다.
이것은 다양한 답변을 취하는 것입니다. 해고되었을 때 IE 콘솔을 열지 않아도 실제로 기록 된 메시지를보고 싶었습니다. 그래서 내가 만든 console.messages
배열 로 밀어 넣습니다 . 또한 console.dump()
전체 로그를 쉽게 볼 수 있는 기능 을 추가했습니다 . console.clear()
메시지 대기열을 비 웁니다.
이 솔루션은 또한 다른 콘솔 방법을 "처리"합니다. Firebug Console API )
마지막으로이 솔루션은 IIFE 이므로 전체 범위를 오염시키지 않습니다. 폴백 함수 인수는 코드 하단에 정의되어 있습니다.
모든 페이지에 포함되어있는 마스터 JS 파일에 넣고 잊어 버립니다.
(function (fallback) {
fallback = fallback || function () { };
// function to trap most of the console functions from the FireBug Console API.
var trap = function () {
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.push(args);
var message = args.join(' ');
console.messages.push(message);
fallback(message);
};
// redefine console
if (typeof console === 'undefined') {
console = {
messages: [],
raw: [],
dump: function() { return console.messages.join('\n'); },
log: trap,
debug: trap,
info: trap,
warn: trap,
error: trap,
assert: trap,
clear: function() {
console.messages.length = 0;
console.raw.length = 0 ;
},
dir: trap,
dirxml: trap,
trace: trap,
group: trap,
groupCollapsed: trap,
groupEnd: trap,
time: trap,
timeEnd: trap,
timeStamp: trap,
profile: trap,
profileEnd: trap,
count: trap,
exception: trap,
table: trap
};
}
})(null); // to define a fallback function, replace null with the name of the function (ex: alert)
선 var args = Array.prototype.slice.call(arguments);
은 arguments
객체 에서 배열을 만듭니다 . 인수는 실제로 Array가 아니기 때문에 필수 입니다.
trap()
모든 API 함수의 기본 핸들러입니다. 나는 인수를 message
전달하여 API 호출에 전달 된 인수의 로그를 얻습니다 console.log
.
에 console.raw
전달 된대로 정확하게 인수를 캡처 하는 추가 배열 을 추가 했습니다 trap()
. 때로는 바람직하지 않은 args.join(' ')
객체를 문자열로 변환하고 있음을 깨달았습니다 "[object Object]"
. 덕분에 bfontaine 에 대한 제안 .
trap
기능 이 무엇인지 자세히 설명해 주 var args = Array.prototype.slice.call(arguments); var message = args.join(' ');
시겠습니까? 이것을 통해 왜 인수를 메시지에 전달합니까?
console.log
IE8에서는 진정한 자바 스크립트 기능이 아니라는 점에 주목할 가치가 있습니다. apply
또는 call
메소드를 지원하지 않습니다 .
console.log=Function.prototype.bind.call(console.log,console);
해결하기 위해 사용 하고 있습니다.
bind
.
경고 할 폴백에 신경 쓰지 않는다고 가정하면 Internet Explorer의 단점을 해결하는 더 간결한 방법이 있습니다.
var console=console||{"log":function(){}};
"orange80"에 의해 게시 된 접근 방식이 정말 마음에 듭니다. 한 번 설정하고 잊을 수 있기 때문에 우아합니다.
다른 접근 방식은 문제를 요구하는 다른 무언가를 수행해야합니다 ( console.log()
매번 평소 이외의 것을 호출하십시오 ).
로깅하기 전의 어느 위치에서나 자바 스크립트의 시작 부분에서 한 번만 호출 할 수있는 유틸리티 함수로 코드를 래핑하여 한 단계 더 발전했습니다. (저는 회사의 이벤트 데이터 라우터 제품에 이것을 설치하고 있습니다. 새로운 관리자 인터페이스의 브라우저 간 디자인을 단순화하는 데 도움이됩니다.)
/**
* Call once at beginning to ensure your app can safely call console.log() and
* console.dir(), even on browsers that don't support it. You may not get useful
* logging on those browers, but at least you won't generate errors.
*
* @param alertFallback - if 'true', all logs become alerts, if necessary.
* (not usually suitable for production)
*/
function fixConsole(alertFallback)
{
if (typeof console === "undefined")
{
console = {}; // define it if it doesn't exist already
}
if (typeof console.log === "undefined")
{
if (alertFallback) { console.log = function(msg) { alert(msg); }; }
else { console.log = function() {}; }
}
if (typeof console.dir === "undefined")
{
if (alertFallback)
{
// THIS COULD BE IMPROVED… maybe list all the object properties?
console.dir = function(obj) { alert("DIR: "+obj); };
}
else { console.dir = function() {}; }
}
}
/**/console.log("...");
것이므로 임시 코드를 쉽게 찾고 찾을 수 있습니다.
모든 console.log 호출에 "정의되지 않음"이 표시되면 오래된 firebuglite (firebug.js)가 여전히로드되어 있음을 의미합니다. IE8의 console.log의 모든 유효한 기능이 존재하더라도이를 무시합니다. 이것은 어쨌든 나에게 일어난 일입니다.
콘솔 객체를 재정의하는 다른 코드를 확인하십시오.
콘솔이없는 브라우저에 가장 적합한 솔루션은 다음과 같습니다.
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
답변이 너무 많습니다. 이것에 대한 나의 해결책은 다음과 같습니다.
globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
console.log = function(message) {globalNamespace.globalArray.push(message)};
}
즉, console.log가 없거나이 경우에는 열리지 않은 경우 전역 네임 스페이스 Array에 로그를 저장하십시오. 이 방법으로 수백만 개의 경고를받지 않아도 개발자 콘솔을 열거 나 닫은 상태에서 로그를 볼 수 있습니다.
if (window.console && 'function'=== typeof window.console.log) { window.console.log (o); }
window.console.log()
IE8에서 사용할 수 없을 때도 가능 하다고 말하고 console.log()
있습니까?
typeof window.console.log === "object"
그렇지 않다는 것입니다."function"
나는 이것을 발견했다. github .
// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
log.history = log.history || [];
log.history.push(arguments);
if (this.console) {
var args = arguments,
newarr;
args.callee = args.callee.caller;
newarr = [].slice.call(args);
if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
else console.log.apply(console, newarr);
}
};
// make it safe to use console.log always
(function(a) {
function b() {}
for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
a[d] = a[d] || b;
}
})(function() {
try {
console.log();
return window.console;
} catch(a) {
return (window.console = {});
}
} ());
위에서 Walter의 접근 방식을 사용하고 있습니다 ( https://stackoverflow.com/a/14246240/3076102 참조) )
https://stackoverflow.com/a/7967670 에서 찾은 솔루션을 혼합합니다. 에서 객체를 올바르게 표시합니다.
이는 트랩 기능이 다음과 같이됨을 의미합니다.
function trap(){
if(debugging){
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.push(args);
var index;
for (index = 0; index < args.length; ++index) {
//fix for objects
if(typeof args[index] === 'object'){
args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,' ');
}
}
var message = args.join(' ');
console.messages.push(message);
// instead of a fallback function we use the next few lines to output logs
// at the bottom of the page with jQuery
if($){
if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
$('#_console_log').append(message).append($('<br />'));
}
}
}
도움이되기를 바랍니다.
나는이 방법을 좋아한다 (jquery의 doc ready 사용) ... 즉, 심지어 콘솔에서도 사용할 수 있습니다.
모든 기능을 고려하면 더 날씬해 질 수 있지만 로그 만 사용하므로 이것이 내가하는 일입니다.
//one last double check against stray console.logs
$(document).ready(function (){
try {
console.log('testing for console in itcutils');
} catch (e) {
window.console = new (function (){ this.log = function (val) {
//do nothing
}})();
}
});
다음은 개발자 도구가 열려있을 때 콘솔이 아닌 닫힐 때 콘솔에 기록되는 버전입니다.
(function(window) {
var console = {};
console.log = function() {
if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
window.console.log.apply(window, arguments);
}
}
// Rest of your application here
})(window)
apply
메서드 가 없습니다 .
HTML로 자신의 콘솔을 만드십시오 .... ;-) 이것은 임박하지만 다음과 같이 시작할 수 있습니다 :
if (typeof console == "undefined" || typeof console.log === "undefined") {
var oDiv=document.createElement("div");
var attr = document.createAttribute('id'); attr.value = 'html-console';
oDiv.setAttributeNode(attr);
var style= document.createAttribute('style');
style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
oDiv.setAttributeNode(style);
var t = document.createElement("h3");
var tcontent = document.createTextNode('console');
t.appendChild(tcontent);
oDiv.appendChild(t);
document.body.appendChild(oDiv);
var htmlConsole = document.getElementById('html-console');
window.console = {
log: function(message) {
var p = document.createElement("p");
var content = document.createTextNode(message.toString());
p.appendChild(content);
htmlConsole.appendChild(p);
}
};
}
console.log
이다 IE8에 존재하지만,console
객체를 열 DevTools로까지 만들어지지 않습니다. 따라서console.log
개발자 도구를 열기 전에 페이지로드시 오류가 발생하는 경우 호출 하면 오류가 발생할 수 있습니다. 여기서 정답은 이에 대한 자세한 설명입니다.