console.log( );


I believe this may be my most popular tweet of perpetuity, however I’m uncertain how to validate that nowadays. I’ll reiterate this cool little technique here since blogging is cool and enjoyable.

I utilized to do this a lot while debugging JavaScript:

< pre rel=" JavaScript "class=" wp-block-csstricks-code-block language-javascript" data-line > console.log(" myVariable:", myVariable ); Now I do this since it's simply much easier to type rapidly:< pre rel =" JavaScript" class=" wp-block-csstricks-code-block language-javascript" data-line

> console.log( myVariable);

And you do not lose out on anything in DevTools:< img loading=" lazy" src

="" alt class=" wp-image-325978 jetpack-lazy-image" width =" 531" height=" 229 "data-recalc-dims=" 1" data-lazy-srcset=" 1002w, 300w, 768w, 1000w" data-lazy-sizes= "( min-width: 735px )864px, 96vw "srcset="information: image/gif; base64, R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >< img loading=" lazy" src="" alt class=" wp-image-325978 "width=" 531" height= "229" srcset=" 1002w, 300w

, 768w, 1000w" sizes ="( min-width: 735px) 864px, 96vw " data-recalc-dims=" 1" > Now that this is an article, I can elaborate a smidge ... The output display screen there( and actually, console.log itself) is a DevTools thing, however the syntax isn't. By utilizing curly brackets in JavaScript, I'm producing an item. I do not need to

appoint a challenge anything, it can simply be.
< pre rel =" JavaScript" class=" wp-block-csstricks-code-block language-javascript" data-line > foo: "bar".
You see that a lot when passing a challenge a function, like

myFunction( );. The "technique" is that when you're making an item, you can" shorthand" it by supplying just a variable, that makes it suggested). Like:

const fruit=" apple";// Shorthand. let x= console.log( x);// Regular method, actually the very same precise thing. x =" fruit": fruit. console.log( x);// similar When you have a variable and you log it like console.log (myVariable); you're utilizing that shorthand things development syntax and it gets logged like the item it ends up being. One strike versus this concept is that often DevTools picks to output it as ▶ Things and you need to click to open to see the worth. I do not understand what the heuristics are of when it picks to do that and when it does not . If you do not like that, or the output format of a things in basic, you may choose the console.table( myVariable); format:< img loading=" lazy" src=";ssl=1" alt&class=" wp-image-325979 jetpack-lazy-image" width=" 770" height=" 108" data-recalc-dims=" 1" data-lazy-srcset=" 1024w, 300w, 768w, 1000w, 1410w" data-lazy-sizes="( min-width: 735px) 864px, 96vw" srcset=" information: image/gif; base64, R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >

Leave a Reply

Your email address will not be published. Required fields are marked *