Google Chrome JavaScriptコンソールでデバッグメッセージを印刷するにはどうすればよいですか？
回答:
ブラウザのアドレスバーから次のコードを実行します。
javascript：console.log（2）;
Google Chromeの「JavaScriptコンソール」にメッセージを正常に出力します。
console.log()ませんが、デプロイメント前に本番コードからコードを削除する必要があります。
Console.Logデプロイする前に本番コードから削除する必要があります。削除しない場合、これらのメッセージはユーザーの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コンソールで機能します。
if (!window.console) {すべてを角かっこで囲んだ場合、コードはよりタイトにならないでしょうか？現在、同じものを4回評価しています。
多くの開発者が見逃しているクールな機能を追加するだけです：
console.log("this is %o, event is %o, host is %s", this, e, location.host);これは、JavaScriptオブジェクトの魔法の%oダンプのクリック可能で詳細に閲覧可能なコンテンツです。%s記録のためだけに表示されました。
これもクールです：
console.log("%s", new Error().stack);これは、new Error()呼び出しのポイントまでJavaのようなスタックトレースを提供します（ファイルへのパスと行番号を含む）！）。
両方%oとnew Error().stack ChromeとFirefoxで利用可能です！
また、Firefoxのスタックトレースを使用する場合：
console.trace();以下のようhttps://developer.mozilla.org/en-US/docs/Web/API/consoleは述べています。
ハッキングハッピー！
更新：一部のライブラリは、悪意のある人々consoleが独自の目的でオブジェクトを再定義することによって作成されています。consoleライブラリのロード後に元のブラウザを復元するには、次を使用します：
delete console.log;
delete console.warn;
....Stack Overflowの質問Restoring console.log（）を参照してください。
簡単な警告-すべてのconsole.log（）を削除せずにInternet Explorerでテストする場合は、Firebug Liteを使用する必要があります。そうしないと、特にわかりにくいエラーが表示されます。
（または、単にfalseを返す独自のconsole.log（）を作成します。）
consoleオブジェクトが作成され、そのブラウザーインスタンスを閉じるまで存在します。
コンソールが使用可能かどうかを確認する短いスクリプトを次に示します。そうでない場合は、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.
}Delan Azabaniの回答に加えて、私はを共有したいのconsole.jsですが、同じ目的で使用しています。私は関数名の配列を使用してnoopコンソールを作成します。これは、これを行うのに非常に便利な方法だと思います。私は、console.log機能を持つInternet Explorerを処理しましたが、機能はありませんでした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);
}
}console.constructor === Object && (log = m => console.log(m))
これが私のコンソールラッパークラスです。スコープ出力も提供して、作業を楽にします。の使用に注意してください。localConsole.debug.call()これlocalConsole.debugは、呼び出しクラスのスコープで実行され、そのtoStringメソッドへのアクセスを提供します。
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コードが壊れる可能性があるためです。そのページのために。
if(windows.console) console.log(msg)？
window.consoleもしかして。この再試行が役立つのは、コンソールが再定義されてからエラーがスローされた場合（console.logが関数ではなかった場合）だけです。行うとwindow.console && window.console.log instanceof Function、より有用であろう。
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以下のシム：
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
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コンソールで機能します。
console.log()jsデバッグに最適です...実際に使用することを忘れがちです。