回答:
フォールバックのためのさらに良いのはこれです:
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
オブジェクトから配列を作成します。引数は実際には配列ではないため、これは必須です。
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では真のJavaScript関数ではないことに注意してください。apply
またはcall
メソッドはサポートしていません。
console.log=Function.prototype.bind.call(console.log,console);
これを回避するために使用しています。
bind
。
アラートへのフォールバックを気にしないと仮定すると、Internet Explorerの欠点を回避するさらに簡潔な方法を次に示します。
var console=console||{"log":function(){}};
「orange80」の投稿が気に入っています。一度設定すれば忘れられるので、エレガントです。
他のアプローチでは、別のことを行う必要があります(プレーン以外の何かを呼び出す console.log()
毎回)。これは単に問題を求めているだけです…私は最終的には忘れるでしょう。
私はそれをさらに一歩進めました。ユーティリティ関数にコードをラップすることにより、ロギングの前であればどこでも、JavaScriptの最初に一度呼び出すことができます。(これを会社のイベントデータルーター製品にインストールします。新しい管理インターフェイスのクロスブラウザー設計を簡素化するのに役立ちます。)
/**
* 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が存在しない(またはこの場合は開かれていない)場合は、ログをグローバル名前空間配列に格納します。これにより、何百万ものアラートに悩まされることなく、開発者コンソールを開いたり閉じたりしてもログを表示できます。
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 = {});
}
} ());
私は上からウォルターのアプローチを使用しています(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 />'));
}
}
}
これがお役に立てば幸いです:-)
IE8で動作します。F12キーを押して、IE8の開発者ツールを開きます。
>>console.log('test')
LOG: test
私はこの方法が好きです(jqueryのdoc readyを使用)...つまり、IEでもコンソールを使用できます...ページの読み込み後にIEの開発ツールを開いた場合、ページを再読み込みする必要があるだけです...
すべての機能を考慮に入れると滑らかになる可能性がありますが、私はログのみを使用しているので、これは私が行うことです。
//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
あなたはデベロッパーツールを開くまで、オブジェクトが作成されません。したがって、console.log
たとえば、開発ツールを開く機会が得られる前にページの読み込み時に発生した場合、への呼び出しはエラーになる可能性があります。ここでの勝利の答えはそれをより詳細に説明しています。