Chrome JavaScript開発者コンソール:改行なしでconsole.log()を呼び出すことは可能ですか?


91

console.log()を呼び出すたびに改行追加せずに console.log()を使用してメッセージをログに記録したいと思います。これは可能ですか?


10
答えの1つは正しかったですか?
newenglander

@minitechの答えは正しいと思います:それは不可能です。他の回答は、console.log()を理解する上で、多少直交しているものの、興味深い深さを提供します。
Dave Land

1
@DaveLand私は、独自のディスプレイバッファーを維持し、そのディスプレイバッファーを実際のコンソールにとなどの組み合わせで同期することで、完全に可能であると考えています。console.clear()console.log()
John Weisz 2017年

1
@JohnWeisz:ありがとうございます。ただし、「インライン」更新ごとにコンソール全体をワイプすることは、アプリケーションの約99%に対する解決策ではありません。それでも、おかしなことがある。
Dave Land

@DaveLandええ、それはハックのようなものです-そして今私が周りを見回していると、私はそれが以前に提案されたことに気づきました。いずれにせよ、それは時々役に立ちます。
John Weisz 2017年

回答:


43

いいえ、それは不可能です。すべてを1行にしたい場合は、文字列を保持して連結するか、出力を別の場所(たとえば、別のウィンドウ)に置く必要があります。


2
実際には可能ですが、誰もが使用できるとは限りません。私の場合、コマンドライン端末から入力を取得するために質問を印刷しようとしていました。その答えは、この質問に対する回答を参照してください。stackoverflow.com/questions/26683734/...
deltaray

2
@deltaray readline questionはありませんconsole.log。問題は、Node.jsではなく、ブラウザコンソールに関するものでもあります。
Ry-

@minitechスプレッドオペレーターを使用して1行で印刷できます。例を参照jsfiddle.net/imranqau5373/7m65at9L/2
imran khan

@imrankhan:それは問題ではありませんでした。スプレッド演算子は、複数の引数を渡す/を使用する場合と比較して、ここでは何も追加しませんapply
Ry-

40

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

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


13
NodeJSはChromeではありません。この回答は、「改行なしでconsole.logを実行できますか?」という質問とは無関係です。
アレックス

18

あなたはarguments好きなだけ多くのものを入れることができます:

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

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


61
これはどのように質問に答えますか?
JohnAllen

16
この答えは役に立ちます。

12
これは便利です。それは質問に答えませんが、ほとんどの人がこの質問を見つけたときに探しているものへの解決策を提供します。
ショーンリンチ

改行なしで印刷したい理由は、次の出力が不明であるためです。または、ドットなどを使用した「ローダーバー」を想像してみてください。
Karl Adler、

複数の引数を使用すると、最初の引数内でのみスタイルを設定できるため、console.logのスタイルが無効になります。
Qwerty 2018

17

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

これは思ったよりずっと簡単です:

  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);

確かに、コンソールの直接操作と組み合わせる場合には欠点があり、見苦しく見える可能性があります-確かに、有効な用途があり、それなしでは達成できませんでした。


2
これがここでの最良の答えです。ログスタックを十分に短く保つsay max行を使用して初期化することもできるため、大量のデータセットをログに記録することにはなりません。
Matt Way

12

短い答えはノーです。

だが

コンソールの膨張を回避しながら、永続的に変化するデータをログに記録しようとするユースケースの場合、これを達成する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);

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

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


3
非常にハックですが、賢いです。すでにコンソールに記録されているものを追跡した場合(たとえば、ある種の仮想バッファーを維持することで)、バッファーを再構築し、クリアするたびに新しい文字列を追加できます。
danShumway 2016年

2

多くの行で印刷を停止する唯一の目的が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

@シェナンのアイデアについての何か:


1

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

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

0

スプレッド演算子を使用して、出力を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

たとえば、改行なしのコンソールログ配列要素が必要な場合は、次のようにすることができます

const arr = [1,2,3,4,5];

Array.prototype.log = (sep='') => {
    let res = '';
    for(let j=0; j<this.lengthl j++){
        res += this[j];
        res += sep;
    }
    console.log(res);
}

// console loging

arr.log(sep=' '); // result is: 1 2 3 4 5 

-3
// Source code for printing 2d array
window.onload = function () {
    var A = [[1, 2], [3, 4]];
    Print(A);
}

function Print(A) {
    var rows = A.length;
    var cols = A[0].length;
    var line = "";
    for (var r = 0; r < rows; r++) {
        line = "";
        for (var c = 0; c < cols; c++) {
            line += A[r][c] + " ";
        }
        console.log(line);
    }
}

1
A.forEach(row => console.log(row.join(' ')))
vp_arth
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.