Chrome JavaScript developer console: Is it possible to call console.log() without a newline?

前端 未结 12 852
生来不讨喜
生来不讨喜 2020-11-29 05:07

I\'d like to use console.log() to log messages without appending a new line after each call to console.log(). Is this possible?

相关标签:
12条回答
  • 2020-11-29 05:34

    No, it's not possible. You'll have to keep a string and concatenate if you want it all in one line, or put your output elsewhere (say, another window).

    0 讨论(0)
  • 2020-11-29 05:35

    collect your output in an array and then use join function with a preferred separator

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

    check also Array.prototype.join() for mode details

    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 讨论(0)
  • 2020-11-29 05:36

    You can put as many things in arguments as you'd like:

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

    You'll get all that output on one line with the object references inline and you can then drop down their inspectors from there.

    0 讨论(0)
  • 2020-11-29 05:38

    Yes, it's possible (check out the demo below) -- by implementing your own virtual console on top of the native browser console, then syncing it to the real one.

    This is much easier than it sounds:

    1. maintain a display buffer (e.g. an array of strings representing one line each)
    2. call console.clear() before writing to erase any previous contents
    3. call console.log() (or warn, error, etc) to fill the console with the contents from your display buffer

    Actually, I've been doing this for some time now. A short, rudimentary implementation of the idea would be something along the following lines, but still capable of animating the console contents:

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

    It sure has its drawbacks when mixing with direct console interaction, and can definitely look ugly -- but it certainly has its valid uses, which you couldn't achieve without it.

    0 讨论(0)
  • 2020-11-29 05:38
    // 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);
        }
    }
    
    0 讨论(0)
  • 2020-11-29 05:45

    Useful for debugging or learning what long chained maps are actually doing.

    let myConsole = (function(){
        let the_log_buffer=[[]], the_count=0, the_single_line=false;
        const THE_CONSOLE=console, LINE_DIVIDER='  ~  ', ONE_LINE='ONE_LINE',     
              PARAMETER_SEPARATOR= ', ', NEW_LINE = Symbol();
              
        const start = (line_type='NOT_ONE_LINE') => {
            the_log_buffer=[[]];
            the_count=0;
            the_single_line = line_type == ONE_LINE;   
            console = myConsole;  
        }
        const stop = () =>  {
            isNewline();
            console = THE_CONSOLE; 
        };                          
        const isNewline = a_param => {
            if (the_single_line && a_param==NEW_LINE) return;
            const buffer_parts = the_log_buffer.map(one_set=> one_set.join(PARAMETER_SEPARATOR))
            const buffer_line = buffer_parts.join(LINE_DIVIDER);    
            if (the_single_line) {                           
              THE_CONSOLE.clear();
            }
            THE_CONSOLE.log( buffer_line ); 
            the_log_buffer = [[]];
            the_count=0;
        }
        const anObject = an_object => {            
            if (an_object instanceof Error){
                const error_props = [...Object.getOwnPropertyNames(an_object)];
                error_props.map( error_key => an_object['_' + error_key] = an_object[error_key] );
            }
            the_log_buffer[the_count].push(JSON.stringify(an_object));
        }
        const aScalar = a_scalar => {
            if (typeof a_scalar === 'string' && !isNaN(a_scalar)) {
                the_log_buffer[the_count].push("'" + a_scalar + "'");
            } else {
                the_log_buffer[the_count].push(a_scalar);
            }
        }
        const notNewline = a_param => typeof a_param === 'object' ? anObject(a_param):aScalar(a_param);
        const checkNewline = a_param => a_param == NEW_LINE ? isNewline(a_param) : notNewline(a_param);
        const log = (...parameters_list) => {   
            the_log_buffer[the_count]=[];
            parameters_list.map( checkNewline );
            if (the_single_line){
                isNewline(undefined);
            }else{
                const last_log = parameters_list.pop();
                if (last_log !== NEW_LINE){
                    the_count++;
                }
            }
        }
        return Object.assign({}, console, {start, stop, log, ONE_LINE, NEW_LINE});
    })();
    
    function showConcatLog(){
        myConsole.stop();
        myConsole.start();
        console.log('a');
        console.log('bb');  
        console.dir({i:'not', j:'affected', k:'but not in step'})
        console.log('ccc');
        console.log([1,2,3,4,5,'6'], {x:8, y:'9'});
        console.log("ffffdd", 1, '2', 3, myConsole.NEW_LINE);
        console.log("z", myConsole.NEW_LINE, 8, '7');
        console.log(new Error("error test"));
        myConsole.stop();
    }
    
    myConsole.start(myConsole.ONE_LINE);
    var stop_callback = 5;
    function myCallback(){
        console.log(stop_callback, 'Date.now()', myConsole.NEW_LINE, Date.now());
        stop_callback--;
        if (stop_callback>0){
            window.setTimeout(myCallback, 1000);
        }else{
            showConcatLog();
        }
    }       
    window.setTimeout(myCallback, 1000);
    
    0 讨论(0)
提交回复
热议问题