immutable-js · jdeniau · May 30, 2025 · May 30, 2025
diff --git a/website/docs/BrowserExtension.mdx b/website/docs/BrowserExtension.mdx
@@ -0,0 +1,72 @@
+# Devtools
+
+Inspecting immutable collections in browser's Dev Tools is awkward. You only
+see the internal data structure, not the logical contents. For example, when
+inspecting the contents of an Immutable List, you'd really like to see the
+items in the list.
+
+Chrome (v47+) and Firefox (116+) has support for custom "formatters". A
+formatter tells browser's Dev Tools how to display values in the Console,
+Scope list, etc. This means we can display Lists, Maps and other collections,
+in a much better way.
+
+Essentially, it turns this:
+
+![Before Devtools](/before.png)
+
+into:
+
+![After Devtools](/after.png)
+
+## Installation
+
+Install the following extension in your browser:
+
+<ul className="devtoolsLinks">
+  <li>
+    <a
+      href="https://chromewebstore.google.com/detail/immutablejs-object-format/lfdmhpmheemfkgjpifhenbkgcaaopckp"
+      target="_blank"
+      rel="noopener"
+    >
+      <figure>
+        <img src="/store-logo-chrome.svg" alt="Chrome Store Logo" />
+        <figcaption>Chrome or Chromium based browser extension</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a
+      href="https://addons.mozilla.org/fr/firefox/addon/immutable-js-devtool-extension/"
+      target="_blank"
+      rel="noopener"
+    >
+      <figure>
+        <img src="/store-logo-firefox.svg" alt="Firefox Logo" />
+        <figcaption>Firefox Extension</figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+
+### Alternative
+
+If you don't want to install an extension, you can install the devtools as a
+dependency in your project.
+
+To do that, install the following package using your package manager:
+
+```sh
+npm install --save-dev @jdeniau/immutable-devtools
+```
+
+and enable it with:
+
+```js
+import * as Immutable from 'immutable';
+import installDevTools from '@jdeniau/immutable-devtools';
+
+installDevTools(Immutable);
+```
+
+See more details in the [github repository](https://github.com/immutable-js/immutable-devtools).
diff --git a/website/public/after.png b/website/public/after.png
diff --git a/website/public/before.png b/website/public/before.png
diff --git a/website/public/store-logo-chrome.svg b/website/public/store-logo-chrome.svg
diff --git a/website/public/store-logo-firefox.svg b/website/public/store-logo-firefox.svg
diff --git a/website/src/Header.tsx b/website/src/Header.tsx
@@ -110,6 +110,7 @@ export function HeaderLinks({
    <div className="links">
      <DocsDropdown versions={versions} currentVersion={currentVersion} />
      <Link href="/play">Playground</Link>
+      <Link href="/browser-extension">Browser extension</Link>
      <a
        href="https://stackoverflow.com/questions/tagged/immutable.js?sort=votes"
        target="_blank"

diff --git a/website/src/app/browser-extension/layout.tsx b/website/src/app/browser-extension/layout.tsx
@@ -0,0 +1,21 @@
+import { DocHeader } from '../../DocHeader';
+import { ImmutableConsole } from '../../ImmutableConsole';
+import { getVersions } from '../../static/getVersions';
+
+export default function VersionLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const versions = getVersions();
+
+  return (
+    <div>
+      <ImmutableConsole version={versions[0]} />
+      <DocHeader versions={versions} currentVersion={versions[0]} />
+      <div className="pageBody">
+        <div className="contents">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/app/browser-extension/page.tsx b/website/src/app/browser-extension/page.tsx
@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+import { DocSearch } from '../../DocSearch';
+import { SideBar } from '../../Sidebar';
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Devtools — Immutable.js`,
+  };
+}
+
+export default async function BrowserExtensionPage() {
+  const { default: MdxContent } = await import(`@/docs/BrowserExtension.mdx`);
+
+  return (
+    <>
+      <SideBar />
+      <div key="Overview" className="docContents">
+        <DocSearch />
+
+        <MdxContent />
+      </div>
+    </>
+  );
+}
diff --git a/website/src/app/docs/v5/page.tsx b/website/src/app/docs/v5/page.tsx
@@ -11,8 +11,6 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function OverviewDocPage() {
  const { default: MdxContent } = await import(`@/docs/Intro.mdx`);

-  console.log('MdxContent', MdxContent);
-
  return (
    <>
      <div key="Overview" className="docContents">

diff --git a/website/styles/globals.css b/website/styles/globals.css
@@ -616,3 +616,28 @@ p:last-child {
 .memberLabel:hover .anchorLink {
  display: inline;
 }
+
+.devtoolsLinks {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-top: 0.5rem;
+  list-style-type: none;
+  padding: 0;
+}
+
+@media only screen and (max-width: 680px) {
+  .devtoolsLinks {
+    flex-direction: column;
+  }
+}
+
+.devtoolsLinks > li {
+  flex: 1;
+  text-align: center;
+}
+
+.devtoolsLinks img {
+  max-width: min(150px, 100%);
+}