Debugging Web Pages on the Nokia 8110 with KaiOS

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>We've been doing a lot of development on feature phones recently and it's been hard, but fun. The hardest bit is that on KaiOS we found it impossible to debug web pages, especially on the hardware that we had (The Nokia 8110). The Nokia is a great device, it's built with KaiOS which we know is based on something akin to Firefox 48, but it's locked down, there is no traditional developer mode like you get on other Android devices, which means you can't connect Firefox's WebIDE easily.</p> <p>Through a combination of reading a couple of blogs, and knowing a bit about <code>adb</code> I worked out how to do it. Note, others might have been able to do it, but it's not documented in one place cleanly.</p> <figure> <img src="https://paul.kinlan.me/images/2019-03-21-debugging-web-pages-on-the-nokia-8110-with-kaios.jpeg"> </figure> <p>(Image above shows the DevTools and also the output of the screenshot tool)</p> <p>Here are the steps:</p> <ol> <li>Connect a USB cable. Ensure you have <code>adb</code> installed on your main machine.</li> <li>Download a copy of <a href="https://archive.mozilla.org/pub/firefox/releases/48.0.2/">Firefox 48</a> (this is the only one I could get to work)</li> <li>Enable 'Developer Mode' by entering <code>*#*#33284#*#*</code> from your phone (note, don't use the dialer). You will see a little 'bug' icon on the top of the screen. [<a href="https://groups.google.com/forum/#!topic/bananahackers/MIpcrSXTRBk">Source</a>]</li> <li>Attach your USB cable</li> <li>On your development machine run the following commands <ol> <li><code>adb start-server</code></li> <li><code>adb devices</code> to check your phone is connected.</li> <li><code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code> this sets up a channel from your machine to a socket on the phone. This is what Web IDE uses.</li> </ol> </li> <li>Start <code>Web IDE</code> by opening Firefox, go to Tools and then Web IDE</li> <li>Web IDE will be open, click 'Remote Runtime' and click the open button that has 'localhost:6000' in. (this is the tcp forwarding port).</li> <li>Open a page on the phone, and you should see it on the left. Voila.</li> </ol>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan