Nativescript: [TNS 3.0 RC] Console.dir not working as expected compared to Console.dump

Created on 11 Apr 2017  ยท  22Comments  ยท  Source: NativeScript/NativeScript

When logging objects or arrays with the replaced Console.dir I get a non-detailed dump.

const arr = [
  { id: 1, title: "Item 1" },
  { id: 2, title: "Item 2" },
  { id: 3, title: "Item 3" }
];

console.dir(arr);

The logged dump:

CONSOLE LOG file:///app/main-page.js:33:14: [object Object],[object Object],[object Object]
    0: [object Object]
    1: [object Object]

I want to see the properties of each object, but they render as [object Object]. Also, it doesn't even log the last, third, item.

ios

Most helpful comment

Just tested in 3.3.1

console.dir({
    type: "Apple",
    color: "Red"
})
CONSOLE LOG file:///app/main-page.js:3:14: [object Object]

All 22 comments

Hi @NordlingArt,
Could you verify, whether you are using the latest @rc version? I tested your case while reusing the above-given code snippet and the object was dumped in the console as expected:

Result:

JS: === dump(): dumping members ===
JS: [
JS:     {
JS:         "id": 1,
JS:         "title": "Item 1"
JS:     },
JS:     {
JS:         "id": 2,
JS:         "title": "Item 2"
JS:     },
JS:     {
JS:         "id": 3,
JS:         "title": "Item 3"
JS:     }
JS: ]
JS: === dump(): dumping function and properties names ===
JS: === dump(): finished ===

@tsonevn - These properties are taken from the tns-core-modules package.json file:

{
  "_from": "tns-core-modules@rc",
  "version": "3.0.0-rc.2"
}

Also, from the app's package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.demo",
    "tns-ios": {
      "version": "3.0.0-rc.1-2017-3-28-2"
    }
  },
  "dependencies": {
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "rc"
  },
  "devDependencies": {
    "nativescript-dev-android-snapshot": "^0.*.*"
  }
}

A tns info from the Terminal shows:

โ”‚ Component            โ”‚ Current version        โ”‚ Latest version โ”‚ Information   โ”‚
โ”‚ nativescript         โ”‚ 3.0.0-rc.1             โ”‚ 2.5.4          โ”‚ Up to date    โ”‚
โ”‚ tns-core-modules     โ”‚ 3.0.0-rc.2             โ”‚ 2.5.2          โ”‚ Up to date    โ”‚
โ”‚ tns-android          โ”‚                        โ”‚ 2.5.0          โ”‚ Not installed โ”‚
โ”‚ tns-ios              โ”‚ 3.0.0-rc.1-2017-3-28-2 โ”‚ 2.5.0          โ”‚ Up to date    โ”‚

Hi @NordlingArt,
In my further research, I found that this issue is reproducible only when you building the app for iOS with tns run ios. For tns run android console.dir should work as expected.
Could you verify on your side, whether this is reproducible only while building for iOS?

@tsonevn That may be true. I am unable to check on Android unfortunately as I don't have the Android SDK installed. Maybe someone else here can test?

@NordlingArt just tested on android and it works (tns 3.0 rc)

1

@tsonevn - Will this be fixed for iOS in 3.0 release? It's extremely hard to debug without a proper console.

Hi @NordlingArt,
I discussed this issue with the NativeScript team, however, we will provide a fix for this issue for some of the next version after 3.0 release.
As a temporary solution, you could use console.log(JSON.stringify(<parametar_name>)), which will help you to print in the terminal the argument similar to console.dir.

Let me know, whether this is applicable for you.

@tsonevn - I have used console.log(JSON.stringify(obj, null, 2)) sometimes as a work-around. However, it doesn't work when the object has a circular structure as that would cause an infinite JSON tree.

I hope it will be part of a version not too long in the future as it slows down development time a lot :/

This issue persists in version 3.0.3

HI @matheusabr,
I just tested console.dir on my side on iOS and it seems to dump the object as expected. for your convenience, I am attaching sample project, you could review it and to verify, whether I am missing something.

Hi @tsonevn

I'm seeing the problem in 3.0.3, iOS

Steps to reproduce:

  1. installed nativescript (3.0.3) on Mac OS X.
  2. Followed the NativeScript tutorial, Chapter 1 here on debugging: http://docs.nativescript.org/angular/tutorial/ng-chapter-1#13-debugging-apps

This code:
export class AppComponent { constructor() { console.log({ type: "Apple", color: "Red" }); } }

Logs this (missing 'color' property):
CONSOLE LOG file:///app/app.component.js:7:20: [object Object] type: Apple

Insetad of this:
JS: === dump(): dumping members === JS: { JS: "type": "Apple", JS: "color": "Red" JS: }

Hi @two-bridges
I think you should use console.dir instead of console.log. Give it a try and let us know the output.

This is quite bothersome, I see the same problem here, on ios (NS 3.2).
What's even more annoying is the fact that running console.log(JSON.stringify(data, null, 4)); prints out as {, and if I remove , 4, it prints out as a bulk of text which is cut off randomly (current data object got cut off after 881 symbols, it simply prints out nothing after that)

Current workaround for me, to read the actual data received, is to use one helper function (it allows one to see data in circular json, however, it prints only current depth level):

listObject(data) {
        // allows us to console.log circular objects, but prints only current level depth
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                console.log(key + โ€ -> โ€ + data[key]);
            }
        }
    }

I can confirm I've had issue with iOS and 3.x (including 3.2) and console.dir just printing [object Object]. I could have sworn in v2.x console.dump always worked. The easist struture to see this on is:

var data = [{name: "hi"}]; console.dir(data);

In addition there is a console.log issue like @dxshindeo mentioed above about loosing log data on TNS on iOS, not sure if it is present on Android; that I already reported to the cli repo.

See: https://github.com/NativeScript/nativescript-cli/issues/3105
and https://github.com/NativeScript/nativescript-cli/issues/3106

Just tested in 3.3.1

console.dir({
    type: "Apple",
    color: "Red"
})
CONSOLE LOG file:///app/main-page.js:3:14: [object Object]

Issue still persists in version 3.4.0 tns core modules and 3.4.1 iOS/Android platforms.

"tns-core-modules": "3.4.0"
"version": "3.4.1"

Still having the issue on iOS.

The issue seems to be related to iOS runtime. duplicated with #875

@tsonevn why are you saying this issue seems to be related to iOS runtime when @TimoWestland 's post above which has 5 thumbs up makes it quite clear this is an issue on the Android platform too?

I see this exact same issue on Linux Mint 18.3 using Android.

After modifying the app several times and tns run refreshing it, it started working.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

surdu picture surdu  ยท  63Comments

atanasovg picture atanasovg  ยท  50Comments

ikhsan017 picture ikhsan017  ยท  55Comments

valentinstoychev picture valentinstoychev  ยท  70Comments

NickIliev picture NickIliev  ยท  58Comments