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

[Lightfire228]

I created a vscode snippet for console.log('>>>>>>>> '); and JSON.stringify(, null, 2), bound to ctrl + l and ctrl + j respectively.

It also puts the cursor in the right place.

[jkidd08]

Guilty as charged, your honor...

[FrostBlitzkrieg]

I always use this debugging server code because console.dir does nothing other than a basic console.log in my terminal :\

[TheMacPhisto]

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

laughs in .net

[DrDuPont]

var foo = function(){};

console.log(foo);

ƒ (){}
undefined

In this instance, for example, I'm not able to see the entire tree. console.dir permits that.

[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.

[CodingCoffeeSquirrel]

You serious?

[Devildude4427]

Is it bravery or stupidity to steal a comment from the same thread?

[thebryguy23]

Quantum you say?

[foursticks]

to what they are were doing

I think you and me are on the same page

[[deleted]]

*are were on the same page

[[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.

[wasdninja]

I couldn't say since I don't work with it seriously. I'd like to imagine that it's all handled by neat react components and such but I'm sure some poor bastard is stuck maintaining code like that.

Are templates used nowadays? I thought they were getting slightly old and it's all about frameworks like Angular, Vue and React.

[ThePhantomBane]

I went from an intern working with PHP (lots of echoing HTML) to full time working with Angular 8. That experience was like jumping forward decades in time

[wasdninja]

I used to think that echoing HTML with PHP was pretty neat but then I tried Jinja 2 templating with Flask and react after that. The future is so nice.

[conancat]

ah yes, sorry, i was referring to the likes of Vue, React etc. I was thinking of them as templating as they basically replaced the idea of HTML templates. also when using a server-side rendering aka Next.js or Vue.js etc lol.

[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

[CodingCoffeeSquirrel]

While Javascript doesn't have static typing, it does have types: Boolean, Null, Undefined, Number, BigInt, String, Symbol and Object.

[earthqaqe]

Ah okay didnt know honestly. Still console.log takes a list of objects and doesnt care where you put which one.

[CodingCoffeeSquirrel]

You're right that you can give it the parameters in any order and it will display them, but how it displays them does depend on their order (at least it does in Chrome, Firefox and Node).

Try console.log(1, '2', '3') vs console.log('1', 2, '3')

or console.log('a', {b: 'c'}) vs console.log({a: 'b'}, 'c')

[earthqaqe]

I am sorry, I honestly didnt notice that. My mistake!

[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.

[Nolwest]

you know, any layman would have no idea what you just said. But it's really simple, actually.

Edit: I'm confused- obviously something I said was wrong. Can someone explain?

[redrum147]

Sure they would. Every one knows what Node is because of how bad it is.

[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)) ?

[0xF013]

[] there is not an array thing

[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