DEV Community

C. Pure
C. Pure

Posted on

Learning about Developer tools for your iPhone by finding a bug at 4:30 AM.

One beautiful morning at 4:35 AM I woke up and decided to check my twitter and found that there is a Hypebae! To be honest your girl is far from fasionable but I love looking at streetwear! I am a huge fan of Hypebeast which mainly focuses on contemporary men's streetwear but finally there is a sister site. I was particularly interested because as I was scrolling through twitter I saw this awesome article on Jasmyn Lawson and her Tech Journey. As a POC I love seeing black people achieve, I love seeing black women achieve, and even more so when it’s in tech!

So where am I going with this? I found a bug while viewing the article on my ancient iPhone 6. Hypebeast is known for their beautiful images of contemporary streetwear and it was particularly distracting to see the beautiful images by Juan Veloz skewed. Being an artist it is a pet peeve of mine to see art not represented as it was intended but as a coder I recognized it is a bug; not intentional but something to be fixed!

I decided to start by jumping on my computer and searching the developer tools on Google Chrome and Safari to inspect the image element. Despite what I saw on my phone I could not replicate what I saw on my iPhone using the Chrome developer tools for iPhone 6/7/8. To be honest it looked perfectly fine but in reality this is what I was seeing;

Screenshot of Hypebae article

VERSUS

Screenshot of desktop Chrome Developer Tools for iPhone 6/7/8

My question was how would I fix this? How do I find this bug on my phone? Then I learned about how to use developer tools from an iPhone! First I had to enable ‘Web Inspector’ on my iPhone settings which is located in the advance settings of Safari. Then by connecting my phone to my laptop, I was able to go into Safari desktop application and click Develop in the tool bar and then scroll down to iPhone and select 'Use for Development.' Viola, I got exactly the answer I needed, the image was set to 700px x 500px.

Screenshot of Developer Tools inspecting from iPhone 6

As a code newbie I’m not sure how to go about fixing this (I'm guessing this is how contributing to open source works on github... you find a bug send a pull request etc?) but I just wanted to document this new developer tool I learn to use from this article. Also to say Hypebeast, if you see this show Jasmyn Lawson and Juan Veloz some love by fixing this bug. The outfits and images are so fiya!! Also shout out to the developers for their hard work, this is not easy!

Top comments (0)