Making use of the Chrome Dev Tools habit has been a more recent practice of mine. I've used it to inspect other people's code or disable JavaScript to get around some subscription-gated sites, sure, but to do due diligence with my own code?
After mixed results with optimizing my portfolio site for mobile, I've been more conscious of simulating mobile devices with Device Mode.
And with my latest journaling app, I stopped to preview it all every step of the way-- Android and iOS to boot!
When I finally deployed it on Netlify, I shared the link to my friend and mentor who gave me props. But the screencap he shared looked weird.
I was crushed to see it looked just as jumbled when I pulled up the site on my own phone. It felt especially demoralized when I put more effort than ever to have responsiveness in mind.
Dev Tools, you lied to me!
How can mirrors be real if our eyes aren't real. - Jaden Smith
Never thought that quote would hit as hard as it did now.
How are you supposed to check the site layout if you can't trust the preview? And to that, I still don't have an answer. Said friend thought it might've been a rem - px issue, but adjusting that math didn't seem to make a difference.
Device Mode preview will remain a mystery, but luckily the actual fix for my site layout wasn't too bad.
Those elements that are all jumbled at the top were created at a later stage as I was designing things. And, instead of respecting the HTML top to bottom order (I thought only JavaScript cared about that?), I left those elements near the bottom of the HTML. I had things positioned okay through CSS, but position: fixed and position: absolute were conflicting with other styles. It was much easier to let things fall in line with flexbox and adjust from there.
For those of you who felt Dev Tools betrayal, how long did it take you to regain trust? 🥺 👉👈
Top comments (0)