Clojure->Chrome Inspector

inspect.clj

(ns inspect
  (:require [cheshire.core :refer [generate-string]]
            [clojure.java.io :as io])
  (:import  (java.net Socket)

(def host "localhost")
(def port 9000)

(defn cinspect [data]
  (with-open [sock   (Socket. host port)
              writer (io/writer sock)]
    (->> data
         generate-string
         (.append writer)
         (.flush))))

(cinspect {:message "Hello!"})

transport.js

var net = require('net')

var port = 9000
var server = net.createServer(socket => {
  let msg = ''
  socket
    .on('data', data => msg += data.toString())
    .on('close', () => {
      console.clear()
      console.log(JSON.parse(msg))
      msg = ''
    })
})

server.listen(port, () => {
  console.info("Server started on port:", port)
})

Clojure -> Chrome Inspector

This is a quick thing I hacked up that allows you to easily inspect large data structures from Clojure (not ClojureScript) using the Chrome Inspector. I liked how nice the output of .log js/console was working in ClojureScript, and wanted to be able to view maps the same way in Clojure since they would get unwieldy in the REPL.

TODO:

• Add custom formatters for Clojure instead of serializing to JSON

Usage:

1. Clone or download this gist
2. Run node --inspect transport.js
3. Open up chrome, and go to chrome://inspect
4. Click on "Open dedicated DevTools for Node"
5. Add cheshire to your project.clj, and use the cinspect function to log your data to Chrome debug tools!

One alternate approach, which I use, is to put together an interactive in-REPL data explorer for large, complex data structures. The one I hacked together is currently oriented toward internal data at my work, but at some point I hope to generalize & open-source it.
Tossing that out just as another option, but I really like this one too & may end up using it. Thanks!

(clojure.inspector/inspect large-map)

is another option, providing a java based GUI to view data.

You may also want to look at https://github.com/Azel4231/dsui