Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2022-09-09

Channels

#fulcro
<
2022-09-09
>
zhuxun203:09:19

Recently the chrome extension "Fulcro inspect" stopped working with all my apps. It just says "No app connected". Not sure what I did that caused this.

sheluchin18:09:40

Sometimes it acts up a little and reinstalling helps.

zhuxun203:09:56

I have (inspect/app-started! SPA) in the correct place

zhuxun203:09:44

I also have :preloads [com.fulcrologic.fulcro.inspect.preload com.fulcrologic.fulcro.inspect.dom-picker-preload] in my shadow-cljs.edn

zhuxun203:09:01

Has anyone run into similar problem?

zhuxun203:09:26

The inspector still works on https://book.fulcrologic.com/ though, so it must be something in my app that caused this

Jakub Holý (HolyJak)16:09:17

Does the standalone Inspect app work? You can also open dev tools for the extension and see if there are any errors

zhuxun222:09:21

Standalone inspect app (the appimage version) does not even run on my ccomputer...

zhuxun222:09:38

The extension's dev tools does not show any meaningful errors

zhuxun222:09:34

Is there a way to manually "force" a connection with the inspector?

dvingo23:09:04

As another possibility.. I have a fork of inspect that I ported to fulcro3 https://github.com/dvingo/fulcro-inspect/ you can try that out, I can help you debug if it doesn't work.

zhuxun223:09:24

The thing is, I just downloaded the https://github.com/fulcrologic/fulcro-template and my inspector works perfectly

zhuxun223:09:45

It must be something I changed in my code that made it not working with inspector

zhuxun223:09:28

But what could it be? Shouldn't it be as simple as putting the com.fulcrologic.fulcro.inspect.preload in the preloads?

dvingo23:09:07

you can inspect the inspector If you detach the Dev Tools (icon next to x in the top right corner - or ctrl-shift-d) in a separate window, and press ctrl-shift-i (cmd-alt-i) while the Dev Tools window is focused, you will invoke the Dev Tools for the Dev Tools themself. There will also be an entry in the <chrome://extensions?id=> page, click the appropriate entry under "Inspect views".

zhuxun223:09:35

@U051V5LLP this is what i see in the devtools of devtools:

zhuxun223:09:44

Here is where that assertion error was thrown

zhuxun223:09:59

What is the mechanism of "connection" between my app and the inspector?

zhuxun223:09:21

Are there state fields I can check for abnormalities?

Jakub Holý (HolyJak)10:09:09

Did your app work before with Inspect? Can you look at the version control history to see what changed?? This assertion tells me nothing 😢

zhuxun213:09:32

I made a minimal repo (literally a hello world app) that demonstrates the issue. https://github.com/w9/test-fulcro-inspect On my computer, with this app running, open the Fulcro Inspect, the app will not connect to the inspector. Could anyone give it a try on your computer see if you see the same problem?

Jakub Holý (HolyJak)15:09:03

it works for me, when I add :dev-http {8000 "public"} to the shadow config and run it via npx shadow-cljs watch app With the python server it works too but the DB is empty.

zhuxun215:09:04

Yes. Because I changed the index.html to loading the main.js directly

zhuxun215:09:28

If I load the main.js asynchronously, it will not work

zhuxun216:09:21

Do you know how to force a connection between the app and the inspector if the app was not initialized at page load?

zhuxun216:09:26

To see what I mean, you can pull the latest version from https://github.com/w9/test-fulcro-inspect

zhuxun216:09:38

You should see that the inspector will stop working

dvingo16:09:24

i tried it and the inspector didn't show up

zhuxun222:09:10

❗I found the fix now. For anyone who is trying to make Fulcro Inspect to work with an asynchronously loaded Fulcro app, there are two things you need to do: 1) Make sure your <html> tag has the attribute __fulcro-inspect-remote-installed__ at the page load. Normally, this attribute is added by (inspect/install {}), which is what :preloads [com.fulcrologic.fulcro.inspect.preload] does. However, if the Fulcro app is loaded asynchronously by the time (inspect/install {}) is run, it is too late, as the Fulcro Inspector Chrome Extension checks the __fulcro-inspect-remote-installed__ only once at start-up. (I believe this is something that can be fixed in the extension code). 2) You need to manually run (inspect/start-send-message-loop) after your Fulcro app has been loaded. This is because when the inspector extension starts, it will fire a "message" event to the window that has e.data["fulcro-inspect-start-consume"] == true, which will normally be caught by the event listener set up by (inspect/install {}). However, since we did not run (inspect/install {}) in time before this event got fired, we missed the event. Therefore, we need to manually simulate what this event triggers, which is to run (inspect/start-send-message-loop). If you do 1) and 2), the inspector will be connected to the async-loaded app.

Jakub Holý (HolyJak)09:09:05

I am happy to hear that you managed to sort it out! That was a though one! Doesn't it suffice to open the browser dev tools only after the app is loaded? Or does it need to be open before you load the app?

zhuxun211:09:08

> Doesn't it suffice to open the browser dev tools only after the app is loaded? No. The Fulcro Inspector Chrome Extension checks the __fulcro-inspect-remote-installed__ https://github.com/fulcrologic/fulcro-inspect/blob/master/src/chrome/fulcro/inspect/chrome/content_script/main.cljs#L38 at start-up.

Jakub Holý (HolyJak)11:09:40

But does it start when the dev tools are closed? that sounds hard to believe

zhuxun211:09:09

I tested it and only doing 1) does not work, even if I wait for the app to load before I open up the devtools, or close the devtools and then open it again. My guess is because of the defonce (https://github.com/fulcrologic/fulcro-inspect/blob/master/src/chrome/fulcro/inspect/chrome/content_script/main.cljs#L77) ensures that this check only happens once.

zhuxun211:09:40

If you can edit the inspector source code, I suggest adding a button called "reconnect" which re-triggers this event-loop.

Jakub Holý (HolyJak)14:09:06

thx for the information

surferHalo03:09:44

Anybody know why fulcro keep emitting this MessageEvent log? It comes from loadHighlights.bundle.js, and happens about 20 times when transact one load.

zhuxun213:09:32

I made a minimal repo (literally a hello world app) that demonstrates the issue. https://github.com/w9/test-fulcro-inspect On my computer, with this app running, open the Fulcro Inspect, the app will not connect to the inspector. Could anyone give it a try on your computer see if you see the same problem?

zhuxun222:09:10

❗I found the fix now. For anyone who is trying to make Fulcro Inspect to work with an asynchronously loaded Fulcro app, there are two things you need to do: 1) Make sure your <html> tag has the attribute __fulcro-inspect-remote-installed__ at the page load. Normally, this attribute is added by (inspect/install {}), which is what :preloads [com.fulcrologic.fulcro.inspect.preload] does. However, if the Fulcro app is loaded asynchronously by the time (inspect/install {}) is run, it is too late, as the Fulcro Inspector Chrome Extension checks the __fulcro-inspect-remote-installed__ only once at start-up. (I believe this is something that can be fixed in the extension code). 2) You need to manually run (inspect/start-send-message-loop) after your Fulcro app has been loaded. This is because when the inspector extension starts, it will fire a "message" event to the window that has e.data["fulcro-inspect-start-consume"] == true, which will normally be caught by the event listener set up by (inspect/install {}). However, since we did not run (inspect/install {}) in time before this event got fired, we missed the event. Therefore, we need to manually simulate what this event triggers, which is to run (inspect/start-send-message-loop). If you do 1) and 2), the inspector will be connected to the async-loaded app.