Google Chrome JavaScriptコンソールでデバッグメッセージを印刷するにはどうすればよいですか。
Google Chrome JavaScriptコンソールでデバッグメッセージを印刷するにはどうすればよいですか。
JavaScriptコンソールはJavaScriptデバッガと同じではありません。それらは違う構文を持っているので、JavaScript Debuggerの print コマンドはここでは動きません。 JavaScriptコンソールでは、print()がパラメータをプリンタに送信します。
ブラウザのアドレスバーから次のコードを実行する。
javascript：console.log（2）;
google Chromeの「JavaScriptコンソール」にメッセージを正常に印刷します。
Andruのアイデアを改良して、コンソール関数が存在しない場合にそれを作成するスクリプトを書くことができます。
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
次に、以下のいずれかを使用します。
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
これらの関数はさまざまな種類の項目（ログ、情報、エラー、警告に基づいてフィルタリング可能）をログに記録し、コンソールが利用できないときにエラーを引き起こすことはありません。これらの機能はFirebugおよびChromeコンソールで機能します。
多くの開発者が見逃しているクールな機能を追加するだけです。
console.log("this is %o, event is %o, Host is %s", this, e, location.Host);
これは、JavaScriptオブジェクトの魔法のような%o dump クリック可能かつ深く閲覧可能コンテンツです。 %sは単なるレコードとして表示されていました。
これもクールです。
console.log("%s", new Error().stack);
これは、Javaのようなスタックトレースをnew Error()呼び出しのポイントまで与えます（ファイルへのパスと行番号！を含む）。
%oとnew Error().stackの両方がChromeとFirefoxで利用可能です。
Firefoxのスタックトレースにも：
console.trace();
https://developer.mozilla.org/en-US/docs/Web/API/console によると。
ハッピーハッキング！
_ update _ ：consoleオブジェクトを自分の目的のために再定義した悪い人たちによって書かれたライブラリがあります。ライブラリをロードした後に元のブラウザconsoleを復元するには、次のようにします。
delete console.log;
delete console.warn;
....
スタックオーバーフローの質問console.log（）の復元を参照してください。
これはコンソールが利用可能かどうかをチェックする短いスクリプトです。そうでない場合は、 Firebug をロードしようとし、Firebugが利用できない場合はFirebug Liteをロードします。今、あなたはどんなブラウザでもconsole.logを使うことができます。楽しい！
if (!window['console']) {
// Enable console
if (window['loadFirebugConsole']) {
window.loadFirebugConsole();
}
else {
// No console, use Firebug Lite
var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
if (F.getElementById(b))
return;
E = F[i+'NS']&&F.documentElement.namespaceURI;
E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
E[r]('id', b);
E[r]('src', I + g + T);
E[r](b, u);
(F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
E = new Image;
E[r]('src', I + L);
};
firebugLite(
document, 'createElement', 'setAttribute', 'getElementsByTagName',
'FirebugLite', '4', 'firebug-lite.js',
'releases/lite/latest/skin/xp/Sprite.png',
'https://getfirebug.com/', '#startOpened');
}
}
else {
// Console is already available, no action needed.
}
ただの警告 - console.log（）をすべて削除せずにInternet Explorerでテストしたい場合は、 Firebug Lite を使用する必要があります。そうしないと、特に問題とならないエラーが発生します。
（またはfalseを返す独自のconsole.log（）を作成してください。）
Delan Azabaniの回答 に加えて、私は自分のconsole.jsを共有したいと思います、そして私は同じ目的のために使用します。関数名の配列を使用してnoopコンソールを作成します。これは、これを実行するための非常に便利な方法です。InternetExplorerには、console.log関数がありますが、console.debugはありません。
// Create a noop console object if the browser doesn't provide one...
if (!window.console){
window.console = {};
}
// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
if (!window.console.debug && typeof window.console.log !== 'undefined') {
window.console.debug = window.console.log;
}
}
// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
for (var i = 0; i < names.length; ++i){
if(!window.console[names[i]]){
window.console[names[i]] = function() {};
}
}
またはこの機能を使用します。
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
これが私のコンソールラッパークラスです。人生を楽にするためにスコープの出力もできます。 localConsole.debugが呼び出しクラスのスコープ内で実行され、そのtoStringメソッドへのアクセスが提供されるように、localConsole.debug.call()の使用に注意してください。
localConsole = {
info: function(caller, msg, args) {
if ( window.console && window.console.info ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.info.apply(console, params);
}
},
debug: function(caller, msg, args) {
if ( window.console && window.console.debug ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.debug.apply(console, params);
}
}
};
someClass = {
toString: function(){
return 'In scope of someClass';
},
someFunc: function() {
myObj = {
dr: 'zeus',
cat: 'hat'
};
localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
}
};
someClass.someFunc();
これは Firebug のように出力を与える。
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
またはChrome：
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
個人的にはこれを使います。これはtarek11011のものと似ています。
// Use a less-common namespace than just 'log'
function myLog(msg)
{
// Attempt to send a message to the console
try
{
console.log(msg);
}
// Fail gracefully if it does not exist
catch(e){}
}
重要な点は、console.log()をJavaScriptコードに直接貼り付ける以外に、少なくとも何らかのログイン方法をとることをお勧めします。それを忘れて、本番サイトにあると、すべてのJavaScriptが破壊される可能性があるためです。そのページのコード。
あなたが持っているプログラミングソフトウェアエディタの中にデバッグされたコードがあればconsole.log()を使うことができます、そしてあなたは出力がたぶん私のために最高のエディタであることを見るでしょう（Google Chrome）。ただ押す F12 そしてコンソールタブを押します。結果が表示されます。ハッピーコーディング:)
私は開発者が彼らのconsole。（）ステートメントをチェックインすることに関して多くの問題を抱えていました。そして、 Internet Explorer 10 および /Visual Studio 2012 などの素晴らしい改良にもかかわらず、私はInternet Explorerのデバッグはあまり好きではありません。
それで、私はコンソールオブジェクト自体をオーバーライドしました...私はlocalhostの上でコンソールステートメントだけを許可する__localhostフラグを追加しました。 Internet Explorerにconsole。（）関数も追加しました（代わりにalert（）が表示されます）。
// Console extensions...
(function() {
var __localhost = (document.location.Host === "localhost"),
__allow_examine = true;
if (!console) {
console = {};
}
console.__log = console.log;
console.log = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__log === "function") {
console.__log(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__info = console.info;
console.info = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__info === "function") {
console.__info(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__warn = console.warn;
console.warn = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__warn === "function") {
console.__warn(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__error = console.error;
console.error = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__error === "function") {
console.__error(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__group = console.group;
console.group = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__group === "function") {
console.__group(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert("group:\r\n" + msg + "{");
}
}
};
console.__groupEnd = console.groupEnd;
console.groupEnd = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
console.__groupEnd(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg + "\r\n}");
}
}
};
/// <summary>
/// Clever way to leave hundreds of debug output messages in the code,
/// but not see _everything_ when you only want to see _some_ of the
/// debugging messages.
/// </summary>
/// <remarks>
/// To enable __examine_() statements for sections/groups of code, type the
/// following in your browser's console:
/// top.__examine_ABC = true;
/// This will enable only the console.examine("ABC", ... ) statements
/// in the code.
/// </remarks>
console.examine = function() {
if (!__allow_examine) {
return;
}
if (arguments.length > 0) {
var obj = top["__examine_" + arguments[0]];
if (obj && obj === true) {
console.log(arguments.splice(0, 1));
}
}
};
})();
使用例
console.log("hello");
Chrome/Firefox：
prints hello in the console window.
インターネットエクスプローラ：
displays an alert with 'hello'.
コードをよく見る人のために、console.examine（）関数を見つけるでしょう。 _ qa _ /顧客の問題のトラブルシューティングに役立つように、製品の周囲の特定の領域にデバッグコードを残すことができるように、私は何年も前に作成しました。例えば、私はいくつかのリリースされたコードで次の行を残しておくでしょう：
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
次に、リリースされた製品から、コンソールに次のように入力します（またはアドレスバーに「javascript：」というプレフィックスを付けます）。
top.__examine_someLabel = true;
それから、ログに記録されたconsole.examine（）ステートメントをすべて見ることになります。それは何度も素晴らしい助けになりました。
単純な Internet Explorer 7 以下 shim 他のブラウザの行番号は保持されます。
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
この方法を使用すると、テキストがコンソールに明るい青色で印刷されます。
DelanとAndruのアイデアをさらに改良する（これがこの答えが編集版である理由です）。 console.logは存在する可能性がありますが、他の機能は存在しない可能性があるため、デフォルトのマップをconsole.logと同じ機能にマップします。
コンソール関数が存在しない場合は作成するスクリプトを書くことができます。
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log; // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log
次に、以下のいずれかを使用します。
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
これらの関数はさまざまな種類の項目（ログ、情報、エラー、警告に基づいてフィルタリング可能）をログに記録し、コンソールが利用できないときにエラーを引き起こすことはありません。これらの機能はFirebugおよびChromeコンソールで機能します。