📚 Document visual debug utlities

docs/02-Frontend-Developer-Guide.md

@@ -3,7 +3,36 @@
 This guide intends to explain the essential details of the frontend
 application.
 
-**TODO**
+
+## Visual debug mode and utilities
+
+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
+```
+
+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
+```
+
+There are also some useful functions:
+```clojure
+(dump-state) ; to print in console all the global state
+(dump-objects) ; to print in console all objects in workspace
+(logjs <msg> <var>) ; to print the value of a variable
+(tap <fn>) ; to include a function with side effect (e.g. logjs) in a transducer.
+```
 
 
 ## Icons & Assets

frontend/src/uxbox/util/debug.cljs

@@ -35,5 +35,5 @@
   (logjs "state" @store/state))
 
 (defn dump-objects []
-  (let [page-id (get @store/state :page-id)]
+  (let [page-id (get @store/state :current-page-id)]
     (logjs "state" (get-in @store/state [:workspace-data page-id :objects]))))