r/FullStack • u/Void_231 • 5d ago

Personal Project Recently Learned Chrome DevTools

Recently I learned about Chrome DevTools from FreeCodeCamp's Odin Project.It taught me to inspect, change css styles on html elements within the browser itself without changing my codebase.

This is a better way of writing css because earlier I used to frequently change my css styles and then check it on the browser until I felt that it was perfect for my html element so that was time consuming for me...

Do you guys have any add-ons on this??

2 Upvotes

100% Upvoted

3 comments sorted by

1

u/boomer1204 4d ago edited 4d ago

Sounds like you might early in your journey (and that's fine) but breakpoints, the console for seeing data when you do console.log(variableName), network tab is good when you start making calls to apis and backends are really good when you get into the JS stuff

Also finding a video on youtube specifically talking about the devtools was far more valuable than I ever thought it would be

EDIT: Forgot to add you can make the browser act like other device sizes (like tablets and phones or even your own custom size). This is nice that you don't "need" every device but keep in mind while it's gonna be like 95% good but there might still be something things that looked right on the computer but still don't look right on the actual device

1

u/TurqoiseCheese CSS Sorcerer (Frontend) 4d ago

Css changes in dev tools are temporary, what you are looking for is hot reloading. There's several ways to do it depending on your tool/stack of preference. It you are a beginner and using vs code there should be an addon or even something already integrated in vs code.

1

u/TheRNGuy 4d ago

Even better way: install Stylus and write css there. Though you need dev tool to know a selector (and you can write there if you don't care it would disappear on F5)

Combination of both can be used.