{"_id":"56d1f34100a2a70b00b365fa","version":{"_id":"56d1f33700a2a70b00b3658e","project":"5526c95cf69851170038b48f","__v":2,"createdAt":"2016-02-27T19:04:23.946Z","releaseDate":"2016-02-27T19:04:23.946Z","categories":["56d1f33900a2a70b00b3658f","56d1f33900a2a70b00b36590","56d1f33900a2a70b00b36591","56d1f33900a2a70b00b36592","56d1f33900a2a70b00b36593","56d1f33900a2a70b00b36594","56d1f33900a2a70b00b36595","56d1f33900a2a70b00b36596","56d1f33900a2a70b00b36597","56d1f33900a2a70b00b36598","56d1f33900a2a70b00b36599","56d1f33900a2a70b00b3659a","571f9497ada30c34003b7cee"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"beta","version_clean":"2.0.0-beta","version":"2.0.0-beta"},"parentDoc":null,"project":"5526c95cf69851170038b48f","user":"5526d4bb4a7ac121004c605c","__v":0,"category":{"_id":"56d1f33900a2a70b00b36590","version":"56d1f33700a2a70b00b3658e","__v":1,"pages":["56d1f34100a2a70b00b365f8","56d1f34100a2a70b00b365f9","56d1f34100a2a70b00b365fa"],"project":"5526c95cf69851170038b48f","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-05-15T18:49:19.951Z","from_sync":false,"order":9,"slug":"environment","title":"Debugging"},"updates":["5565f3838908de0d00833c9c"],"next":{"pages":[],"description":""},"createdAt":"2015-05-14T19:40:21.713Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"So, you're testing out your Ionic app on an iOS device and you wish you could use the Safari Inspector just like you do with `ionic serve`.\n\nLucky for you, you can!\n\nFirst, open up **Safari** -> **Preferences** and navigate to the 'Advanced' tab.  Make sure the 'Show Develop menu in menu bar' option is selected.  It should look like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/EAENISpCRpmckLWxj7LP_Screen%20Shot%202015-05-14%20at%202.33.45%20PM.png\",\n        \"Screen Shot 2015-05-14 at 2.33.45 PM.png\",\n        \"1584\",\n        \"1184\",\n        \"#ac4b33\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSecond, enable Web Inspector on your mobile device **Settings**->**Safari**->**Advanced**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/DgiXtTuaStqugabTYExF_Screen%20Shot%202015-05-28%20at%203.11.47%20PM.png\",\n        \"Screen Shot 2015-05-28 at 3.11.47 PM.png\",\n        \"862\",\n        \"1468\",\n        \"#3a654e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNow, just run your app, and when you want to debug go to **Develop** in the Safari menu bar, then select  `index.html` under your device:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/C8khNIfT1S21HqpbBzCL_Screen%20Shot%202015-05-14%20at%202.36.34%20PM.png\",\n        \"Screen Shot 2015-05-14 at 2.36.34 PM.png\",\n        \"722\",\n        \"974\",\n        \"#7da1b1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou should now see a Safari Inspector window, with all the tools you'd have in a browser, enjoy!\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Kf6YrLwSQOaf9k9TIKYL_Screen%20Shot%202015-05-14%20at%202.36.57%20PM.png\",\n        \"Screen Shot 2015-05-14 at 2.36.57 PM.png\",\n        \"2288\",\n        \"1496\",\n        \"#b25045\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"Debug yous iOS apps with the Safari Developer Tools","slug":"safari-inspector","type":"basic","title":"Safari Inspector"}

Safari Inspector

Debug yous iOS apps with the Safari Developer Tools

So, you're testing out your Ionic app on an iOS device and you wish you could use the Safari Inspector just like you do with `ionic serve`. Lucky for you, you can! First, open up **Safari** -> **Preferences** and navigate to the 'Advanced' tab. Make sure the 'Show Develop menu in menu bar' option is selected. It should look like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/EAENISpCRpmckLWxj7LP_Screen%20Shot%202015-05-14%20at%202.33.45%20PM.png", "Screen Shot 2015-05-14 at 2.33.45 PM.png", "1584", "1184", "#ac4b33", "" ] } ] } [/block] Second, enable Web Inspector on your mobile device **Settings**->**Safari**->**Advanced**. [block:image] { "images": [ { "image": [ "https://files.readme.io/DgiXtTuaStqugabTYExF_Screen%20Shot%202015-05-28%20at%203.11.47%20PM.png", "Screen Shot 2015-05-28 at 3.11.47 PM.png", "862", "1468", "#3a654e", "" ] } ] } [/block] Now, just run your app, and when you want to debug go to **Develop** in the Safari menu bar, then select `index.html` under your device: [block:image] { "images": [ { "image": [ "https://files.readme.io/C8khNIfT1S21HqpbBzCL_Screen%20Shot%202015-05-14%20at%202.36.34%20PM.png", "Screen Shot 2015-05-14 at 2.36.34 PM.png", "722", "974", "#7da1b1", "" ] } ] } [/block] You should now see a Safari Inspector window, with all the tools you'd have in a browser, enjoy! [block:image] { "images": [ { "image": [ "https://files.readme.io/Kf6YrLwSQOaf9k9TIKYL_Screen%20Shot%202015-05-14%20at%202.36.57%20PM.png", "Screen Shot 2015-05-14 at 2.36.57 PM.png", "2288", "1496", "#b25045", "" ] } ] } [/block]