Javascript 如何远程调试控制台.log

问题：在开发Ionic2应用程序时，我希望看到IPhone上生成的console.log消息，但我没有Mac，或者我有Mac，但发现web inspector功能很糟糕

注意，这适用于任何类型的远程javascript，而不仅仅是Angular/ionic

---

这是一个问答式的问题，这意味着我将在下面提供答案，因为我认为这对很多人都非常有用。

解决方案是将所有console.log和错误连接到javascript，并将它们发送到服务器

将以下代码放入index.html页面：

<script>
// Function that will call your webserver
logToServer = function(consoleMsg) {
    // only do this if on device
    if (window.cordova) {
        let jsonTxt = customStringify(consoleMsg);
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", 'http://yourserver/console2server.php?msg=' + jsonTxt, true); //async
        xmlHttp.send(null);
    }
}

// Test if you receive this on the server
logToServer("OPENING IONIC APP");

// intercept console logs
(function () {
    var oldLog = console.log;
    console.log = function (message) {
        // DO MESSAGE HERE.
        logToServer(message);
        oldLog.apply(console, arguments);
    };
})();

// intecept errors
if (window && !window.onerror) {
    window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
        logToServer(errorMsg);
        logToServer(errorObj);
        return false;
    }
}

// this is optional, but it avoids 'converting circular structure' errors
customStringify = function (inp) {
    return JSON.stringify(inp, function (key, value) {
        if (typeof value === 'object' && value !== null) {
            if (cache.indexOf(value) !== -1) {
                // Circular reference found, discard key
                console.log("circular dep found!!");
                return;
            }
            // Store value in our collection
            cache.push(value);
        }
        return value;
    });
}
</script>

//将调用Web服务器的函数
logToServer=功能（控制台EMSG）{
//仅当在设备上时才执行此操作
如果（窗口科尔多瓦）{
让jsonTxt=customStringify（consoleMsg）；
var xmlHttp=new XMLHttpRequest（）；
open（“GET”http://yourserver/console2server.php?msg='+jsonTxt，true）；//异步
xmlHttp.send（空）；
}
}
//测试您是否在服务器上收到此消息
logToServer（“开放爱奥尼亚应用程序”）；
//拦截控制台日志
（功能（）{
var oldLog=console.log；
console.log=函数（消息）{
//请在这里留言。
logToServer（消息）；
apply（控制台、参数）；
};
})();
//接受错误
if（window&！window.onerror）{
window.onerror=函数（errorMsg、url、行号、列、errorObj）{
logToServer（errorMsg）；
logToServer（errorObj）；
返回false；
}
}
//这是可选的，但可以避免“转换循环结构”错误
customStringify=功能（inp）{
返回JSON.stringify（inp，函数（键，值）{
if（typeof value==='object'&&value！==null）{
if（cache.indexOf（value）！=-1）{
//找到循环引用，放弃密钥
log（“找到循环dep！！”；
返回；
}
//将价值储存在我们的收藏中
cache.push（值）；
}
返回值；
});
}

在服务器端，我使用PHP，但您可以使用任何您想要的：

<?php
//allow CORS request
header('Access-Control-Allow-Origin: *');

if(isset($_GET['msg'])) {
    //you can also log to a file or whatever, I just log to standard logs
    error_log("[CONSOLE.LOG] ".json_decode($_GET['msg'], true));
}
?>

---

调试愉快

解决方案是一个javascript钩子，它将拦截所有console.log和错误并将它们发送到服务器

将以下代码放入index.html页面：

<script>
// Function that will call your webserver
logToServer = function(consoleMsg) {
    // only do this if on device
    if (window.cordova) {
        let jsonTxt = customStringify(consoleMsg);
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", 'http://yourserver/console2server.php?msg=' + jsonTxt, true); //async
        xmlHttp.send(null);
    }
}

// Test if you receive this on the server
logToServer("OPENING IONIC APP");

// intercept console logs
(function () {
    var oldLog = console.log;
    console.log = function (message) {
        // DO MESSAGE HERE.
        logToServer(message);
        oldLog.apply(console, arguments);
    };
})();

// intecept errors
if (window && !window.onerror) {
    window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
        logToServer(errorMsg);
        logToServer(errorObj);
        return false;
    }
}

// this is optional, but it avoids 'converting circular structure' errors
customStringify = function (inp) {
    return JSON.stringify(inp, function (key, value) {
        if (typeof value === 'object' && value !== null) {
            if (cache.indexOf(value) !== -1) {
                // Circular reference found, discard key
                console.log("circular dep found!!");
                return;
            }
            // Store value in our collection
            cache.push(value);
        }
        return value;
    });
}
</script>

//将调用Web服务器的函数
logToServer=功能（控制台EMSG）{
//仅当在设备上时才执行此操作
如果（窗口科尔多瓦）{
让jsonTxt=customStringify（consoleMsg）；
var xmlHttp=new XMLHttpRequest（）；
open（“GET”http://yourserver/console2server.php?msg='+jsonTxt，true）；//异步
xmlHttp.send（空）；
}
}
//测试您是否在服务器上收到此消息
logToServer（“开放爱奥尼亚应用程序”）；
//拦截控制台日志
（功能（）{
var oldLog=console.log；
console.log=函数（消息）{
//请在这里留言。
logToServer（消息）；
apply（控制台、参数）；
};
})();
//接受错误
if（window&！window.onerror）{
window.onerror=函数（errorMsg、url、行号、列、errorObj）{
logToServer（errorMsg）；
logToServer（errorObj）；
返回false；
}
}
//这是可选的，但可以避免“转换循环结构”错误
customStringify=功能（inp）{
返回JSON.stringify（inp，函数（键，值）{
if（typeof value==='object'&&value！==null）{
if（cache.indexOf（value）！=-1）{
//找到循环引用，放弃密钥
log（“找到循环dep！！”；
返回；
}
//将价值储存在我们的收藏中
cache.push（值）；
}
返回值；
});
}

在服务器端，我使用PHP，但您可以使用任何您想要的：

<?php
//allow CORS request
header('Access-Control-Allow-Origin: *');

if(isset($_GET['msg'])) {
    //you can also log to a file or whatever, I just log to standard logs
    error_log("[CONSOLE.LOG] ".json_decode($_GET['msg'], true));
}
?>

调试愉快