{"id":2209,"date":"2011-11-10T09:36:25","date_gmt":"2011-11-10T17:36:25","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=2209"},"modified":"2011-11-03T13:13:46","modified_gmt":"2011-11-03T21:13:46","slug":"localtunnel-on-actual-mobile-devices","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/","title":{"rendered":"Using localtunnel to do web development on actual mobile devices"},"content":{"rendered":"

Surely you’re convinced too now that developing for the mobile web is important. It certainly is for us here at Mozilla. Mobile web development isn’t just about making a ultra-slim stripped down version with no images or Javascript widgets. It’s also about taking regular full powered web applications and making stepwise adjustments to make sure they work responsively on all mobile devices which means everything from tablets to regular cell phones over 3G. <\/p>\n

There are numerous good guides such as this for Designing for Mobile Devices<\/a> and there are great add-ons for Firefox<\/a> such as the User Agent Switcher<\/a>. And don’t miss Jason’s wonderful blogs from the archive part 1<\/a>, part 2<\/a>, part 3<\/a> and part 4<\/a>. But ultimately, nothing beats actually testing it on a real physical device. <\/p>\n

That’s where localtunnel<\/a> (by Jeff Lindsay<\/a>) comes in. What it does is that it binds a local port (e.g. port 8000) on your desktop to a real domain name (e.g. xyz123.localtunnel.com) all over SSH<\/a>. So, you start your local Django server locally and then start a local tunnel and after waiting 1-2 seconds you get a real domain name to type into your iPhone, Android, Nokia smartphone, whatever and you can test away as much as you like. <\/p>\n

Granted, you can use it not just for mobile device development but for anything such as telling a colleague over IRC to visit your site running locally on your laptop. And also, if you are in an office where you connect to the same local WiFi with your laptop as you do with your mobile device then you can just use a local IP address. But that’s often not the case especially when working with people in different locations. <\/p>\n

An added, yet strange, benefit with using localtunnel to test your mobile device is that it is naturally slow. That’s because the traffic has to go via SSH over the network and your local network won’t be as fast as a real data center. However, in real life, the network connection will be slow when using a mobile device so it’s important to see how your mobile web app behaves with a limited bandwidth. <\/p>\n","protected":false},"excerpt":{"rendered":"

Surely you’re convinced too now that developing for the mobile web is important. It certainly is for us here at Mozilla. Mobile web development isn’t just about making a ultra-slim stripped down version with no images or Javascript widgets. It’s … Continue reading<\/a><\/p>\n","protected":false},"author":325,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[],"coauthors":[],"yoast_head":"\nUsing localtunnel to do web development on actual mobile devices - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peter Bengtsson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/\",\"name\":\"Using localtunnel to do web development on actual mobile devices - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"datePublished\":\"2011-11-10T17:36:25+00:00\",\"dateModified\":\"2011-11-03T21:13:46+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/fbadf48380da3866faf204f1d1c976ea\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using localtunnel to do web development on actual mobile devices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/fbadf48380da3866faf204f1d1c976ea\",\"name\":\"Peter Bengtsson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/4b8aaab120020f4d8090901be034f267\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/37d081c393f95a14e2704af38ecc4c8d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/37d081c393f95a14e2704af38ecc4c8d?s=96&d=mm&r=g\",\"caption\":\"Peter Bengtsson\"},\"description\":\"Peter is a staff web developer at Mozilla working on MDN Web Docs. He blogs on www.peterbe.com\",\"sameAs\":[\"https:\/\/www.peterbe.com\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/pbengtssonmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using localtunnel to do web development on actual mobile devices - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/","twitter_misc":{"Written by":"Peter Bengtsson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/","url":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/","name":"Using localtunnel to do web development on actual mobile devices - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"datePublished":"2011-11-10T17:36:25+00:00","dateModified":"2011-11-03T21:13:46+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/fbadf48380da3866faf204f1d1c976ea"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2011\/11\/10\/localtunnel-on-actual-mobile-devices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Using localtunnel to do web development on actual mobile devices"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/fbadf48380da3866faf204f1d1c976ea","name":"Peter Bengtsson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/4b8aaab120020f4d8090901be034f267","url":"https:\/\/secure.gravatar.com\/avatar\/37d081c393f95a14e2704af38ecc4c8d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/37d081c393f95a14e2704af38ecc4c8d?s=96&d=mm&r=g","caption":"Peter Bengtsson"},"description":"Peter is a staff web developer at Mozilla working on MDN Web Docs. He blogs on www.peterbe.com","sameAs":["https:\/\/www.peterbe.com"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/pbengtssonmozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2209"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/325"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=2209"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2209\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=2209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=2209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=2209"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=2209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}