Add a settings panel, currently wanted nobs:

• Max number of recorded transactions (currently 100)
• Max number of recorded network requests (currently 50)
• Max number of db history (currently 100)

Now that the history view has the ability to reset app state to a specific step, it might be useful to be able to re-run certain transactions just by clicking on a button on their row. For example, a load might be triggered by internal logic (say startup), but you may want to retry it in the current context instead of reloading the entire app.

Fulcroinspect version 1.0.16.
Chrome Version 76.0.3809.132 (Official Build) (64-bit)
Os: Mac 10.14.6 (18G95)

I have one workspaces defcard that will stop the fulcro inspect db viewer from working. (clicking on the inspector button for the card does nothing) After attempting to open this card i need to restart chrome for the inspector to work.

The card renders and works fine. The name of the card is playlist-viewer-factory. If i change the name of the card to be something else (then restart chrome) the inspector works.

Not really sure what other information would be helpful in debugging this, feel free to ask.

The reporting in fulcro was sending just the expression, but now is sending a tx (as a vector).

I should either change the reporting in Fulcro, or fix inspect.

Fulcro 3 will include hooks to measure rendering performance. Add a tab to display the info.

The i18n support could easily let you edit strings in-place in the UI, and save the translations to the PO files. This would make internationalizing your app a very easy task. Basic steps:

• Add dev mode hooks to tr and friends to support toggling into "editable mode". Normally they render strings...in this mode they'd render interactive components that look like strings.
• Add tab to inspect that allows you to see the internationalized strings as a table, where selecting an element highlights it in the UI, etc.

• Store last N states
• UI to navigate the data

Some way to add watches that are Fulcro queries, so we can get live feedback on some specific part of the DB filtered via the given query.

When the page reloads the iframe seems to get re-mounted, when that happens the keyboard event listener is lost and for some reason (debug needed) it can't attach the event back. This doesn't prevent the shortcut to work on the main frame, clicking there and hitting the shortcut works, but it's a little annoyance that you have to click out before the keystroke works.

@levitanong reported:

Below is the minimal case, based off of the shadow-cljs template.
https://github.com/levitanong/load-ok-repro

Relevant bits are in client.cljs, specifically line 22 and below.

I have verified that Inspect is causing the breakage.

Add option to make inspector live attached to the footer instead of the right side.

The history slider on the DB tab should do a better job of rendering so that the UI looks correct. Leveraging the history against the real root render might be possible, and would be desirable...a better general history API into Fulcro itself would be helpful, perhaps. The current history support in Fulcro could probably be leverage to make this more consistent and sane (e.g. marking history steps with a unique ID that could be shared with the copy of state in Inspect, along with a goto function that Inspect could use to control the history "cursor")

0. Open up fulcro-inspect
1. Make a Foo with tempid
2. In a mutation, resolve tempid to some real id
3. Change other details in Foo, fulcro-inspect doesn't update.
4. Close and reopen fulcro-inspect, fulcro-inspect works again

• Flame graph support on network requests
• Run queries against app network

The idea is to have an action to "convert" an ident view into its contents in place.

The current version of fulcro-inspect 2.2.0-beta8 is not connecting to my app which runs in an iframe.

I updated shadow-cljs (2.8.61) and Fulcro (3.0.2), and sprang upon this problem. I'm not sure if either or both are the cause of it.

The required JS dependency "socket.io-client" is not available, it was required by "com/fulcrologic/fulcro/inspect/inspect_ws.cljs".

So I did the old yarn add socket.io-client. Though the complaint is gone, Fulcro Inspect seems unsatisfied by this solution, reporting that no app is connected.

Hi,

ClojureScript 1.10.64 is no longer returning 2-element vectors for map entries, it now returns a dedicated map entry type and that seems to be the cause of this error:

I was writing a query today and felt I needed more space to see the whole thing. Would it be possible to make these areas resizable? 😬

Thanks!

On large apps, the processing of fulcro-inspect handlers can have a perceived effect on the app performance. Moving the processing to a web worker might solve this issue.

• Record state snapshots
• UI to navigate recorded data snapshots
• Apply snapshot back to app state

Got a custom remote that goes into an infinite loop with inspect. Works fine with prior versions (was using beta8 I think). It is hitting REST endpoint. Not sure why yet, but it is quite surprising and bothersome...v2.2.1

Need a different palette for DM or perhaps colors that work well in both

Chrome throws a SecurityError when third-party cookies and site data are blocked, resulting in a blank Fulcro Inspect tab.

Relevant ressource:
https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

In the project I'm working on, about 18 copies of this error appears. I currently suspect it's related to the number of mutations I've registered. I will investigate soon. As the title says, minimal case to follow.

[fulcro.client.impl.application] Mutation  fulcro.inspect.ui.transactions/add-tx  failed with exception Error: Assert failed: Path [:fulcro.inspect.ui.transactions/tx-list-id [:fulcro.inspect.core/app-id some-app.ui.root/Root] :fulcro.inspect.ui.transactions/tx-list] for append must target an app-state vector.
(vector? (get-in state data-path))

See fulcrologic/fulcro#118 for code.

If you follow the instructions you should get a working app.

Run the client and server and open fulcro inspect.

Click the button. You'll notice that UI changes, but no transaction shows up in transactions tab of fulcro inspect.

A remote app to inspect your fulcro data. This feature is for a new stand-alone app, this app will open a web-socket port and have a web-ui view (probably in Electron), this will listen for changes into apps that connect remotely to the stand-alone app.

With this, we can inspect apps running on different environments like React Native, Chrome plugins/extensions, etc.

Sometimes when I'm debugging why a component is not updating, it would be useful to trigger a root re-render to see if it's a query/follow-on-read issue or a state issue.

Probably makes sense to put this button in the elements tab.

(ns applets.inspect-bug.core
  (:require [fulcro.client :as fc]
            [fulcro.client.primitives :as prim :refer [defsc]]
            [fulcro.client.dom :as dom]))

(defonce app (atom nil))

(defsc Business [_ {:business/keys [favorite-food]}]
  {:initial-state (fn [_] {:business/favorite-food "lolly-pops"})
   :query [:business/favorite-food]}
  (assert (string? favorite-food))
  (dom/p (str "In this business the favourite food is " favorite-food)))

(defsc BusinessRoot [this _]
       {:initial-state (fn [_] {:ui/root (prim/get-initial-state Business _)})
        :query         [{:ui/root (prim/get-query Business)}]}
       (let [{:ui/keys [root]} (prim/props this)]
         (dom/div ((prim/factory Business) root))))

(defn mount []
  (reset! app (fc/mount @app BusinessRoot "app")))

(defn ^:export init [_]
  (reset! app (fc/new-fulcro-client))
  (mount))

So the above code works fine. But when you introduce Fulcro Inspect and press the key that toggles the tool's visibility you get a big stack trace. I won't include the full thing, but these lines might help:

core.cljs:11 Uncaught Error: Assert failed: (string? favorite-food)
...
fulcro.client.primitives.force_update.cljs$core$IFn$_invoke$arity$2 @ primitives.cljc:2045
fulcro$client$primitives$force_update @ primitives.cljc:2041
fulcro.client.primitives.force_update.cljs$core$IFn$_invoke$arity$1 @ primitives.cljc:2049
fulcro$client$primitives$force_update @ primitives.cljc:2041
fulcro$client$primitives$update_component_BANG_ @ primitives.cljc:2069
fulcro$client$primitives$optimal_render @ primitives.cljc:2114
fulcro.client.primitives.Reconciler.fulcro$client$impl$protocols$IReconciler$reconcile_BANG_$arity$2 @ primitives.cljc:2257
fulcro.client.impl.protocols.reconcile_BANG_.cljs$core$IFn$_invoke$arity$2 @ protocols.cljc:23
fulcro$client$impl$protocols$reconcile_BANG_ @ protocols.cljc:11
fulcro.client.primitives.Reconciler.fulcro$client$impl$protocols$IReconciler$reconcile_BANG_$arity$1 @ primitives.cljc:2232
fulcro.client.impl.protocols.reconcile_BANG_.cljs$core$IFn$_invoke$arity$1 @ protocols.cljc:23
fulcro$client$impl$protocols$reconcile_BANG_ @ protocols.cljc:11
(anonymous) @ primitives.cljc:1971
requestAnimationFrame (async)
fulcro$client$primitives$queue_render_BANG_ @ primitives.cljc:1966
fulcro$client$primitives$schedule_render_BANG_ @ primitives.cljc:1971
fulcro$client$primitives$add_fn @ primitives.cljc:2191
cljs.core.Atom.cljs$core$IWatchable$_notify_watches$arity$3 @ core.cljs:4394

I tried to search for a value using ctrl/command + f but it pops up search in the current page, not the DB. I noticed there is a Find field at the bottom but that doesn't work as well.

Thanks!

The plugin seems to be working for me, but at first I thought it was broken because the icon in the main toolbar is always "off", even though it has detected an app andthe menu item within it is working, as is the devtools tab itself.

Not sure what happened, but when using the chrome plugin it started sucking CPU like mad. The older version of inspect didn't do this. The main note is the the app I'm running has a very high transaction rate during page load (perhaps 50+ transact! calls on page load).

I had to back out to an earlier version for normal work because it added too much overhead. 2.1.0 is fine.

Experiment to try to dock the inspector panel so you can see more of the page content.

• Pick elements by clicking
• Element tab UI - class name
• Element tab UI - props
• Element tab UI - ident
• Element tab UI - query
• Pick only from the current app
• Arrow design for label

Make inspect remember the view state on page reload; the settings will be saved on local storage.

Things to be remembered:

• Open state (open/closed)
• Inspector size
• Dock Side

Currently, we send the db from the devtool to the screen, this can be made more efficient by using the hash optimization like we do for transaction transmission.

It seems that the query tab sometimes has problems understanding deep levels of nesting (though I've only encountered this in writing arguments to functions).

To reproduce, paste the following into the editor:

[{(:zd/search_articles_advanced_2
   {:n_results 10
    :filter_expr {:should [{:must [{:terminal_exprs {:matches_text "Water"}}]}]}})
  [:zd.Article/article_title]}]

I just customized networking for file uploads, and when inspect is present it wraps the networking and causes it to mis-detect the kind of network, which in turn sends nil for the progress update function, and that keeps progress updates from reporting.

This is a fulcro incubator specific thing, but perhaps it will also apply to a few fulcro things. These days, I get a lot of

fulcro.incubator.ui-state-machines/trigger-state-machine-event
fulcro.incubator.pessimistic-mutations/finish-pmutation
fulcro.client.mutations/merge!

so the transactions tab in the fulcro inspector becomes less useful. I almost always have to scroll to the right to be able to distinguish between all these generic mutations. I think exposing IDs (somehow) would be a huge usability boost.

Add a text field on the transactions tab, from where the user could invoke mutations.

While using inspect the "resizer" jumped off the screen to 166% left.

The system might stop working in case user client version of Fulcro inspect is outdated. We should verify and alert the user in case he is using some outdated version.

I am getting this 3 times when starting my application that uses the tool:

[ 2.547s] [fulcro.client] Mutation fulcro.inspect.ui.transactions/add-tx failed with exception Error: Assert failed: Path [:fulcro.inspect.ui.transactions/tx-list-id [:fulcro.inspect.core/app-id nil] :fulcro.inspect.ui.transactions/tx-list] for append must target an app-state vector. (vector? (get-in state data-path))

Does the host application have to have a "displayName"? From the fulcro.inspector source:

(some-> reconciler fp/app-root fp/react-type (gobj/get "displayName") symbol)

What is this "displayName" and how to ensure that hosting applications always have it?