We’ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I’m not sure as many people know about it as they should. <\/p>\n
TL;DR:<\/strong> XCode comes with a “Simulator” program you can pop open to test in virtual iOS devices. If you then open Safari’s Develop\/Debug menu, you can use its DevTools to inspect right there — also true if you plug in your real iOS device.<\/p>\n","protected":false},"excerpt":{"rendered":" We’ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I’m not sure as many people know about it as they should. TL;DR: XCode comes with a “Simulator” program you can pop open to test in virtual iOS devices. If you then open Safari’s Develop\/Debug […]<\/p>\n","protected":false},"author":3,"featured_media":277309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone\/iPad)","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[951,1144,872],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/debuggingsafari1665x705.png?fit=1665%2C705&ssl=1","jetpack-related-posts":[{"id":341724,"url":"https:\/\/css-tricks.com\/debugging-ios-safari\/","url_meta":{"origin":277308,"position":0},"title":"Debugging iOS Safari","date":"June 2, 2021","format":false,"excerpt":"How do I debug Safari on iOS? These are my general steps, starting with not even using iOS Safari. 1. Is this just a small-screen problem? Lemme just use the device mode in Chrome quick. Note that this does a smidge more than just display your site in a smaller\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-31-at-10.26.36-AM.png?fit=1200%2C826&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":199914,"url":"https:\/\/css-tricks.com\/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2\/","url_meta":{"origin":277308,"position":1},"title":"Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2","date":"April 15, 2015","format":false,"excerpt":"The following a guest post by Andi Dysart and Matthias Christen of Ghostlab. I was pretty impressed when I heard that the newly-released Ghostlab 2 could do this. I think a lot of us developers use Chrome because the DevTools are so good, and it sure would be able to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318810,"url":"https:\/\/css-tricks.com\/what-i-learned-by-fixing-one-line-of-css-in-an-open-source-project\/","url_meta":{"origin":277308,"position":2},"title":"What I Learned by Fixing One Line of CSS in an Open Source Project","date":"August 14, 2020","format":false,"excerpt":"I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I\u2019m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/lighbulbs-in-squares.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253010,"url":"https:\/\/css-tricks.com\/debugging-tips-tricks\/","url_meta":{"origin":277308,"position":3},"title":"Debugging Tips and Tricks","date":"April 11, 2017","format":false,"excerpt":"Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249913,"url":"https:\/\/css-tricks.com\/get-started-debugging-javascript-chrome-devtools\/","url_meta":{"origin":277308,"position":4},"title":"Get Started with Debugging JavaScript in Chrome DevTools","date":"January 12, 2017","format":false,"excerpt":"Kayce Basques wrote an excellent interactive tutorial that explores how to debug JavaScript with DevTools. Kayce looks into a number of techniques and options that I was completely unaware of and, as he notes in the beginning of the tutorial, if you\u2019re still using console.log to find bugs in your\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340490,"url":"https:\/\/css-tricks.com\/devtools-for-css-layouts-2021-edition\/","url_meta":{"origin":277308,"position":5},"title":"DevTools for CSS layouts 2021 edition","date":"May 13, 2021","format":false,"excerpt":"Chen Hui Jing covers some recent movement in DevTools: Firefox\u2019s grid inspector was pretty full-featured from the get-to and\u00a0released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a\u00a0basic grid inspector tool in Chrome 62\u00a0that let developers highlight elements using grid layout, but more\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/chrome-align-1280.png?fit=1200%2C443&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/debuggingsafari1665x705.png?fit=1024%2C434&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277308"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=277308"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277308\/revisions"}],"predecessor-version":[{"id":277510,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277308\/revisions\/277510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/277309"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=277308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=277308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=277308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}