Where is the console.log output?


#1

I am not able to find where I can view the output for console.log.

I have viewed the documentation, for example at https://docs.nativescript.org/angular/tooling/debugging and https://docs.nativescript.org/angular/tooling/chrome-devtools, and I don’t see express instruction on how to actually open the debugger in Chrome (or safari or terminal). The docs note commands such as $ ‘tns debug ios’, but they don’t describe where the output will be (unless I am missing it). I am currently focused on ios, as I have not yet got the android setup working.

For debugging, I have run commands such as $ tns debug ios and $ tns debug ios --chrome, but to no success yet. My terminal does not output any fatal errors, but no console.log messages appear in the terminal.

The terminal does display a message: “To start debugging, open the following url in Chrome…”. When I go to that url on my mac in chrome, it shows what looks to be a debugging window, and says “Finished loading inspector modules”, but again there is no console.log output.

I see references to this problem elsewhere, especially regarding ios, like: https://github.com/NativeScript/nativescript-cli/issues/3141 and CLI console.log not printing, but I don’t see any resolution. It is referenced occasionally as an ios-caused issue, but is it resolved?

For console.log, btw, I am using very simple code, such as:

html:

 <Button text="Click this awesome button" (tap)="showConsole()"></Button>`

ts:

 showConsole(){
    console.log('tapped')
}

Is there a place for me to view console.log output for ios?


#2

Update: ‘$ tns run ios’ now seems to display console output in the terminal. Is there a way for me to view the console output in Chrome?

Related question–I assume the answer is no, but is there a way for me to view not just console output but the app itself in the chrome or safari browser?


#3

I’m not sure what’s your setup like, but for me, when I use Chrome for debugging and I print something to the console, it appears in VSCode’s console output as well as in Chrome’s console. So I get the output at two places at the same time.

OS X 10.11.6
Xcode 8.2.1
CLI 3.4.1

As far as viewing the app in the browser, NativeScript is not a hybrid app like Cordova. Apps written in NativeScript are native applications. It doesn’t have a webview, and as such you cannot display the app in the browser.


#4

Thank you. That makes sense about not being able to see the app in the browser.

I have been able to view the console output in Chrome debugger. The way I do it is, from the app folder in the terminal:

  1. $ tns debug ios
  2. in the resulting terminal output, there is a line that says “to start debugging, open the following URL in Chrome:…”, and I copy the url
  3. the debugger works at that url.

I assume this is the standard way to do it. I believe the reason this didnt work previously is that there were some syntax errors in my code earlier when I would run $ tns debug ios. The errors were noted in the terminal (in the same color text as all other terminal results–easy to miss unless you are looking for them), and that seemed to be enough to stop the debugger from running properly.

Correcting those syntax errors, I now can view the debugger with console.log output.


#5

I am still looking for a reliable way of viewing debugging/the console output. Any suggestions?

Here is what I have tried:

I can see console output it in the terminal, but I want a spot that is easier to read (and not mixed with all the other messages that are in the terminal). The only other method I have used is Chrome debugging: When I run $ tns debug ios, I do get a message about the url for debugging in the terminal, but when I go to that url, often nothing happens. Right now, for instance, I have been running my app but the chrome debugger dev tools page is blank.

Even when I have gotten the chrome devtools url to run before, it takes a bit to kick in, and then each time I save a change in the code I have to go back into the devtools screen, and hit a reactivate button.

What is the best way to view error / console messages? Anything better than Chrome devtools?

If there is nothing better, then is there something I need to do to make chrome devtools work consistently?

[Note: I know VS Code has some good options for debugging with the N plugin, but I am not using that at the moment for other reasons.]


#6

When I want to output something in the terminal that is “easier” to spot (from other messages), I usually clear the terminal contents first, so it starts “fresh”.

The other thing I usually do is insert “fancy separators”, eg a line of dashes, equal signs, stars, etc, and/or combined with multiple line feeds before and/or after the message I want to output. This will give good visibility.

=========================================================
x = 12
url = "http://www.url.net"
location = {x: 12, y: 13}
=========================================================

#7

Thank you. I am looking more for a tool that provides a consistent “console” within a debugger. I have been testing out Sidekick, and it seems promising. I have been able to open up a debugger window, like is done in this intro video:https://youtu.be/tG7c2nZvhTg?t=3m32s

So far, it is working more reliably than when I go to the chrome url for debugging.

I am still interested to hear if others have a way of getting the chrome url to work better, or if folks have a different method for viewing console and errors.

The Sidekick-started chrome debugger is decent, but (relatively minor gripe): I can’t resize it to get it sufficiently small so I can view it while also viewing my code editor. it resizes, but only to a fairly wide minimum width.


#8

May be trace is another way just in case if you want to take more control over logging than just printing it on console, you may able to upload it somewhere or write it to a file and share just in case. At least I haven’t tried it myself yet, but it was something interesting.


#9

Thanks. I will take a look.


#10

@WS123, what versions of the CLI and the ios runtime are you using? The chrome devtools debugger attaches successfully for me, and I can preview the console output there. And sure, since the communication is over a socket, whenever you restart the app, you’d need to refresh the connection by means of hitting F5, or refreshing the chrome devtools page.


#11

Thanks. Yeah your described behavior of the debugger makes sense, and is what I find. I have been using Sidekick the last few days, and that seems to work best from what I have seen.


#12

Sidekick is nothing more than a visual interface over the CLI and what it does. Feel free to go with whatever makes your development easier!