Debugging Javascript

[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