console.log( );

console

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

=" https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log.jpg" alt class=" wp-image-325978 jetpack-lazy-image" width =" 531" height=" 229 "data-recalc-dims=" 1" data-lazy-srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-2.jpg 1002w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-3.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-4.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-5.jpg 1000w" data-lazy-sizes= "( min-width: 735px )864px, 96vw "srcset="information: image/gif; base64, R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >< img loading=" lazy" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-1.jpg" alt class=" wp-image-325978 "width=" 531" height= "229" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-2.jpg 1002w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-3.jpg 300w

, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-4.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-5.jpg 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=" https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-17-at-12.43.48-PM.png?resize=770%2C108&is-pending-load=1#038;ssl=1" alt&class=" wp-image-325979 jetpack-lazy-image" width=" 770" height=" 108" data-recalc-dims=" 1" data-lazy-srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-1.png 1024w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-2.png 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-3.png 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-4.png 1000w, https://websitedesign-usa.com/wp-content/uploads/2020/11/console-log-5.png 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 *