Immerx DevTools

Immerx debugging tools in Chrome developer console.

Immerx DevToolsとは何ですか？

Immerx DevToolsはIonut Achimによって開発されたChromeの拡張機能で、その主な機能は「Immerx debugging tools in Chrome developer console.」です。

拡張機能のスクリーンショット

screenshot
screenshot
screenshot

Immerx DevTools拡張機能のCRXファイルをダウンロード

Immerx DevTools拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

                        ImmerX DevTools is a Chrome DevTools extension for the open-source JS state management library - ImmerX.

It helps developers visualise ImmerX state changes in the Chrome Developer Tools. It creates a new panel called "Immerx DevTools" that contains 4 main components:

1. "Update List" - A filterable, vertical scrolling list of all the state updates.
2. "Patches" - Where you can see all the immer patches that were applied during the selected state update. Each patch containing information about he operation type, the path and the diff.
3. "State" - Display the state value resulted from the selected update, or the current value if no update is selected.
4. "Diff" - Shows a diff between the state values before and after the selected update.

See an interactive demo of the inlined version here:
https://monojack.github.io/immerx-todomvc

You can learn more about ImmerX here:
https://github.com/monojack/immerx

Code for this extension is open-sourced at:
https://github.com/monojack/immerx-devtools

拡張機能の基本情報

名前 Immerx DevTools Immerx DevTools
ID jchcefekimgnfceonnnekpgmphepengp
公式URL https://chromewebstore.google.com/detail/immerx-devtools/jchcefekimgnfceonnnekpgmphepengp
説明 Immerx debugging tools in Chrome developer console.
ファイルサイズ 81.98 KB
インストール数 24
現在のバージョン 0.2.0
最終更新日 2020-06-08
公開日 2020-06-08
開発者 Ionut Achim
Eメール [email protected]
支払い方法 free
拡張機能のウェブサイト https://github.com/monojack/immerx-devtools
ヘルプページのURL https://github.com/monojack/immerx-devtools/issues
対応言語 en-GB
manifest.json 
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "version": "0.2.0",
    "author": "Ionut Achim ",
    "name": "Immerx DevTools",
    "short_name": "Immerx DevTools",
    "description": "Immerx debugging tools in Chrome developer console.",
    "icons": {
        "16": "icons\/icon-64.png",
        "48": "icons\/icon-128.png",
        "128": "icons\/icon-400.png"
    },
    "page_action": [],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "permissions": [
        "tabs",
        "http:\/\/*\/*",
        "https:\/\/*\/*"
    ],
    "devtools_page": "devtools.html",
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "web_accessible_resources": [
        "panel.html"
    ],
    "content_scripts": [
        {
            "matches": [
                ""
            ],
            "js": [
                "hook.js",
                "contentScript.js"
            ],
            "run_at": "document_start"
        }
    ],
    "manifest_version": 2
}

関連する拡張機能

Solid Devtools
Solid Devtools
React Developer Tools
React Developer Tools
Preact Developer Tools
Preact Developer Tools
Livewire devtools
Livewire devtools
Web Developer Tool for Chrome
Web Developer Tool for Chrome