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

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 - inline source maps

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.

Chrome DevTools Extensions - ClojureScript data structure formatting

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.

Dirac DevTools - a fork of Chrome DevTools

References

results matching ""

    No results matching ""