web-dev-qa-db-ja.com

Chrome JavaScript開発者コンソール：改行なしでconsole.log（）を呼び出すことは可能ですか？

Console.log（）を使用してメッセージを記録したいと思いますwithout console.log（）を呼び出すたびに新しい行を追加します。これは可能ですか？

javascriptgoogle-chromeconsolelogging
80
MitchellSalad

いいえ、できません。文字列を保持して、すべてを1行にまとめる場合は連結するか、別の場所（別のウィンドウなど）に出力する必要があります。

41
Ry-

NodeJSでは、process.stdout.writeを使用でき、必要に応じて「\ n」を追加できます。

console.log(msg)はprocess.stdout.write(msg + '\n')と同等です。

29
Pablo Yabo

argumentsには好きなだけのものを入れることができます：

console.log('hi','these','words','will','be','separated','by','spaces',window,document)

オブジェクト参照をインラインで1行ですべての出力を取得し、そこからインスペクターをドロップダウンできます。

13
tkone

短い答えはノーです。

But

ユースケースが、コンソールの膨張を回避しながら、絶えず変化するデータを記録しようとする場合、これを達成する1つの方法は（特定のブラウザーで）各出力の前にconsole.clear()を使用することです。

function writeSingleLine (msg) {

  console.clear();
  console.log(msg);

}

writeSingleLine('this');
setTimeout( function () { writeSingleLine('is'); }, 1000);
setTimeout( function () { writeSingleLine('a'); }, 2000);
setTimeout( function () { writeSingleLine('hack'); }, 3000);

これはおそらく、アプリケーション内で実行されていた他のロギング機能を破壊することに注意してください。

免責事項：私はこれをハックと分類します。

11
shennan

はい、可能です（以下のデモをご覧ください）-ネイティブのブラウザコンソールの上に独自の仮想コンソールを実装し、それを実際のブラウザコンソールと同期します。

これは思ったよりもはるかに簡単です。

  1. 表示バッファーを維持します（例：各行を表す文字列の配列）
  2. 書き込み前にconsole.clear()を呼び出して、以前の内容を消去します
  3. console.log()（または警告、エラーなど）を呼び出して、ディスプレイバッファーの内容をコンソールに入力します。

実際、私はこれをしばらく前からやっています。アイデアの短い、初歩的な実装は、次の行に沿ったものですが、それでもコンソールのコンテンツをアニメーション化することができます：

// =================================================
// Rudimentary implementation of a virtual console.
// =================================================

var virtualConsole = {
    lines: [],
    currentLine: 0,
    log: function (msg, appendToCurrentLine) {
        if (!appendToCurrentLine) virtualConsole.currentLine++;
      
        if (appendToCurrentLine && virtualConsole.lines[virtualConsole.currentLine]) {
            virtualConsole.lines[virtualConsole.currentLine] += msg;
        } else {
            virtualConsole.lines[virtualConsole.currentLine] = msg;
        }
        
        console.clear();
        
        virtualConsole.lines.forEach(function (line) {
            console.log(line);
        });
    },
    clear: function () {
        console.clear();
        virtualConsole.currentLine = 0;
    }
}

// =================================================
// Little demo to demonstrate how it looks.
// =================================================

// Write an initial console entry.
virtualConsole.log("Loading");

// Append to last line a few times.
var loadIndicatorInterval = setInterval(function () {
    virtualConsole.log(".", true); // <- Append.
}, 500);

// Write a new line.
setTimeout(function () {
    clearInterval(loadIndicatorInterval);
    virtualConsole.log("Finished."); // <- New line.
}, 8000);

直接的なコンソールインタラクションとミキシングする場合は必ず欠点があり、間違いなくugいように見えますが、確かにその有効な用途があり、それなしでは達成できませんでした。

10
John Weisz

出力を配列に収集してから、優先セパレータを使用して結合関数を使用します

function echo(name, num){
    var ar= [];
    for(var i =0;i<num;i++){
        ar.Push(name);
    }
    console.log(ar.join(', '));
}

echo("Apple",3)

Array.prototype.join（） モードの詳細も確認してください

var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());
// expected output: Fire,Wind,Rain

console.log(elements.join(''));
// expected output: FireWindRain

console.log(elements.join('-'));
// expected output: Fire-Wind-Rain
1
Ahmed Younes

@shennanのアイデアについての何か：

function init(poolSize) {
      var pool = [];
      console._log = console.log;
      console.log = function log() {
        pool.Push(arguments);
        while (pool.length > poolSize) pool.shift();
    
        draw();
      }
      console.toLast = function toLast() {
        while (pool.length > poolSize) pool.shift();
        var last = pool.pop() || [];
        for (var a = 0; a < arguments.length; a++) {
            last[last.length++] = arguments[a];
        }
        pool.Push(last);
    
        draw();
      }
      function draw() {
        console.clear();
        for(var i = 0; i < pool.length; i++)
          console._log.apply(console, pool[i]);
      }
    }
    
    function restore() {
      console.log = console._log;
      delete console._log;
      delete console.toLast;
    }
    
    init(3);
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);    // 1 will disappeared here
    console.toLast(5); // 5 will go to row with 4
    restore();
1
vp_arth

多くの行で印刷を停止することが唯一の目的である場合、1つの方法は、コンソール全体を埋めたくない場合に値をグループ化することです

PS：-出力については、ブラウザコンソールをご覧ください

let arr = new Array(10).fill(0)


console.groupCollapsed('index')

arr.forEach((val,index) => {
  console.log(index)
})

console.groupEnd()

console.group

console.groupCollapsed

1
Code Maniac

スプレッド演算子を使用して、出力を1行で表示できます。 javascript ES6の新機能。以下の例を参照してください

   for(let i = 1; i<=10; i++){
        let arrData = [];
        for(let j = 1; j<= 10; j++){
            arrData.Push(j+"X"+i+"="+(j*i));
        }
        console.log(...arrData);
    }

1行から10行の表が1行で印刷されます。

0
imran khan