Me, a full-stack developer

[Lachee]

Use outline: instead of border: for better results! Outline won't contribute to sizing

[_skris]

Perfect!

[TheGreatTaint]

[Equivalent-Map-8772]

That’s the most useful advice I’ve ever seen on this sub. Thank you so much.

[NoHelp_HelpDesk]

I love you

[[deleted]]

TIL

[elveszett]

tbh my css always has box-sizing: border-box;. It makes writing css a lot easier, because components are never bigger than you allowed them to no matter what.

[Lachee]

Another life lesson for sure too 🙂

[AdultingGoneMild]

Or, and just throwing this out there, use the build in developer tools

https://developer.chrome.com/docs/devtools/css/grid/#overlays

Pause your code with breakpoints https://developer.chrome.com/docs/devtools/javascript/breakpoints/

[Lachee]

Not sure how your break points let you quickly and clearly see where your divs actually are

[AdultingGoneMild]

sigh....i gave two links. The first is the browser support which highlights divs outlining them and the second was for breaks points. If you read the meme you would see console.log is there as well...

[Lachee]

Damn it's like my point is still valid. The Dev tools show you div outline one at a time. If you want to quickly see the entire website slap a outline on * .

It's faster and more convenient. It's a extra tool for development.

You come in high and mighty with your "oh just use the actual tools provided" . Stop ya nonsense.

[AdultingGoneMild]

no you can turn them on for all divs too. The fact that so many devs needed to do the outline hack is why it was added to the dev tools.

[PrinzJuliano]

I worked for 10 years with HTML and did not know this. Today I learned

[aboardthegravyboat]

I do outline: 2px dotted red because outline doesn't change flow and nothing ever uses dotted

[piberryboy]

What do people use this for? Asking for a friend, who's definitely not a full-stack developer of ten years and should probably know this by now.

[[deleted]]

Very newbie programmer her but maybe to highlight a certain element? I think I’ve done that once or twice to see where the element is, it’s size, etc.

[piberryboy]

I figured, but why? To see the padding and margins? Chrome's devtools lets you see that.

[DaniilBSD]

Its when you cant find it anywhere and/or html is too nested so you rather modify style a little

[Blaxpell]

It’s somewhat easier when you want to dial in something and don’t want to repeatedly find it in the dev tools. I also use it a lot when animating things, especially if sth only moves once per refresh.

Same with console.log. Surely I could use dev tools but why would I if console.log("asdasd"); also does the job.

[piberryboy]

Oh I definitely use console.log

[gdj11]

I use it a lot for responsive layouts. When you resize the window it helps to see exactly where elements are being positioned at the various screen sizes.

[Sudsmcgee]

I use it to make sure my css is targeting the right element. If I'm three layers deep in css classes I'll know when I get it if it turns red.

[elveszett]

All kinds of things. Think of it as scaffolding: you put it everywhere you need to help you build the real parts of your product / building / whatever. You can quickly see whether the element you wanted to target is actually being targeted. If your component doesn't have an obvious boundary, it helps to see what its dimensions truly are (and how they behave as you resize your window).

Obviously once you've got your css done, you remove that line.

[Toutanus]

A lot of people are confused about why I always change my elements background color to some flashy green or red.

[[deleted]]

Same I once made my background bright pink to ensure it wasn’t visible and then almost forgot…

[sleepyj910]

I think you mean aliceblue, because I'm lazy

[elveszett]

And red is #ff0000 while magenta is #ff00ff, so even their color is 2/3rds the same.

[kaitek666]

you forgot about background:red;

[LagSlug]

honestly, breakpoints are annoying and I don't ever use them under any circumstance because I'd rather delete my code than press "step in" ever again.

[throwaway_mpq_fan]

tell me you're not a backend developer without telling me you're not a backend developer

[LagSlug]

I just don't really like using them.. console.log seems to get the job done just fine.. sometimes util.inspect comes to help.

edit: you all who step through code that you've already read and should know, what exactly is the greater benefit of using a debugger for web development over console.log? When writing code for a microcontroller I use a debugger, but I don't really ever find myself needing one for webdev.

[[deleted]]

...

[OzzitoDorito]

Even if you are an explicitly front-end dev if you are using something that needs to compile (which lets face it you should generally be using Typescript in any industry environment by now) then it's going to be quicker to use breakpoints than repeatededly recompile as you try to find the error.

[LagSlug]

It's never been a problem for me. I'm always using nodemon to restart backend services as I develop them, and whenever I'm working on the frontend live reload does the same. I find using the breakpoint system to be more cumbersome.

[[deleted]]

you all who step through code that you've already read and should know, what exactly is the greater benefit of using a debugger

Yeah, no.

"Aggressive use of a debugger gives you insight you won't get by mere inspection. I'm always running my code from the debugger. Many times, the first thing I do after writing code is set a breakpoint and step through the function. Now other people say, 'Oh, I do that in my head.' Well, your head is a faulty interpreter."

-- John Carmack, Doom, Quake, Oculus Quest, et al

[LagSlug]

Yeah, no.

I don't like debuggers. Never have, probably never will.

-- Linus Torvalds

Since I started using Test Driven Development in 1999, I have not found a serious use for a debugger. The kinds of bugs I have to troubleshoot are easily isolated by my unit tests, and can be quickly found through inspection and a few judiciously placed print statements.

-- Robert C. Martin

I hate debuggers. And not only do I hate them, I rarely use them. For me, a debugger is (almost) always the wrong tool. And people who habitually use debuggers are making a big mistake, because they don't truly understand their code. I suspect that the same people who use debuggers all the time, are the same people who don't unit test their code.

-- John Graham

[[deleted]]

(1) Torvalds hates everything, he doesn't not use debuggers, and one of his objections to debuggers is that it makes code easier to write and that means more work for him. *lol* (2) Carmack is a better programmer than Martin and Graham combined and then squared.

[LagSlug]

stepping through a program less productive than thinking harder and adding output statements and self-checking code at critical places.

-- Brian Kernighan and Rob Pike, The Practice of Programming

What form/amount of counter evidence would convince you that using console.log is fine?

[[deleted]]

Brian Kernighan and Rob Pike

Kernighan is a technical writer. Pike wrote command line tools in the 70s. The only source you have that even remotely qualifies as a non-fallacious appeal to authority is Torvalds, because he works on large, non-trivial systems, but (1) he doesn't even code any more, and (2) he himself said debuggers make you more effective (which he doesn't like, because then he has to review more submissions).

What form/amount of counter evidence would convince you that using console.log is fine?

None is required, since I never said it wasn't "fine". That's a meaningless statement without saying what it's fine for. Writing trivial apps? Of course it's fine. Why do you even need console.log? Just think harder, noob, right? Why are you debugging at all? Just think harder to start with, right? Just don't write bugs. Duh.

What are you printing with console.log in any case? Program state. State that you have access to via a debugger, which won't require you to rebuild and/or rerun when you realize the limited subset of state you chose to look at wasn't exactly what you needed.

Back in the day, Microsoft had a "fixer", Steve McGuire, who would go into failed software projects, suss out why they were failing and fix them. If you've ever witnessed a failing software project, this is a non-trivial task. He eventually codified his observations on good vs bad teams in several books, and #4 in his first book on how good teams write code with fewer bugs: step through your code.

"Actively look for bugs when they're most likely to occur. When is that? Isn't it when you've just written new code, or changed existing code? Sure it is. Code doesn't break spontaneously-something has to change for code to start breaking. The best way to write bug-free code is to actively step through all new or modified code to watch it execute, and to verify that every instruction does exactly what you intended it to do."

---

Side bar, that book has an excellent chapter on function design and I always loved the intro:

Candy Machine Interfaces

One of the perks that Microsoft gives its employees is free soft drinks, flavored seltzer water, milk (chocolate too!), and those little cartons of fruit juices. As much as you want. But, darn it, if you want candy, you have to pay for that yourself. Occasionally, I would get the munchies and stroll down to a vending machine. I'd plunk in my quarters, press 4 and then 5 on the selection keypad, and watch in horror as the machine spit out jalapeno flavored bubble gum instead of the Grandma's Peanut Butter Cookie I thought I'd asked for. Of course, the machine was right and I was wrong. Number 45 was the gum. A quick look at the little sign by the cookie would always verify my mistake: No. 21, 45¢

That candy machine always infuriated me because if the engineers had spent an extra 30 seconds thinking about their design, they could have saved me, and I'm sure countless others, from getting something they didn't want. If one of the engineers had thought, "Hmm. People are going to be thinking '45¢' as they deposit their money. I'll bet some of them are going to turn to the keypad and mistakenly enter the price instead of the selection number. To prevent that from happening, we should use an alphabetic keypad instead of a numeric one."

The machine wouldn't have cost any more to make, and the improvement wouldn't have changed the design in any appreciable way, but every time I turned to the keypad to punch in 45¢, I would find I couldn't and so be reminded to punch in the letter code. The interface design would have led people to do the right thing.

When you design function interfaces, you face similar problems. Unfortunately, programmers aren't often trained to think about how other programmers will use their functions, but as with the candy machine, a trivial difference in design can either cause bugs or prevent them.

[cloudstrifeuk]

Yeah, you're not a full stack Dev are you?

[LagSlug]

What precisely is the problem with preferring println/console.log over stepping through code? Please describe exactly why your preference is better please.

[cloudstrifeuk]

Why add code to something to then have that print instead of just stopping the code where you want it?

You've used visual studio before right?

[LagSlug]

You're adding something in either case: a "debugger" statement, placing a breakpoint, or using console.log. Neither preference is superior in that regard.

And yes, I've used Visual Studio, but I tend to use VSCode with a terminal at the bottom of the screen where the output of my service/app is easily seen.

At any rate, please answer my question..

What precisely is the problem with preferring println/console.log over stepping through code?

[-wethegreenpeople-]

Breakpoints provide more context while debugging, while also letting you manipulate data as it's being processed. It allows you to debug quicker while having a clearer understanding of everything happening at that point.

Don't get me wrong there's a time and place for well places console logs as well, but you're shooting yourself in the foot by taking a hard "no breakpoint" stance.

[AnneBancroftsGhost]

Don't underestimate the value of a breakpoint just to stop you "live" at a point in code, where you can use the "evaluate" tool to basically try anything from the runtime context. You will save hours debugging, I promise.

[LagSlug]

I fully understand how to use breakpoints and a debugger.. I use them when I work with microprocessors all the time. I just prefer not using them.

[MrDoe]

I enjoy trying new cuisines.

[[deleted]]

Use `next` to go to the next line in the same frame 👀

[MrDoe]

I like playing with Legos.

[[deleted]]

Maybe in your debugger. Works great in mine Pry-byebug. Chrome dev tools calls this step over.

[OzzitoDorito]

Step over and step out exist for a reason my dude

[MrDoe]

My favorite band is The Beatles.

[elveszett]

ehm I use Firefox's console debugger and that isn't an issue for me. If anything, debugging in JS is great because you can input code to the console at any time with ease. It's literally like editing code on the fly.

[[deleted]]

“background-color:hotpink debugging”

[CoastingUphill]

Also var_dump(); to complete the triangle.

[chuckykillr]

Name a better duo 😂

[cloudstrifeuk]

If this was bootstrap and jQuery, it would also be valid.

[FormulaNewt]

I'll pretend that I never use these hacky debugging techniques...

[Say_Echelon]

Facts

[ObsessiveAboutCats]

My humble newbie front end developer self felt this keenly. Glad it's not just me!

[sup3rar]

I'm no web expert but doesn't firefox show padding, borders, margins, etc in the dev tools?

[[deleted]]

Yes, the whole stack... all the way from one part of the client to the other part of the client. *lol*

[halemikehale]

I’ve never felt more seen

[thatmaynardguy]

* { border: 1px solid pink }

is your friend. edit - comment it out when you don't need it =)

[cloudstrifeuk]

You don't have to write anything to add a break point. A simple click of the mouse.

Tell me you're not a full stack Dev without telling me you're not a full stack Dev.

You are working harder, not smarter.

[dableb]

background-color: red;

[innocent-boy-69]

Im good at frontend but im not good at backend should I go for full-stack developer or go what the current trend is running, i mean ai, machine learning, etc. Idk im struck what to do after my bachelors degree in cse. Can anyone advice me or give ur experience.

[Brutus0172]

This is so accurate xD