When tracing out variables in the console, How to create a new line?

Question

So I'm trying to do something simple, I want to break up my traces in the console into several lines, using 1 console.log statement:

console.log('roleName = '+roleName+' role_ID = '+role_ID+' modal_ID = '+modal_ID+\n+'related = '+related);

How would you write the above to trace out the following?

roleName = test
role_ID = test
modal_UD = test
related = test

instead of roleName = test role_ID = test modal_UD = test related = test

I've checked out several other questions which appear similar, but none have helped or are talking about a different thing.

Thanks for taking a look!

score 196 · Answer 1 · answered Apr 26 '13 at 15:01

196

You should include it inside quotes '\n', See below,

console.log('roleName = '+roleName+ '\n' + 
             'role_ID = '+role_ID+  '\n' + 
             'modal_ID = '+modal_ID+ '\n' +  
             'related = '+related);

answered Apr 26 '13 at 15:01

Selvakumar Arumugam

79,297
15
120
134

1

Sweet this was it thanks! I needed to see how it was written out – Leon Gaban Apr 26 '13 at 15:24

score 44 · Accepted Answer · answered Jun 23 '16 at 00:40

In ES6/ES2015 you can use string literal syntax called template literals. Template strings use backtick character instead of single quote ' or double quote marks ". They also preserve new line and tab

const roleName = 'test1';
const role_ID = 'test2';
const modal_ID = 'test3';
const related = 'test4';
        
console.log(`
  roleName = ${roleName}
  role_ID = ${role_ID}
  modal_ID = ${modal_ID}
  related = ${related}
`);

score 12 · Answer 3 · answered Apr 26 '13 at 15:00

12

Easy, \n needs to be in the string.

answered Apr 26 '13 at 15:00

Andrei Nemes

3,062
1
16
22

score 8 · Answer 4 · answered Apr 26 '13 at 15:08

Why not just use separate console.log() for each var, and separate with a comma rather than converting them all to strings? That would give you separate lines, AND give you the true value of each variable rather than the string representation of each (assuming they may not all be strings).

console.log('roleName',roleName);
console.log('role_ID',role_ID);
console.log('modal_ID',modal_ID);
console.log('related',related);

And I think it would be easier to read/maintain.

I was looking for a way to format the code like how @Vega wrote it... more cleaner imho — Leon Gaban, Apr 26 '13 at 15:26

score 5 · Answer 5 · answered Apr 26 '13 at 15:01

5

You need to add the new line character \n:

console.log('line one \nline two')

would display:

line one

line two

answered Apr 26 '13 at 15:01

Justin Bicknell

4,804
18
26

score 4 · Answer 6 · answered Apr 21 '15 at 15:34

The worst thing of using just

console.log({'some stuff': 2} + '\n' + 'something')

is that all stuff are converted to the string and if you need object to show you may see next:

[object Object]

Thus my variant is the next code:

console.log({'some stuff': 2},'\n' + 'something');

score 4 · Answer 7 · edited Aug 06 '15 at 04:04

4

console.log('Hello, \n' + 
            'Text under your Header\n' + 
            '-------------------------\n' + 
            'More Text\n' +
            'Moree Text\n' +
            'Moooooer Text\n' );

This works great for me for text only, and easy on the eye.

edited Aug 06 '15 at 04:04

IlPADlI

1,943
18
22

answered Jul 15 '15 at 17:56

misterzik

1,740
1
16
20

ivanzoid · Answer 8 · 2022-06-30T15:12:19.427

You may use multiline template literals, but you'll need to break formatting to avoid unneeded whitespace at the beginning of each line:

const roleName = 'Read';
const role_ID = '887623';
const modal_ID = '346433';
const related = 'related';

function foo() {
    if (true) {
        if (true) {
            console.log(
               `roleName = ${roleName}
                role_ID = ${role_ID}
                modal_ID = ${modal_ID}
                related = ${related}`
            );            
        }
    }
}

foo();

function bar() {
    if (true) {
        if (true) {
            console.log(
`roleName = ${roleName}
role_ID = ${role_ID}
modal_ID = ${modal_ID}
related = ${related}`
            );            
        }
    }
}

bar();

Instead, you may put your strings to array and call .join('\n'):

const roleName = 'Read';
const role_ID = '887623';
const modal_ID = '346433';
const related = 'related';

console.log([
    `roleName = ${roleName}`,
    `role_ID = ${role_ID}`,
    `modal_ID = ${modal_ID}`,
    `related = ${related}`
    ].join('\n')
)

When tracing out variables in the console, How to create a new line?

8 Answers8

Linked