Chrome JavaScript 개발자 콘솔 : 줄 바꿈없이 console.log ()를 호출 할 수 있나요?

console.log ()를 호출 할 때마다 새 줄 을 추가 하지 않고 메시지를 기록하기 위해 console.log ()를 사용하고 싶습니다 . 이것이 가능한가?

아니요, 불가능합니다. 모든 것을 한 줄에 넣으려면 문자열을 유지하고 연결해야합니다. 그렇지 않으면 출력을 다른 창에 넣어야합니다 (예 : 다른 창).

NodeJS에서는 process.stdout.write를 사용할 수 있으며 원하는 경우 '\ n'을 추가 할 수 있습니다.

console.log(msg)와 동일합니다 process.stdout.write(msg + '\n').

원하는만큼 많은 것을 넣을 수 있습니다 arguments.

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

객체 참조가 인라인으로 된 한 줄에 모든 출력을 얻은 다음 거기에서 검사자를 드롭 다운 할 수 있습니다.

예, 가능합니다 (아래 데모 확인)-네이티브 브라우저 콘솔 위에 자신 만의 가상 콘솔을 구현 한 다음 실제 콘솔과 동기화하면됩니다.

이것은 생각보다 훨씬 쉽습니다.

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

직접적인 콘솔 상호 작용과 믹싱 할 때 확실히 단점이 있고, 확실히 못 생기게 보일 수 있습니다.하지만 확실히 유효한 용도가 있습니다.

짧은 대답은 아니오입니다.

그러나

유스 케이스가 콘솔 부풀림을 피하면서 영구적으로 변경되는 데이터를 기록하려는 경우이를 달성하는 한 가지 방법 (특정 브라우저에서)은 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);

이로 인해 애플리케이션 내에서 발생하는 다른 로깅 기능이 손상 될 수 있습니다.

면책 조항 : 나는 이것을 해킹으로 분류 할 것입니다.

여러 줄에서 인쇄를 중지하는 유일한 목적은 전체 콘솔을 채우지 않으려면 값을 그룹화하는 것입니다.

추신 :- 출력을 위해 브라우저 콘솔을 참조하십시오

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


console.groupCollapsed('index')

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

console.groupEnd()

console.group

console.groupCollapsed

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

출력을 배열로 수집 한 다음 선호하는 구분 기호와 함께 조인 함수를 사용하십시오.

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

스프레드 연산자를 사용하여 출력을 한 줄로 표시 할 수 있습니다. 자바 스크립트 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 개의 표를 인쇄합니다.

예를 들어 줄 바꿈이없는 콘솔 로그 배열 요소를 원한다면 다음과 같이 할 수 있습니다.

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 

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