How do you debug android < 4.4 css?

Hello,

Just wanted to know how you guys debug a < 4.4 android app on ionic (css and html ) ?

Remote debug does not work inside the app and it seems that the browser used by ionic is not the same as the browser installed as an app on the device.

Thanks

Just wanted to chime in a ME TOO here. I’m seeing a lot of quirks in Android CSS even using standard Ionic directives across Android versions and devices. I switched to Genymotion as I don’t have an arsenal of real devices to test on, and it appears that anything pre 4.4 doesn’t support WebSockets/LiveReload, which makes it a terrible PITA to debug layout issues.

You have to rebuild and repush the app to the VM each time…and there is no WebKit inspector. It is painful. Has anyone come up with a decent solution for this?

Here’s an example of what I mean:

On Android 4.3 and lower, this markup:

<div class="list">
     <label class="item item-input item-select item-stacked-label filter-select-label">
        <span class="input-label filter-select-span">Location</span>
        <select
          class="filter-select"
          ng-model='location',
          ng-options='location as location.name + ", " + location.city for location in locations | orderBy:"name" track by location.location_key'
          ng-change='onLocationChange(location)'>
        </select>
      </label>
      <label class="item item-input filter-date-label">
        <span class="input-label filter-date-span">Date</span>
        <input class="filter-date" type="text" ng-model="range.endDate" format="date" ng-click="modal.show()" style="border: 1px solid red;">
      </label>
      <label class="item item-input filter-range-label">
        <span class="input-label filter-range-span">Days:<sup class='asterisk'>*</sup> {{days}}</span>
        <input class="filter-range" type="range" name="days" min="0" max="30" value="7" ng-model="days" ng-change='onDaysChange(days)'>
      </label>

      <p class="padding small">
        <span class="small"><em class='asterisk'>*</em>How many days prior to the date you have chosen show in the chart.</span>
      </p>
    </div>

produces this (red border added for illustration):

image

but on Android 4.4+, you get this:

image

I’ve been debugging using the livereload + console and servers logs options.

ionic run android -l -c -s
ionic emulate ios -l -c -s

For Android

Google Chrome > More tools > Inspect devices.

For iOS

Safari > Develop > Username > Your device

Oh yea! I totally forgot that Chrome can remote debug Android, but isn’t that 4.4+ only?

Answer

  • Chrome 32 or later installed on your development machine.
  • A USB cable to connect your Android device.
  • For browser debugging: Android 4.0+ and Chrome for Android.
  • For app debugging: Android 4.4+ and a WebView configured for debugging.

The question I asked was before I added crosswalk.

Crosswalk allow remote debug for all devices so problem solved :smile: