Print console.log and console.error messages in terminal (--consolelogs)

[imhoffd]

This has to be re-implemented for use with the Angular CLI. We'd need to inject a client JS file into the Angular dev server and connect to a websocket server running from the Ionic CLI.

[imhoffd]

@GuilhermeBCC Can you explain why these logs are vital for your tests? What sort of testing are you doing?

[GuilhermeBCC]

Well, when I'm running on the device I do not even see when there are any errors, the application simply hangs, there is no information to aid the fix. I am even stopped now because there is an error that I can not trace.

[imhoffd]

If the webview is loaded, you should be able to attach dev tools to debug issues and see console logs:

iOS: https://beta.ionicframework.com/docs/building/ios#using-safari-web-inspector Android: https://beta.ionicframework.com/docs/building/android#using-chrome-devtools-to-debug

[GuilhermeBCC]

it works and it's great \o/ thanks!

[Borongaj]

Dev tools are nice, but we have to restart manually everytime we build the app. Sometimes the dev tools window closes immediatly after launch.

Is it normal that Ionic 3 projects don't show logs anymore too ?

[imhoffd]

@Borongaj No, it's not normal that Ionic 3 projects stopped logging. If you want, create a new issue.

[obkdev]

How do I see logs for an app that is installed on the device via Ionic Pro? I'm not able to inspect a 'deployed' app in the same way I'm able to inspect an app I run on the device via 'ionic cordova run android' .. Please can you suggest a solution?

Thank you!

[ludufre]

Just curious: do you plan to implement this in the near future?

[sjregan]

It would great to have this feature back again. The Safari Debugger is very flakey, it often crashes, doesn't detect device unless you restart. It's much nicer to be able to have a dedicated window on screen that always displays the log output.

[ludufre]

Is there any forecast?

[timbru31]

Given that it's nearly 1 year without any progress, I believe you can't expect a forecast/ETA/release date

[alejandrosklar]

@dwieeb re:

@GuilhermeBCC Can you explain why these logs are vital for your tests? What sort of testing are you doing?

To chime in -- I have used this feature many times in the past. Right now, for example, I am using DevApp to run initial tests on mobile device. The app being developed will be used as PWA, but will also likely be deployed to native at some point. I have run into issues where the app is running fine in the browser when accessed through a desktop machine, but not when running on mobile Chrome/Safari browser, or the DevApp, or (I assume) when deployed natively.

It is MUCH more convenient to be able to just print to the CLI console across all these tests, than having to re-route through different simulators or dev tools for each deployment test. Perhaps there are some ways to do this that I'm overlooking, but simply typing "ionic serve -c" was extremely straightforward and simple

[alejandrosklar]

also, seems there is a fair amount of demand for this in the ionic forum: https://forum.ionicframework.com/t/devapp-on-ionic-4-issue-no-console-log/141723/11

[imhoffd]

We have PRs open that enable this feature for ionic serve --devapp:

• https://github.com/ionic-team/ionic-cli/pull/3900
• https://github.com/ionic-team/angular-toolkit/pull/100

The --devapp flag of ionic serve switches the underlying Angular builder to our custom builders defined in @ionic/angular-toolkit. ionic cordova run uses them as well. We have not yet needed to override the default Angular builders (made by the Angular team) for regular ionic build and ionic serve. To implement --consolelogs for regular ionic serve, we would need to do so.

It sounds like having this feature just for DevApp is fine for the vast majority of people because as I mentioned here, if you're running a dev build or emulating, you can open the DevTools/Safari Inspector for the webview and there you have console logs and a thousand other tools for developing.

[l3ender]

@dwieeb To add some thoughts from my experience, having to use Safari Inspector to attach to a device for viewing logs is less than ideal. I find I frequently need to reattach because of rebuild/redeploy (when working with Corova plugin updates) or when switching to different devices. On top of that, I regularly experience headaches with Inspector, where I need to restart Safari or the device in order to attach.

Having to open Safari, attach to the device, and then view the Console feels clunky and out of the normal flow for what I would expect when developing. Having console logs available in terminal would be a great addition.

[joshstrange]

While I love my iPhone debugging via safari is a huge PITA. Android is better with Chrome, not perfect but leaps and bounds better than the buggy safari debugging. This is my #1 debugging tool and I regularly log something to console and wait for the live-reload so I can quickly see the value. Losing this ability is almost a non-starter and I'll have to look for some other tool to proxy my console.logs to a terminal window so I can emulate the old behavior.

[abutizi]

I'm also suffering of the in-ability to show console logs using the -c command. Anyone here found a way that could help a brother out?

[joshstrange]

@abutizi I hacked in a VERY rudimentary system using the following code in app.component:

takeOverConsole() {
        const ws = new WebSocket('ws://10.0.1.33:12345');
        ws.onopen = () => {
            // Web Socket is connected, send data using send()
            ws.send('Connected!');
            const comn = window.console;
            if(!comn) {
                return;
            }

            const methods = ['log', 'warn', 'error'];
            for(let i = 0; i < methods.length; i++) {
                const original = window.console[methods[i]];
                window.console[methods[i]] = function() {
                    // @ts-ignore
                    for(const argument of arguments) {
                        try {
                            ws.send(typeof argument === 'string' ? argument : JSON.stringify(argument));
                        } catch(error) {
                            // Do Nothing
                        }
                    }
                    original.apply(window.console, arguments);
                };
            }
        };

        ws.onclose = function() {

            // websocket is closed.
            alert('Connection is closed...');
        };
    }

and this tool running:

$ websocat -s 10.0.1.33:12345

in my terminal. Make sure to change the IP to your own and pick a port at random. This is FAR from a good solution and I make NO promises about the code. I literally wrote that in 5-10 min max, I just wanted a POC. It does work and I can see it being built upon to provide a turnkey solution for this in the future.

I just attempted to use Safari again for debugging and it crashed the window almost immediately 🙄. I am going to upgrade to Mojave sometime soon to see if that improves anything but I don't anticipate it doing so.

[abutizi]

@joshstrange Thanls a lot for sharing mate. It does work. I'm just wondering, if it took you only 10 min to create this work-around, why does the Ionic Team not look into this issue?

[sjregan]

@joshstrange Thanks, great work.

Here is my modified version that uses the 'flatten' library to prevent circular JSON issues, sends console arguments concatenated, prepends the console method and outputs any caught errors to console.

    takeOverConsole() {
        const ws = new WebSocket('ws://10.0.1.33:12345')

        ws.onopen = () => {
            // Web Socket is connected, send data using send()
            ws.send('Connected!')

            const comn = window.console

            if (!comn) {
                return
            }

            const methods = ['log', 'warn', 'error']

            for (let i = 0; i < methods.length; i++) {
                const original = window.console[methods[i]]

                window.console[methods[i]] = function () {
                    const output = []

                    try {
                        // @ts-ignore
                        for (const argument of arguments) {
                            output.push(typeof argument === 'string' ? argument : stringify(argument))
                        }

                        ws.send(methods[i].toUpperCase() + ': ' + output.join(', '))
                    } catch (error) {
                        window.console.error('Websocket Console Error', error)
                    }

                    original.apply(window.console, arguments)
                }
            }
        }

        ws.onclose = function () {
            // websocket is closed.
            alert('Websocket Console closed.')
        }
    }

[abutizi]

thanks @sjregan

However I keep getting this message: "Only WebSocket connections are welcome here" on my ionic page when I start listening. Am I doing something wrong?

Insdie websocket console, it prints this: websocat: WebSocketError: I/O failure

[sjregan]

@abutizi no idea sorry, this is the first time I've used websocat. Check your websocket URI and make sure you don't have a proxy messing with your connection.

[macekCZ]

I develop apps on Windows but testing via DevApp on iPhone ,.. any chance to see debug log?

[joshstrange]

As of the newest ionic cli it looks like --consolelogs works ("-c" is no longer supported since it is used as shorthand for --configuration it looks like). This is GREAT news but I'm still not seeing errors in the console. So I sometimes get a white screen on device and no output in the terminal. I have to open up safari to see the error. The --consolelogs appears to look like it should be working for "console.error" as well. Any idea why it's not getting printed?

[imhoffd]

@joshstrange Thanks for the report! Looks like we're not serializing Error objects very well. I made an issue for that: https://github.com/ionic-team/angular-toolkit/issues/152

[joshstrange]

While we wait on a better fix I wanted to throw out a quick and dirty fix for people like me:

Add to node_modules/@ionic/angular-toolkit/assets/consolelogs.js:56 <- The line number might be off, just put it at the top of the for() loop before the msg.data.push(arguments[i]) line.

if (arguments[i] instanceof Error) {
  arguments[i] = {
    name: arguments[i].name,
    message: arguments[i].message
  }
}

No promises on if this won't cause other issues but it's working for me (and quite helpful since safari likes to crash as soon as I attach to my app 🙄 ). I am normally the first one to recoil in horror at modifying node_modules but that is normally because it messes with our build server (obviously) but I'm ok with this change since it's just for local development purposes. I hope this helps someone else!

Also HUGE thank you to @dwieeb as without his help and pointing out where the issue was I wouldn't have gone looking for a quick fix. Also thank you for the quick reply and logging that issue!

[selected-pixel-jameson]

You can only use Safari to debug / log values in the console if it's on the same version as your phone. Since I do not, like most people, want to update to Catalina and my phone is on iOS 13.3 I can't see my device to show the logs.

This leaves only the option for XCode to debug anything that has to deal with native functionality. This is a huge fail IMHO. I can't believe this has been open for this long.

[joshstrangetp]

@selected-pixel-jameson I too am not planning on upgrading to Catalina and I have not yet tried Safari debugging on my phone (Safari debugging is terrible). You can still use the --consolelogs flag which is what I do to get my logs in the terminal.

[selected-pixel-jameson]

I redact my post then. I thought this was something else as I was no longer seeing logs when running ionic cordova ios -lc it appears as if the flag has changed. Would be nice to have that in the --help... maybe I just missed it then.

[joshstrangetp]

@selected-pixel-jameson Console logs didn't work AFAICT when Ionic 4 launched and they added it after this ticket (or other feedback). Also there is STILL a bug when trying to print errors that does not appear to be a high priority. I have a workaround here: https://github.com/ionic-team/ionic-cli/issues/3169#issuecomment-503643979 -- For myself I use patch-package to fix this in my projects.

[ludufre]

@selected-pixel-jameson ionic cordova run ios -l --consolelogs