Blog

Find out what is happening at Whitebolt and what is exciting us at the moment.

Mobile development – remote debugging

Ever created a responsive website only to see some random and unexpected behaviour on mobile? If you’ve never done a design for mobile then the answer is probably no. However, for anyone who has done any responsive design then a big Yes!

The theory says, if you design for mobile first or use some responsive framework, all will well. In the real world, theory only takes you 90% of the way. In the end you still have to test and debug on a variety of devices.

Chrome has excellent debugging tools.

Mobile view in Chrome

Open the debugger/console in chrome by hitting ctrl+j. You can now debug and inspect your page. Any seasoned web developer will be familiar with this feature.

You can view it in a mobile view by clicking the “Toggle device toolbar” button. This will show you your creation in various devices. It is a great start in viewing the site in mobile or tablet format.

Remote Debugger

The mobile view is only an emulation. I have found that you still get unexpected results on real world devices even after plenty of work in the mobile views.

You can remote debug chrome on your android device using the remote debugger.

  1. If you do not already have ADB installed you will need this. Unfortunately, it is difficult to install this without the entire Android Studio Suit. Google have made this difficult and most of the guides are now out-of-date. The following however works:

    https://wiki.lineageos.org/adb_fastboot_guide.html

    You do not need fastboot installing, just ADB

  2. Once ADB is installed you need to enable remote debugging on your device and plug it into the usb on your computer. You will need to do a Google search to find out how do do this on your device but on my Galaxy you do the following:
    1. Open settings.
    2. Select About Device.
    3. Click Software info.
    4. Click Build Number 7 times.
    5. Developer options should now be available.
    6. Go back to settings.
    7. Select Developer options from menu (this was not available before).
    8. Scroll to Enable USB debugging and enable it.
  3. To get the debugging working you might need to restart the ADB server on your machine:
    1. Type: adb kill-server at the terminal and then adb start-server.
    2. Type: adb device and your device should be listed.
    3. If the above did not work try adb usb.
  4. Now you are ready for remote debugging! So, open a chrome browsing session in both your mobile device and desktop computer.
  5. In the chrome address bar on your desktop type “chrome://inspect” and enter.
  6. You should see your device and its current chrome session listed.
  7. Select the debug link to launch the remote debugger.
  8. You can now inspect and edit style/html on your remote device live … happy debugging!

New website

Our new website is now live!

The website is an on-going project so keep checking back for changes and updated design.  Like most Web Development companies we used to have site that we’d never sell to a client as it wasn’t up to scratch! This new one is much better but we want to make it eventually a showcase for cutting edge technology.

The new site uses a new theme built from the ground-up by our team.  The page is all encapsulated in an Angular App.  We are using the new WordPress Rest API to grab content via AngularJs and display in the content view.

The code allows for pages to be rendered both server side in WordPress/PHP and client side using AngularJs.  This is a particularly useful feature as it avoids the normal SEO hit on single-page designs.

If you need a new Angular-Wordpress site then contact us for a quote.

Related Pages:

Photography in York now live

The new website for Photography in York is now live.

The website is a great example of a small business site. Designed from the ground-up in WordPress and PHP. It uses Foundation Sites for basic layout and bespoke jQuery plugins (created by our team) for advanced layout.  Special plugins were created to shift content on screen resize to allow menus to be shared between mobile and desktop designs. The overall achievement of this is a fully-responsive design that is code efficient.

There is also, a great Wedding picture on the homepage of our director Stephen Simpson in his kilt!

Related Pages: