Browser developer toolsλ︎
Developer tools included in browsers (FireFox, Google Chrome, etc.) allow examination of what is happening when you run the JavaScript code created from your ClojureScript code.
| Feature | Description |
|---|---|
| Page Inspector | view / edit the source code of the page |
| Web Console | see log messages and interact with current page via code |
| JavaScript debugger | stop, step through, examine, and modify the JavaScript running on a page |
| Source Maps | format the original ClojureScript code in the browser |
| Network monitor | Network requests when a page is loaded |
| Performance Tools | Analyze a pages responsiveness, JavaScript and layout performance |
| Application panel | Inspect and debug progressive apps, service workers and app manifests |
| Responsive design mode | UI look and behavior of page on different devices and network types |
| Accessibility Inspector | Report on accessibility support of a page |
Supporting toolsλ︎
Learning Resourcesλ︎
- What are browser developer tools
- 15 must know Chrome DevTools tips by Tutorialzine.com
Source Mapsλ︎
Source Maps show you what ClojureScript code created the running JavaScript to aid with debugging.
Ensure source maps are enabled in the browser developer tools.
Chrome DevTools Extensions for ClojureScript developersλ︎
DevTool Extensions add more better presentation of ClojureScript values in Chrome DevTools using custom formatters, more informative exceptions with sanity hints) and support for Dirac DevTools - a fork of the Chrome DevTools.
Install DevTools Extensionsλ︎
Add devtools dependency into your Leiningen's project.clj using the details on the Clojars.org website
Add the DevTools extensions to the startup part of your ClojureScript using the (:require [devtools.core :as devtools]) expression. Then call install! function from devtools.core namespace.
Here is an example of adding the DevTools extension library and calling it with several options
(ns your-project.core
(:require [devtools.core :as devtools]))
; this enables additional features, :custom-formatters is enabled by default
(devtools/enable-feature! :sanity-hints :dirac)
(devtools/install!)
(.log js/console (range 200))
For more details, visit the DevTools Extensions website and clone the sample project.
Dirac DevTools (a fork of Chrome DevTools)λ︎
Dirac DevTools is a fork of the Chrome DevTools.
