[Android] JS debugging

Problems
I know for many of them it may be an old news, but I am quite surprise chrome debugging can be so easy even in Android device. Facing some weird bugs, when the front-end tries to fire an API to perform some server actions, it only succeed in desktop chrome but not mobile chrome.

I know it has a high chance of not a coding issue, but some specific settings that only occurs in mobile chrome, and even more, the API call works in incognito mode, which makes me even more curious on why it happens.
Solutions
To find out what actually malfunctioned behind, I planned to find a way to let me get a sort of like "remote logging", which connects my android device to the development machine and view the console log of the Android chrome for further bug tracing.

Turns out, it is quite easy, which use me only 5 minutes to setup

1. Enable USB debugging in Android device

2. Connect the Android device and accept the permission dialog raised on phone

3. Open the desktop chrome > console log > more tools > remote devices

4. Check "Discover USB devices", and wait until your device comes up to list (mine is Oneplus 7 pro, so the model is shown up as "GM1913"

5. Interesting part comes up, when you type in the address and press open, the remote device will pop up chrome and navigate to the designated site! YES! We've now got a console log for our mobile version of chrome! 

6. Press "inspect fallback" or "inspect", a remote device devTools come up and you will see a REALTIME mapping of your device's chrome screen in the devTool, they are in sync now!

7. You can of course do anything just like you inspect your desktop site, like inspecting network tab, console logging, capturing back-end data etc. And more surprisingly, as both of them are insync, you can control the phone's surfing behavior through desktop browser's debugging window too!

8. So finally I found the data save mode add a data save header causing my API call being cache and causing the failure. Disabling that mode brings the API call succeed again! 

References

• https://developers.google.com/web/tools/chrome-devtools/remote-debugging?utm_campaign=2016q3&utm_medium=redirect&utm_source=dcc
• https://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android
• Video captured for demonstration of remote debugging

[JS] RequireJS - Prevent JS File Caching

Problems
Very often when we updated the JS files, directly refreshing is not reflecting the changes, instead we need to manually clear cache, which makes end users using the web application quite annoying.


Solutions
RequireJS provides "cache busting" which can force browser to download the latest version of JS files every time new pages loaded

Basically, we write a general function accepting target path not to cache, the "require.config" will then execute the function, the bust function actually use current time and attach as the parameter of the JS URL, since time is always changing, it can force the browser to retrieve the JS files for every load

function bust(path) {
    return path + '?bust=' + (new Date()).getTime();
}

require.config({
    baseUrl: '/base/path',
    paths: {
        'fileAlias': bust('fileLikelyToChange'),
        'anotherFileAlias': bust('anotherFileLikelyToChange'),
        'jQuery': 'jQuery'
    },
});

References
- https://stackoverflow.com/questions/16523755/cache-busting-specific-modules-with-requirejs