From 225b6a8f1c4c91da04f60f47e3df9ca7fc955790 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Tue, 12 May 2020 12:50:23 +0200
Subject: [PATCH] :books: Update documentation of frontend debug utils

---
 docs/02-Frontend-Developer-Guide.md | 39 +++++++++++++++++++----------
 frontend/src/uxbox/util/debug.cljs  |  3 ++-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/docs/02-Frontend-Developer-Guide.md b/docs/02-Frontend-Developer-Guide.md
index 006ba681a..446351e26 100644
--- a/docs/02-Frontend-Developer-Guide.md
+++ b/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
 
diff --git a/frontend/src/uxbox/util/debug.cljs b/frontend/src/uxbox/util/debug.cljs
index bd591c8d3..259905cdc 100644
--- a/frontend/src/uxbox/util/debug.cljs
+++ b/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"