📚 Update documentation of frontend debug utils

docs/02-Frontend-Developer-Guide.md

@@ -3,6 +3,16 @@
 This guide intends to explain the essential details of the frontend
 application.
 
+## Access to clojure from javascript console
+
+The uxbox namespace of the main application is exported, so that is accessible from
+javascript console in Chrome developer tools. Object names and data types are converted
+to javascript style. For example you can emit the event to reset zoom level by typing
+this at the console (there is autocompletion for help):
+
+```javascript
+uxbox.main.store.emit_BANG_(uxbox.main.data.workspace.reset_zoom)
+```
 
 ## Visual debug mode and utilities
 
@@ -10,26 +20,22 @@ Debugging a problem in the viewport algorithms for grouping and rotating
 is difficult. We have set a visual debug mode that displays some
 annotations on screen, to help understanding what's happening.
 
-To activate it, open the REPL (`shadow-cljs cljs-repl main`) and type
-```clojure
-(ns uxbox.util.debug)
-(debug-all!)  ; to enable all visual aids
-(debug! <option>)  ; current options are :bounding-boxes :group :events :rotation-handler
+To activate it, open the javascript console and type
+```javascript
+uxbox.util.debug.toggle_debug("option")
 ```
+Current options are `bounding-boxes`, `group`, `events` and `rotation-handler`.
 
-Then you need to refresh the screen, for example by selecting some shape
-with the mouse.
-
-You can deactivate debug mode with
-```clojure
-(debug-none!)  ; to disable all visual aids
-(-debug! <option>)  ; to disable only one
+You can also activate or deactivate all visual aids with
+```javascript
+uxbox.util.debug.debug_all()
+uxbox.util.debug.debug_none()
 ```
 
 ## Debug state and objects
 
 There are also some useful functions to visualize the global state or any
-complex object:
+complex object. To use them from clojure:
 
 ```clojure
 (ns uxbox.util.debug)
@@ -41,6 +47,13 @@ complex object:
 (dump-objects) ; to print in console all objects in workspace
 ```
 
+But last ones are most commonly used from javscript console:
+
+```
+uxbox.main.store.dump_state()
+uxbox.main.store.dump_objects()
+```
+
 
 ## Icons & Assets
 

frontend/src/uxbox/util/debug.cljs

@@ -16,7 +16,8 @@
                                      (if (debug? option)
                                        (-debug! option)
                                        (debug! option))))
-(defn ^:export debug-all [name] (debug-all!))
+(defn ^:export debug-all [] (debug-all!))
+(defn ^:export debug-none [] (debug-none!))
 
 (defn ^:export tap
   "Transducer function that can execute a side-effect `effect-fn` per input"