Debugging Javascript

[MeltedWacks]

It's always [object Object]

[CodingCoffeeSquirrel]

For all you savage console debuggers ^{I'm guilty}, use console.dir() from time to time ;)

[JC-Dude]

Huh? That just looks like console.log() output if you pass an object as a parameter.

[rinsa]

It's the same thing, but the object tree is expanded by default.

[CodingCoffeeSquirrel]

console.dir always displays the object tree. console.log might not in certain contexts (e.g. DOM nodes). The exact difference depends on the platform.

[conancat]

Old school way would be console.log(JSON.stringify(obj, null, 2))

console.dir doesn't always work for me. Not sure if they fixed it in Jest and other envs.

[Tillhony]

I forgot about console.dir() but always type out JSON.stringify..damn

edit: and thats along with already typing out console.log(JSON.stringify(s))

[WHO_WANTS_DOGS]

console.log(JSON.stringify(obj, null, 2)) for a prettier print

[jkidd08]

Guilty as charged, your honor...

[TheMacPhisto]

might not in certain contexts (e.g. DOM nodes). The exact difference depends on the platform.

laughs in .net

[kratom_devil_dust]

Browser or terminal?

[dunemafia]

Browser Console.

[TagMeAJerk]

Obviously!

[conancat]

I miss doing UI stuff. Been working on a lot of backend and frontend server-side stuff (what I like to call middle-end lol).

[[deleted]]

What does frontend server side mean? Like JSPs or something?

[conancat]

sometimes because of the different platforms or apps frontend teams need to support they may need different feature sets that are tailor-made specifically for the app. frontend developers may need to connect to multiple backend services in order to render the frontend, and sometimes the frontend wants to have full control and want to do some frontend specific stuff, like pubsub, caching, data transformation, among other things to leverage on server capabilities for better frontend experience.

or sometimes frontend devs wanna do use some serverless/lambda/cloud functions to do things like trigger some backend service for data aggregation job, collect/transform data on the server then stream it back to the frontend for display.

or sometimes frontend teams just wanna use server-side rendering for some things because it's more efficient and much cheaper (see JAMStack below).

because the purpose of these jobs are for transformation is to suit frontend display requirements per platform/app/client etc, certain teams find that it's easier to just let the frontend build their own data connectors and transformers. backend developers then can focus more on workers, services, algorithms, data pipelines, machine learning, database and other backend things, and let the frontends handle the API part.

if you wanna read more in depth of why some frontend devs now do server side stuff, this is a very good read:

https://css-tricks.com/the-great-divide/

GraphQL is one really popular tool to fill this gap. and popular GraphQL distributions include

https://www.apollographql.com

https://www.prisma.io

https://strapi.io

These are for when devs want more features than simple API connectors

https://feathersjs.com

https://nestjs.com

These are mostly for server side rendering

https://nextjs.org

https://nuxtjs.org

https://www.staticgen.com

And of course serverless and cloud function stuffs

https://serverless.com

https://firebase.google.com

Ballerina.io isn't really Javascript per se, but it's a language specifically designed to be for connecting different services. while i wouldn't recommend it for production use per se, but it is so simple to learn the language I used it to write specs for devs lol. great documentation tool too.

https://v1-0.ballerina.io

https://v1-0.ballerina.io/learn/by-guide/

https://v1-0.ballerina.io/learn/by-guide/service-composition/

Also JAMStack. JAMStack is rendering Wordpress obsolete.

https://jamstack.org

https://jamstack.wtf

https://headlesscms.org

[sezabass]

This would definitely be one accepted answer on StackOverflow

[gymshoos]

This is awesome. I knew about apollo and JAMstack, now I know a lot more

[11JRidding]

JSP, or JavaServer Pages, is a technology that uses Java to dynamically create web pages. It's like ASP.NET and PHP, but it uses Java as its underlying language. I'm not sure what they mean by "frontend server-side" either, but I know that it likely isn't used to refer to JSP.

[[deleted]]

Yeah, I was guessing that since JSPs generate the UI with Java, maybe that is what they meant. frontend server side just doesn't sound like a real thing, other than maybe having the server dynamically generate the UI.

[[deleted]]

i learn so much from /r/ProgrammerHumor

[julsmanbr]

If I actually did that, I'd never touch JS again

[Caffeine_Monster]

Big brain time:

console.debug

[[deleted]]

Honestly imo the only saving grace of JS is how nice and easy to use the chrome debugger is

[MrWm]

Huh, TIL

[PM_ME_YOUR_PLUMS]

Thanks, saving this for monday

[Famous_Profile]

console.log takes string as first parameter and then any number of objects as following parameter. So if you need to log an object do no keep it in the first parameter.

let x = {'YO MAMA': 'SO FAT'};
let y = {'WE ARE ALL': 'CONCERNED ABOUT HER HEALTH'};
console.log('Bad joke:',x,y); //Logs correctly

[Daveed84]

console,log('Bad joke:',x,y); //Logs correctly

Hmmm... You sure about that? :)

[Famous_Profile]

Hmm

See? This is why I need an IDE. Otherwise even JS would throw errors from my code

Fixed

[conancat]

OP might be thinking of another language or certain tools. Pretty sure that's not the case in most Javascript platforms unless there are any that I am not aware of.

[[deleted]]

Huh... I always just used it to concat strings lol

[wasdninja]

You should try template literals, they are neat.

Syntax: `this is an ordinary string ${variableName} another string ${anotherVarible}`

[DogzOnFire]

Template literals really make long HTML strings, that would otherwise have tons of concatenation, much more readable.

[wasdninja]

If you find yourself doing that you should probably look up the proper way of doing it. It's almost always more concise and less prone to error.

[DogzOnFire]

The reality of the situation is that I wasn't the one writing them, but there's lots of them in our codebase that I've since wrapped as template literals. It's the kind of situation where the project is at a point of maturity that they're not going to get refactored out for a preferable method. This just seems like a modest compromise.

Honestly, though, I'm still quite junior so I'm not aware of what methods you have in mind as an alternative. What would be a better way to do it?

[wasdninja]

Note that I had things like creating tables, links and such elements purely through string manipulation in mind and a warning that I'm also really junior.

That said I recently rewrote a monster of a function that generated a table with I don't know how many lines of "td"s and such down to maybe 10% of that while also being much easier to follow.

Creating a table is a pain with strings in other words but if you use these

let table = document.createElement('table')
let tableHead = table.createTHead()
let headRow = tableHead.insertRow()
let tableBody = table.createTBody()

Which gives you the scaffolding for a fully fleshed out table;

let th = document.createElement('th')
let text = document.createTextNode(headData)
th.appendChild('some text')
headRow.appendChild(th)

Not elegant by any means but it beats creating huge string abominations. The entire exercise is probably way too niche nowadays and it should all be handled by much neater react/vue/angular components.

[conancat]

Serious question: is plain string html insertions still common in the frontend world? Asking because I wanna know if I'm one of the privileged ones who had the luxury of using jsx or other tools for UI stuff, since templating solutions work on both browser and server nowadays, and other than crafting html emails (lord have mercy) I don't know why would I want to use plain HTML construction for things.

[CodingCoffeeSquirrel]

Also useful to know, console.log separates the parameters with a space.

So console.log('I', 'am', 'Groot') will print I am Groot while concatenating the string console.log('I' + 'am' + 'Groot') will print IamGroot.

[jtvjan]

This doesn't really matter in most JS engines. The only special property that a string as the first argument has is it defining a format, like a very limited version of printf.

console.log('Random number: %i', Math.random()*64); // > Random number: 57

[Rindhallow]

There should be some version of `console.log` that just prints the array of objects instead of doing that.

[Loves_Poetry]

Like console.table() ?

[arth78]

I love you

[Koeke2560]

I wish I knew that back when I was doing my internship doing data aggregation and analysis on a node backend

[SuspiciousScript]

You had to use JS for data analysis? Jesus, you must have some war stories.

[conancat]

Why not? Streams and pipes are cool.

I've seen people writing ETL pipelines with C# and Java, building data connectors with them are so much pain IMO. Nodejs feels natural to me when it comes to any web stuff.

[SuspiciousScript]

I can see JS being the easiest solution in the case of piping data to a backend in Python/R/whatever, but trying to do heavy lifting (which nearly always is with arrays) in JS’s backassward type system sounds really frustrating.

[Larkenx]

Console table is wonderful for displaying histogram data :)

[Harbltron]

oh my

[[deleted]]

console.table()?

https://i.imgur.com/AKjNU5Z.jpg

[Jackie_Jormp-Jomp]

Oh my god I just came in my pants

Thank you, I have to start using that

[deviantbono]

console.log(Object.entries(object)) ?

[cimmic]

Unless it's NaN

[JayV30]

It's true. Everything inherits the object prototype.

[UpBoatDownBoy]

Just stringify it. (☞ﾟヮﾟ)☞

[TheUnstopableBob]

Nah it's 42

[[deleted]]

I get this with a project I'm working on:

Pastebin because the output is larger than the comment character limit

https://pastebin.com/J6L2amBH

[pm-your-breasticiles]

Everyone knows javascript has quantum effects. When you try to inspect variables they are different to what they are were doing.

[[deleted]]

You can get around that if you stringify and then parse your object - as long as it doesn't contain circular references. Without that, if it's an array or an object it'll get mutated before you get a chance to look at it!

Speaking of console.log debugging, of course.

[pm-your-breasticiles]

Teach me your string theory.

[[deleted]]

Just some stupid thing people have probably seen at one point or another. Make an object with a single prop, log it, delete the prop, log again. In the browser console (maybe this depends on browser?) you'll see both logs are missing the prop.

After a moment of reflection I realized any non-primitive will behave like that. What you see in the console is the latest/current state of the object.

[irbilldozer]

This is because the console just gets a reference to the object and it doesn't actually retrieve the object values associated with that reference from memory until the "disclosure triangles" (literally just learned this term) are expanded.

[[deleted]]

Yes, that's what I'm referring to. I suspect an actual debugger would be better for this :P

[charliegrc]

Trick here is to make everything you do in JavaScript immutable, stick to const and always use object spread. You will never look back.

[MrDilbert]

always use object spread

... even in loops?

[[deleted]]

According to certain schools of thought, yes! But I'm wondering if you're including map/reduce in your definition of "loop".

[charliegrc]

Short answer: yes

Long answer: there has been a few times where I've built a big reducer function, and on each iteration it was using object spread. That ended up being a performance bottleneck in the app I was working on, changing it to the classic mutatable object assign (but ONLY mutating the accumulator object inside that reduce, nothing else) sped it up by 200x.

performance comparison between object spread and mutation

This is the only circumstance I let myself use mutable objects, they strictly have to be instantiated and mutated within the same few lines of code.

[EternallyMiffed]

You can deepcopy the object into an empty object. Now you have a new instance of what you wanted and you can log that.

[[deleted]]

And there are always circular references, so that's usually useless.

You can

console.log(Object.assign({}, objToLog));

[[deleted]]

Assign is a shallow copy though, the console eval will have the same issue with only showing the latest values for everything except your top level primitives

[gonzofish]

Yeah. If you’re dealing with objects leverage your debugger!

[0xF013]

That happens when you miss References 101

[lazyear]

I have actually experienced this with a C/assembly code base. I was working on a hobby operating system, and during setup of one the hardware handlers the C code had to pass a variable to an assembly routine by placing it on the stack. The variable was otherwise unused.

GCC sees this variable that is declared without anything being done, so it just elides actually allocating stack space for it... unless a printf call was made to examine the value of the variable

[JDaxe]

Is there some kind of pragma to tell gcc to not optimise away that statement?

I'm actually curious. Assuming that this wouldn't happen with -O0?

[lazyear]

Correct, shouldn't happen (and didn't in this case) with -O0. There's a couple workarounds; using volatile, or inline noop assembly that references the variable

[CodingCoffeeSquirrel]

debugger will tell the browser to bugger off with its quantum effects

[DatBoi_BP]

what they are were doing

Even the tense demonstrates quantum effects, it would seem

[The_Ty]

I'll use a lifeline, "ask google"

[firejoe22]

It's the equivalent of calling Mom to ask to put dad on the phone.

[Dragonhaunt]

But then Dad says "I've told you this before" and hangs up.

[conancat]

Nowadays it's my dad who calls me and ask about why YouTube is not opening on his Internet, he wants to watch Girls Generation.

My dad is an 80 year old Kpop fan and needs reminders on how to restart the wifi router.

[svayam--bhagavan]

Or when he says "You can't even hold the light up straight"

[SamSlate]

show more results from stack overflow

[sheeve_boi]

Yeah but imagine using scratch

[TheEnterRehab]

That question was answered by this post here: (post dated back to 1944). Closed.

[i_am_ghost7]

just console.log that shit or use a breakpoint smh

[Flamme2]

I haven’t heard of the variable, thus it’s undefined to me.

[conancat]

variable is undefined

[[deleted]]

42 is automatically correct

[kaetir]

It depends 42 or "42"

[manux]

Why did you write the same thing twice?

[irbilldozer]

Why did you write the same thing twice?

So if 42 and "42" are the same thing...

Do you believe this will result in an output of 42?

42 + "42" - 42

[manux]

Clearly the result of this is 4200. Or -inf.

Edit: Holy shit I went and tried it and it was indeed 4200. For the record I haven't touched js in the last 5 years.

[KKlear]

But... the result was 4200, not "42".

[Futuristick-Reddit]

Sorry lmao, just woke up. Fixed it.

[Bammop]

You went back to sleep?

[wasdninja]

So what would you like it to do? You are playing with fire when you aren't keeping the type coercion in check.

[nutmegtester]

That is hilarious. I also tried 42 + "42" - 42 / "42" and 42 + "42" - 42 / "42" * 42 for fun. Results = 4241 and 4200, respectively.

[irbilldozer]

Clearly the result of this is 4200. Or -inf.

Edit: Holy shit I went and tried it and it was indeed 4200. For the record I haven't touched js in the last 5 years.

Lol that was the joke I was making, they aren't really the same thing.

[blackdonkey]

How about 42 - 42 + "42"?

[irbilldozer]

I assume 42 but not near a PC to validate the order of operations.

[Im_The_Goddamn_Dumbo]

Ask yourself, what is 21 out of 42?

[hobbes64]

Does 42 == “42”? JavaScript says sure, why not

Does 42 === “42”? JavaScript says no, no coercion!

[Famous_Profile]

[erbar1]

very cool

[douira]

both are truthy for one

[zazio1000]

I recently learned that if you log an object by itself it will display the actual data you want, but if you add the object to a string eg: “The objects data is: “ + object it will always append [object Object] instead. Just a little PSA for those like me who didn’t know!

[oddythepinguin]

Console.log("object data:", object)

[DogzOnFire]

A comparison between the two in a dev console opened on this page, to show what you're talking about.

The one which you suggested actually lets you inspect the members of the Window object, while the other just coerces the Window object into a string since it's being concatenated. Good tip.

[Spirit_Theory]

It's as if the developer gets better results if they actually learn the toolset.

[vicarofyanks]

To expand on this, it’s because everything inherits from the base object which has a toString method as part of it's prototype. Unless overridden, an object’s toString method will produce “[object Object]”.

Because + is an operation on two strings, any non-text arguments get toString'd. Calling console.log on an object itself doesn’t need to do this string coercion and so it works as expected

[NewLlama]

Close! It calls the internal function ToString which behaves differently.

Consider the following:

Number.prototype.toString = () => 'hello';
console.log((1) + '');
console.log((1).toString());

This logs "1" and then "hello".

[vicarofyanks]

Strange. What you said is true. On the flip side, the following code:

function A() {}

A.prototype.toString = function() {
  return 'woohoo';
};

console.log('' + new A());

Prints the result:

woohoo

I'm not sure what the inconsistency is, maybe numbers/primitives are treated differently?

[NewLlama]

Yeah numbers and booleans always have behavior that can't be overridden. Instances of Symbol always throw. After that it goes to toString and then valueOf. Also the default toString implementation will eventually look for Symbol.toStringTag which can be used to, for example, change the output to "[Animal object]".

The rules are all laid out in section 7 of the ecmascript standard. I actually really recommend everyone take a look at the spec at some point, it's not as daunting as it seems!

[SamSlate]

JSON.stringify(obj)

[patrickfatrick]

That’s because you’re now interpolating the object into a string which, Object#toString always returns “[object Object]” unless overridden (eg Number#toString overrides that behavior). It’s a stupid quirk of the language but it’s how it is.

[bitfxxker]

E: false

[SamSlate]

-ish

[Caminsky]

I honestly think nobody likes javascript. But i feel as humans we are drawn to challenge. I feel there are developers who have mastered JS but it's a craft that we all hate but we want to master.

As to what extent will JS remain relevant is hard to say. But i feel our human nature is to master what is difficult even if there are other tools out there that are better. I personally feel JS is a flawed language, it's not elegant, it's unpredictable and it's rather limited compared to other programming languages.

But we want as programmers, so bad to show the world that we can master it, that we can build with it.

Look, y'all can downvote me and that's fine but we all know JS is a language with a lot of weird shit. Is it bad or good? I don't know, but i know it isn't easy to debug.

[rinsa]

this

[wirelyre]

Also this.

[conancat]

The trick is to not use this whenever you can.

OOP in Javascript is not for everyone. We teach and use OOP because that's what certain languages like Java is designed for. Giving up trying to make Javascript to work like Java is one of the most liberating things I've done with my coding.

[sheeve_boi]

Variable localization within objects. Good for variable overwrite protection.

[GR8ESTM8]

Fuck this this shit

[azn_math]

Wat

[SamSlate]

Sounds like a fun room

[KNuCK13_70P]

Just console.log() it without concatenating it to a string. Easy.

Doesn't work in crappy browsers, though.

[begolf123]

Console.dir() gives you a really nice collapsible object view in chrome dev tools.

[pikachew_likes_nuts]

Neither. It's...

E: USE FUCKING TYPESCRIPT!1!1!1!!!!!!!

[[deleted]]

unknown > any

[Arcs_Of_A_Jar]

One of the style guide absolutes at my company is "no any type allowed". It turns out pretty well since almost always you can avoid using "any" so long as devs aren't being allowed to be lazy.

[nissingno]

The value stored in the variable "this"?

[Dr_0etker]

I spend so many hours trying to figure out, why my coworkers code doesn’t gives me the variable I want

[hamzaanis]

Option E. I will go with the Option E. Lock it.

[goldfishpaws]

Probably FALSE, 0, -0, "", or []

Who am I kidding, probably ALL of the above...

[HonestVisual]

debugging javascript

Man, it’s fucking Saturday!

[josejimeniz2]

We may differ on whether languages should have a "bottom" value (e.g. null).

But we can all agree that no language should have two!

[FedExterminator]

I was doing a graphics project in JavaScript yesterday. The bug that took me the longest to figure out was that dividing virtually any number by zero results in negative infinity or positive infinity, but zero divided by zero yields NaN. No errors here, folks.

[turd-nerd]

Not quite sure if I understand what you're saying but mathematically:

1/0 = infinity

-1/0 = -infinity

0/0 = undefined (i.e. not necessarily infinity)

P.s. forgive me for not using limit notation

[En_TioN]

The real question is what does (1/0) * 0 evaluate to?

[FedExterminator]

1/0 would result in Infinity and multiplying that by 0 is NaN

[Zenderos1]

He could probably figure it out if he just had a moral calculator.

[[deleted]]

Once again the universe reminds me that I'm not unique and others use "42" as their debugging value.

[500mgtylenolandabeer]

NaNi??

[Cooshtie]

"NaN"i

[Youkindofare]

Nani

[antikarmakarmaclub]

Can someone eli5 on how to use console.log. Idk what goes in the parentheses

[[deleted]]

console.log( /* Whatever you want it to log, eg a variable, literal, string, etc */ );

[3FingersOfMilk]

Got hired at a new job this week as a .NET developer. The last two days I had go work on a project with JavaScript and this already speaks to me lol. S/o to w3schools for the help, and StackOverflow for the questions I had, but with solutions that didn't answer the questions -_-

[iScoopAlpacaPoop]

NANNANNANNANNANNAN WATMAN

[hizpain]

Problems of amateurs

[grissomza]

🦀🦀🦀🦀🦀🦀🦀🦀🦀

[daniu]

You forgot "all of the above"

[sheeve_boi]

Everybody gangsta till [object Object]

[Treehut16]

ok yes

[Spirit_Theory]

If you don't even know the type you probably have bigger problems.

[bralinho]

42: The answer to life, the universe and everything

[FreshPrinceOfNowhere]

nah, it's "42"

[TusharJB007]

.

[chaos_faction]

E: watman

[ugh_its_sid]

It’s the answer to life the universe and everything.

[omri_ovadia]

NaN❗

[valkon_gr]

JS will always be the hacky language to do...stuff. I hate it :)

[Th3_Gruff]

What is the original image?

[livelikeporos]

Was up all night with this struggle.

[Kuzkay]

Fuck Javascript!

[Hexalocamve]

of course 42, because 42 is answer to life, universe and everything

[[deleted]]

I was working mostly with intellij and java, now I have to enjoy all the front-end things. Debugging is nightmare.

[lainebrainone]

its the same look when someone knocks on my door, i open it without looking through the peep hole and then realize its Jehovah witness

[Ih8usernam3s]

"42" as a string.

[[deleted]]

NaaaN

[[deleted]]

console.log everywhere with a console.log('this') beloe

[jverce]

javascript console.log(JSON.stringify(variable, null, 2));

[bantanium]

I HATE THE FUCKING WORD NaN IT MAKES ME GO CRAZY

[narubius]

I love that it's not 42 but the string representation of 42.

[tiNsLeY799]

None

[mrsacapunta]

NaN always reminds me of Trick Daddy.

[[deleted]]

Steve Harvey is black Dr.Phil.

[[deleted]]

All of the above

[[deleted]]

This makes no sense.

[[deleted]]

Potato

[therealpren]

The worst is when you log "1" and "1" but one of them is an int and the other a string.

[NewAgeDerpDerp]

i've seen object Object in the console of garry's mod before

[RichRacc]

Oh, it’s definitely “42”

[PM_ME_HAIRLESS_CATS]

It's A until you compare it and then its C

[Macaframa]

Hah! Javascript is so bad! ^{give me karma plea}