{"id":1324,"date":"2015-12-15T12:30:24","date_gmt":"2015-12-15T17:30:24","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=1324"},"modified":"2015-12-15T12:32:42","modified_gmt":"2015-12-15T17:32:42","slug":"testing-web-apps-in-mobile-mode","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2015\/12\/15\/testing-web-apps-in-mobile-mode\/","title":{"rendered":"Testing web apps in mobile mode"},"content":{"rendered":"<p>Experienced developers won&#8217;t find anything in this article they didn&#8217;t know already. All others will find it quite useful. We&#8217;ll show a few different ways of how you can quickly test the mobile version of your application.  <\/p>\n<p>This article applies to PHPRunner, ASPRunnerPro and ASPRunner.NET with Mobile template option enabled. <\/p>\n<h2>1. Using your web browser<\/h2>\n<p>All modern browsers have an option to show any page the way it will appear on mobile device. In this article will show you how to do this using Chrome web browser.<\/p>\n<p><strong>1.1<\/strong> Hit F12 to open Chrome Developers Tools. Click Mobile device icon in Chrome Developer tools.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr_chrome_tools.png\" alt=\"\" title=\"scr_chrome_tools\" width=\"679\" height=\"415\" class=\"alignnone size-full wp-image-1331\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr_chrome_tools.png 679w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr_chrome_tools-300x183.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr_chrome_tools-150x91.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr_chrome_tools-400x244.png 400w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><br \/>\n<!--more--><br \/>\n<strong>1.2<\/strong> Your app now switches to mobile mode but since we store device info in cookies\/session you need to reset cookies for this app. Personally I suggest using <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/editthiscookie\/fngmhnnpilhplaeedifhccceomclgfbg?hl=en\">EditThisCookie<\/a> Chrome plugin as it only takes a couple of mouse clicks to clear cookies for the current website. <\/p>\n<p>You can also do that using built-in tools. You can delete all cookies for selected website. Just make sure you are not deleting all cookies for all websites.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr1.png\" alt=\"\" title=\"scr1\" width=\"690\" height=\"355\" class=\"alignnone size-full wp-image-1327\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr1.png 690w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr1-300x154.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr1-150x77.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr1-400x205.png 400w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr2.png\" alt=\"\" title=\"scr2\" width=\"730\" height=\"646\" class=\"alignnone size-full wp-image-1328\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr2.png 730w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr2-300x265.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr2-150x132.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr2-400x353.png 400w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/p>\n<p><strong>1.3<\/strong> If you done everything right this is what you going to see. You can choose different device types, horizontal or vertical orientation etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr.png\" alt=\"\" title=\"scr\" width=\"502\" height=\"927\" class=\"alignnone size-full wp-image-1326\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr.png 502w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr-162x300.png 162w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr-81x150.png 81w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2015\/12\/scr-400x738.png 400w\" sizes=\"(max-width: 502px) 100vw, 502px\" \/><\/p>\n<h2>2. Using your mobile device<\/h2>\n<p>If your mobile device and desktop computer are on the same network you can test your app using your smartphone or tablet. Note that built-in web server that comes with PHPRunner, ASPRunnerPro or ASPRunner.NET is only designed for local testing. You will need to use your own web server like XAMPP or IIS. <\/p>\n<p>Choose output folder under your web server root folder i.e. c:\\xampp\\htdocs\\project1 then open a URL like <strong>http:\/\/desktop_computer_name\/project1<\/strong> in your browser on mobile device. <\/p>\n<p>Another option &#8211; post your project to Demo Account, copy the link, email it to yourself. On your mobile device open that email and click the link. <\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Experienced developers won&#8217;t find anything in this article they didn&#8217;t know already. All others will find it quite useful. We&#8217;ll show a few different ways of how you can quickly test the mobile version of your application. This article applies to PHPRunner, ASPRunnerPro and ASPRunner.NET with Mobile template option enabled. 1. Using your web browser All modern browsers have an option to show any page the way it will appear on mobile device. In this article will show you how to do this using Chrome&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2015\/12\/15\/testing-web-apps-in-mobile-mode\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Testing web apps in mobile mode&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1324"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":7,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"predecessor-version":[{"id":1336,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions\/1336"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}