Supporting console.log output

[santomegonzalo]

Hi, I added some console.log on my code but I'm not seeing the result of that... this is because I want to build some crazy things and will be nice to have a way to debug some lines.
Thanks

[berkcebi]

Hey @santomegonzalo, sorry for the confusion! Normally these logs should be visible either in the browser console if you're debugging using the Web app, or the Console app if you're using the macOS app.

Mind sharing a snippet of the console.log statement you're having issues with, and which platform are you testing the extension on?

[bhainesva]

Hi I'm also having trouble seeing console logs. Here's the layer function I have.

function layer(context, selectedLayer) {
  console.log("test");

  return selectedLayer.name;
}

I'm using the macOS app (Version 2.2.5 (609)). The function works (I can see the output inside zeplin) but I don't see the logs in the console where I ran npm start. I do see the logs when I run npm run exec -- layer and when I use the web app.

[mrrhysbutler]

I am in a similar boat, using the macOS app Version 2.2.5 (609)

[ashleahhill]

This was extremely frustrating for me yesterday (especially because "Reload Local Extensions" doesn't seem to work, zeplin/zem#14). I found logs, but they're not great:

My setup

Version 2.2.6 (616)
Mac OS 10.14

What I did:

1. Put logs in code
2. Start zem server
3. Install local plugin
4. Go to Help > Show Logs in Finder
5. Unzip the file
6. Open the newest file in Console (the app Console, not a command line like Terminal)
7. Logs will be there, (tagged with the display name of your extension, which is nice)

This is better than nothing but still a pretty bad dev experience.

1. These logs don't update, you will have to "Show Logs in Finder" and unzip the archive every time for it to see new logs
2. You can only log primitives. You won't get expanded values the way you do when running zem exec.

For 1, I've tried looking for a log file that I could tail, but no luck so far.
For 2, it seems like one should be able to hook into Webpack Dev Server to get logs or build their own dev server to get around this but hopefully this is my last day of working on my plugin so I'm not pursuing that.

[samwalshnz]

@ashleahhill Thanks for sharing your process. I've taken your learnings and discovered a way to tail the logs (on a Mac).

Here's my setup + process...

My setup

Version 2.4 (672)
Mac OS 10.14.5 Beta

What I did:

1. Put logs in code
2. Start zem server
3. Install local plugin (localhost URL - not file://)
4. Open /Applications/Utilities/Console
5. In the search bar (in top right), type in process:Zeplin, hit ENTER key, and then type message:[Log] {PLUGIN_DISPLAY_NAME} (e.g. message:[Log] React Native for the React Native Extension), and hit ENTER key again.
6. You should now see a list of logs come through 🙌

[dirtybit]

@samwalshnz Thanks so much for the clarification and steps to follow to view logs from extensions. We've added this to the documentation.