[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

[JS] Useful ES6 / ES2015 Syntax Enhancements (Keep Updating...)

Below are the es6 enhancements that are easily forgot but use a lot. Keep them noted here

Details
1. Function definitions in object (shorthand)

const obj = {
  foo() {
    return 'bar';
  }
}

2. Shallow copy using spread operator

let obj1 = { foo: 'bar', x: 42 }

let clonedObj = { ...obj1 }

3. Nested object properties destructuring

const nestedObj = {
	open: true,
	btnAct: {
		proceedLbl: 'aaa',
		cancelLbl: 'bbb',
	}
}
const {
	open,
	btnAct: {proceedLbl, cancelLbl}
} = nestedObj

proceedLbl and cancelLbl variable is created with value nestedObj.btnAct.proceedLbl and nestedObj.btnAct.cancelLbl

[requireJS] define VS require

Difference between define and require

We often see define and require in requireJS, but what's their difference? I try to elaborate as below.

require

1. When you want to load some stuff, you need to use require, like jquery, bootstrap etc.
2. It has NO return statement

e.g.:

require(["jquery", "bootstrap", "bootstrap_select"], function() {
 //requirejs sugar function
 var angular = require('angular');
});

define

1. As the name implies, it helps you define module that will be depend by other modules or applications
2. It has return statement for inclusion by other modules

e.g.:

define(["angular", "angular-route", "angular-animate"],function(angular){
 var insiderApp = angular.module("insiderApp",["ngRoute", "ngAnimate"]);
 //routing
 insiderApp.config(['$routeProvider','$locationProvider',function($scope,$routeProvider,$locationProvider){
  
 }]);
 
 return insiderApp;
});

This is official explanation
 /**
     * The function that handles definitions of modules. Differs from
     * require() in that a string for the module should be the first argument,
     * and the function to execute after dependencies are loaded should
     * return a value to define the module corresponding to the first argument's
     * name.
     */

[AngularJS] Basic Concepts

Here are the basic concepts of Angularjs, these concepts are barely well documented by the officials.

1. angular.config only accepts providers
2. Every service and factory are the instances of the providers
   
   e.g.
   

   angular.module('myApp')
     .service('FooService', function(){
       //...etc
     })
     .config(function(FooServiceProvider){
       //...etc
     });
   
   
   

   Reference: http://stackoverflow.com/questions/17485900/injecting-dependencies-in-config-modules-angularjs