Showing javascript console in Hype Reflect

I’m having a problem that only shows up in mobile layouts. For that reason, I’d like to be able to see the Javascript console on my iPad and iPhone in Hype Reflect. There is an icon to show the console and, when tapped, the white space for the console duly appears, but I never get any console output appearing in it (whereas running the same Hype document in Safari generates console output as expected).

Have I missed something? Is there something I should have switched on? Has anyone got console output working in Hype Reflect on a mobile device?

Many thanks for any suggestions.

How are you logging? Hype Reflect hooks into console.log() calls only and displays those.

If you are expecting other types of calls to show up they will not - this is an unfortunate limitation of embedded web views. Depending on your needs it may be better to use the send to mobile safari button in Reflect and use remote web inspection to get a full console.

Just adding on to this. I don’t get any console.log() 's in Hype Reflect either. Updated to the latest version but still no joy. As OP said … preview in desktop browsers console.log() fine

1 Like

In the meantime, one can always hand of the Hype Reflect session to Safari and use the web console feature on a connected mac (lightning cable works great).

1 Like

Don’t really want to have to connect a cable and go through the motions of setting my iPad’s Safari to web inspector if the functionality is there in Hype Reflect however I appreciate that this would be a workaround :wink:

Hype Reflect can currently only show string logs; if it is another type you will need to manually coerce to a string first:

console.log("" + myObject);

(though that will probably not print out as much as you’d like, you may need to use something like JSON.stringify() if it can be output as JSON data). Realistically using the Safari remote web inspector is going to be your best bet to help debug - apps like Reflect not given true console access.

I have a change in the works to do this coercion automatically but it has not been released yet.

Not showing string logs for me.

Understood. I would have thought though that strings wouldn’t be a problem. It’s only that I came across this when logging strings for when certain function fire.

I just tested and a simple case still is working for me. Can you provide an example document with steps to repro? Thanks!

Sure. Here is the file

logging_test.zip (12.6 KB)

And a screen shot from iPad with no output. Console logs fine in desktop browser.

Cheers for looking into it. It’s no biggie as I do most debugging in browser but for just text it was annoying having to link everything up :slight_smile:

Try running Hype (the mac app) in light mode :sweat_smile:.

Reflect’s color mode is based on the Mac app. When in dark mode the text would be white, expecting a dark background. It appears we used to have the console be transparent to the view’s light or dark vibrancy (blur) in the past, but there was probably some change that made it opaque with white as the default webview color. I’ve fixed this for a future version.

Thanks!

I had a feeling it was white text on white background as otherwise more people would have complained … however I can’t have Hype in “light mode” as it messes with my whole aesthetic … argh but at least I can change if I need to see the console :wink:

While you’re here … is there a chance to be able to add the ability for block commenting text using shortcut like “⌘/” within the Hype function editor?? so you can select like 3 lines and it places “//” in front of them or even just the ability to select x lines and it places a “/* */” before and after?

Cheers for confirming the console issue. It save me having to dig the cable out and connect every time

1 Like

I was hoping to get this in for Whisk (thereby working its way into Hype), but it turns out it isn’t as straightforward as it seems and I had to punt for the v2.0 release. I’m hoping to take a stab at it soon-ish!

1 Like

ok Perfect … keep up the good work :wink:

2 Likes