From c5fb706386ed088cb7b4187216d02cd5c99bdf5b Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Wed, 14 Dec 2022 15:59:48 +0100 Subject: [PATCH 1/2] Added support and info for custom formatters in Firefox --- docs/installation.md | 23 +++++++++++++++++++---- examples/deps/public/index.html | 4 ++-- examples/lein/readme.md | 2 +- examples/shadow/public/index.html | 4 ++-- project.clj | 2 +- readme.md | 4 ++-- src/lib/devtools/formatters.cljs | 5 +++-- 7 files changed, 30 insertions(+), 14 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 2aa5059..323ac33 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -1,10 +1,12 @@ # CLJS DevTools Installation -## Enable Custom formatters in Chrome +## Enable Custom formatters in the browser -Available in [**Chrome 47 and higher**](http://googlechromereleases.blogspot.cz/2015/12/stable-channel-update.html). +### In Chrome -~~**WARNING**: Custom formatters will be probably removed from Chrome 86 (or later).~~ +Available in [**Chrome 47 and higher**](https://googlechromereleases.blogspot.cz/2015/12/stable-channel-update.html). + +~~**WARNING**: Custom formatters will be probably removed from Chrome 86 (or later).~~ ~~Please read recent news in [issue 55](https://github.com/binaryage/cljs-devtools/issues/55).~~ ~~Newly since Chrome 84 you have to re-enable custom formatters every time you open devtools. The setting is not sticky anymore.~~ @@ -16,7 +18,20 @@ All should work the same as before for now. If your setting is not sticky, pleas * Open DevTools * Go to Settings ("three dots" icon in the upper right corner of `DevTools > Menu > Settings F1 > Preferences > Console`) - * Check-in "Enable custom formatters" + * Check "Enable custom formatters" + * Close DevTools + * Open DevTools + +Note: You might need to refresh the page first time you open Console panel with existing logs - custom formatters are applied +only to newly printed console messages. + +### In Firefox + +Available in [**Firefox 110 and higher**](https://www.mozilla.org/en-US/firefox/110.0/releasenotes/). + + * Open DevTools + * Go to Settings ("three dots" icon in the upper right corner of `DevTools > Menu > Settings F1 > Advanced settings`) + * Check "Enable custom formatters" * Close DevTools * Open DevTools diff --git a/examples/deps/public/index.html b/examples/deps/public/index.html index 360721a..f336f61 100644 --- a/examples/deps/public/index.html +++ b/examples/deps/public/index.html @@ -9,8 +9,8 @@ 
-1. Please open Chrome DevTools (CMD+OPT+I / CTRL+SHIFT+I)
-2. Enable custom formatters in DevTools -> Settings -> Console -> Enable custom formatters
+1. Please open Chrome or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
+2. Enable custom formatters in DevTools -> Settings -> Console / Advanced settings -> Enable custom formatters
 3. Refresh the page and see output in the DevTools Console
diff --git a/examples/lein/readme.md b/examples/lein/readme.md index a4bf597..f38f8ce 100644 --- a/examples/lein/readme.md +++ b/examples/lein/readme.md @@ -17,7 +17,7 @@ Build the project and start a local demo server: Wait for compilation and when figwheel fully starts: * A demo page should be available at [http://localhost:7000](http://localhost:7000). - * Please visit it with Google Chrome browser with [enabled custom formatters](https://github.com/binaryage/cljs-devtools). + * Please visit it with Google Chrome or Mozilla Firefox browser with [enabled custom formatters](https://github.com/binaryage/cljs-devtools). * Open the web development console under devtools and you should see something similar to the screenshot above. Note: you might need to refresh the page again to force re-rendering of custom formatters after opening the console. diff --git a/examples/shadow/public/index.html b/examples/shadow/public/index.html index 647dd7f..15ef291 100644 --- a/examples/shadow/public/index.html +++ b/examples/shadow/public/index.html @@ -9,8 +9,8 @@ 
-1. Please open Chrome DevTools (CMD+OPT+I / CTRL+SHIFT+I)
-2. Enable custom formatters in DevTools -> Settings -> Console -> Enable custom formatters
+1. Please open Chrome or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
+2. Enable custom formatters in DevTools -> Settings -> Console / Advanced settings -> Enable custom formatters
 3. Refresh the page and see output in the DevTools Console
diff --git a/project.clj b/project.clj index 3f9f096..3bf2a89 100644 --- a/project.clj +++ b/project.clj @@ -1,6 +1,6 @@ (def clojurescript-version (or (System/getenv "CANARY_CLOJURESCRIPT_VERSION") "1.11.4")) (defproject binaryage/devtools "1.0.6" - :description "A collection of Chrome DevTools enhancements for ClojureScript developers." + :description "A collection of Chrome and Firefox DevTools enhancements for ClojureScript developers." :url "https://github.com/binaryage/cljs-devtools" :license {:name "MIT License" :url "http://opensource.org/licenses/MIT" diff --git a/readme.md b/readme.md index 51af56d..06972fd 100644 --- a/readme.md +++ b/readme.md @@ -4,9 +4,9 @@ [![Clojars Project](https://img.shields.io/clojars/v/binaryage/devtools.svg)](https://clojars.org/binaryage/devtools) [![Example Projects](https://img.shields.io/badge/project-examples-ff69b4.svg)](https://github.com/binaryage/cljs-devtools/tree/master/examples) -CLJS DevTools adds enhancements into Chrome DevTools for ClojureScript developers: +CLJS DevTools adds enhancements into Chrome and Firefox DevTools for ClojureScript developers: -* Better presentation of ClojureScript values in Chrome DevTools (see the [:formatters][1] feature) +* Better presentation of ClojureScript values in DevTools (see the [:formatters][1] feature) * More informative exceptions (see the [:hints][2] feature) * Long stack traces for chains of async calls (see the [:async][3] feature) diff --git a/src/lib/devtools/formatters.cljs b/src/lib/devtools/formatters.cljs index 3585c66..4cff2b2 100644 --- a/src/lib/devtools/formatters.cljs +++ b/src/lib/devtools/formatters.cljs @@ -1,6 +1,6 @@ (ns devtools.formatters (:require-macros [devtools.oops :refer [unchecked-aget unchecked-aset]]) - (:require [goog.labs.userAgent.browser :refer [isChrome isVersionOrHigher]] + (:require [goog.labs.userAgent.browser :refer [isAtLeast]] [devtools.prefs :as prefs] [devtools.util :refer [get-formatters-safe set-formatters-safe! in-node-context?]] [devtools.context :as context] @@ -14,7 +14,8 @@ (defn ^:dynamic available? [] (or (in-node-context?) ; node.js or Chrome 47+ - (and (isChrome) (isVersionOrHigher 47)))) + (and (isAtLeast "CHROMIUM" 47)) + (and (isAtLeast "FIREFOX" 110)))) (deftype CLJSDevtoolsFormatter []) From da96a0467e3f8dedb20eb7949ea23845a0dab187 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Tue, 24 Jan 2023 23:03:08 +0100 Subject: [PATCH 2/2] Corrected Firefox version and added Edge support --- docs/installation.md | 6 +++--- examples/deps/public/index.html | 2 +- examples/lein/readme.md | 2 +- examples/shadow/public/index.html | 2 +- project.clj | 2 +- readme.md | 2 +- src/lib/devtools/formatters.cljs | 5 +++-- 7 files changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 323ac33..843656a 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -2,9 +2,9 @@ ## Enable Custom formatters in the browser -### In Chrome +### In Chrome and Edge -Available in [**Chrome 47 and higher**](https://googlechromereleases.blogspot.cz/2015/12/stable-channel-update.html). +Available in [**Chrome 47 and higher**](https://googlechromereleases.blogspot.cz/2015/12/stable-channel-update.html) and **Edge 79 and higher**. ~~**WARNING**: Custom formatters will be probably removed from Chrome 86 (or later).~~ ~~Please read recent news in [issue 55](https://github.com/binaryage/cljs-devtools/issues/55).~~ @@ -27,7 +27,7 @@ only to newly printed console messages. ### In Firefox -Available in [**Firefox 110 and higher**](https://www.mozilla.org/en-US/firefox/110.0/releasenotes/). +Available in [**Firefox 111 and higher**](https://www.mozilla.org/en-US/firefox/111.0/releasenotes/). * Open DevTools * Go to Settings ("three dots" icon in the upper right corner of `DevTools > Menu > Settings F1 > Advanced settings`) diff --git a/examples/deps/public/index.html b/examples/deps/public/index.html index f336f61..98fcf41 100644 --- a/examples/deps/public/index.html +++ b/examples/deps/public/index.html @@ -9,7 +9,7 @@ 
-1. Please open Chrome or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
+1. Please open Chrome, Edge or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
 2. Enable custom formatters in DevTools -> Settings -> Console / Advanced settings -> Enable custom formatters
 3. Refresh the page and see output in the DevTools Console
diff --git a/examples/lein/readme.md b/examples/lein/readme.md index f38f8ce..5254a11 100644 --- a/examples/lein/readme.md +++ b/examples/lein/readme.md @@ -17,7 +17,7 @@ Build the project and start a local demo server: Wait for compilation and when figwheel fully starts: * A demo page should be available at [http://localhost:7000](http://localhost:7000). - * Please visit it with Google Chrome or Mozilla Firefox browser with [enabled custom formatters](https://github.com/binaryage/cljs-devtools). + * Please visit it with Google Chrome, Microsoft Edge or Mozilla Firefox browser with [enabled custom formatters](https://github.com/binaryage/cljs-devtools). * Open the web development console under devtools and you should see something similar to the screenshot above. Note: you might need to refresh the page again to force re-rendering of custom formatters after opening the console. diff --git a/examples/shadow/public/index.html b/examples/shadow/public/index.html index 15ef291..cb6b9cf 100644 --- a/examples/shadow/public/index.html +++ b/examples/shadow/public/index.html @@ -9,7 +9,7 @@ 
-1. Please open Chrome or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
+1. Please open Chrome, Edge or Firefox DevTools (CMD+OPT+I / CTRL+SHIFT+I)
 2. Enable custom formatters in DevTools -> Settings -> Console / Advanced settings -> Enable custom formatters
 3. Refresh the page and see output in the DevTools Console
diff --git a/project.clj b/project.clj index 3bf2a89..070f6f8 100644 --- a/project.clj +++ b/project.clj @@ -1,6 +1,6 @@ (def clojurescript-version (or (System/getenv "CANARY_CLOJURESCRIPT_VERSION") "1.11.4")) (defproject binaryage/devtools "1.0.6" - :description "A collection of Chrome and Firefox DevTools enhancements for ClojureScript developers." + :description "A collection of Chrome, Edge and Firefox DevTools enhancements for ClojureScript developers." :url "https://github.com/binaryage/cljs-devtools" :license {:name "MIT License" :url "http://opensource.org/licenses/MIT" diff --git a/readme.md b/readme.md index 06972fd..fd56136 100644 --- a/readme.md +++ b/readme.md @@ -4,7 +4,7 @@ [![Clojars Project](https://img.shields.io/clojars/v/binaryage/devtools.svg)](https://clojars.org/binaryage/devtools) [![Example Projects](https://img.shields.io/badge/project-examples-ff69b4.svg)](https://github.com/binaryage/cljs-devtools/tree/master/examples) -CLJS DevTools adds enhancements into Chrome and Firefox DevTools for ClojureScript developers: +CLJS DevTools adds enhancements into Chrome, Edge and Firefox DevTools for ClojureScript developers: * Better presentation of ClojureScript values in DevTools (see the [:formatters][1] feature) * More informative exceptions (see the [:hints][2] feature) diff --git a/src/lib/devtools/formatters.cljs b/src/lib/devtools/formatters.cljs index 4cff2b2..a77f95b 100644 --- a/src/lib/devtools/formatters.cljs +++ b/src/lib/devtools/formatters.cljs @@ -14,8 +14,9 @@ (defn ^:dynamic available? [] (or (in-node-context?) ; node.js or Chrome 47+ - (and (isAtLeast "CHROMIUM" 47)) - (and (isAtLeast "FIREFOX" 110)))) + (isAtLeast "CHROMIUM" 47) + (isAtLeast "EDGE" 79) ;; First Edge to use Blink, has Blink 79. + (isAtLeast "FIREFOX" 111))) (deftype CLJSDevtoolsFormatter [])