咨询：是否存在可集成WebStorm的Redux调试工具（类Chrome DevTools）

Great question! I totally get wanting to keep your workflow inside WebStorm instead of switching back and forth to Chrome's DevTools. Here are the best options for integrating Redux debugging directly into WebStorm's debugger, just like the Chrome extension you're used to:

1. WebStorm's Built-in Redux Debugging (Recommended) #

Starting with WebStorm 2019.3, the IDE includes native Redux debugging support that matches the core functionality of the Chrome Redux DevTools extension. Here's how to use it:

• Set up a debug configuration in WebStorm for your React/Redux app (either using the Chrome debug type for browser-based apps, or Node.js for server-side Redux).
• Launch the debug session. Once your app is running, switch to the Debug tool window in WebStorm.
• Look for the Redux tab in the debug panel—this is your integrated Redux debugger.
  • You can view every dispatched action, inspect the state before/after each action, use time-travel debugging to jump back to previous states, and even modify the current state directly.
  • It’s fully integrated with WebStorm’s existing debugging tools, so you can set breakpoints in your reducers/actions and debug alongside the Redux state changes seamlessly.

2. Remote Redux DevTools Integration #

If you prefer using the full feature set of Redux DevTools (like custom monitors or advanced debugging options), you can connect WebStorm to the Remote Redux DevTools:

• Install the remote-redux-devtools package in your project via npm/yarn:

  npm install remote-redux-devtools --save-dev
  

• Update your Redux store configuration to enable remote debugging (follow the package’s official docs for setup details).
• Start the Redux DevTools server directly in WebStorm’s terminal:

  npx redux-devtools
  

• While debugging your app in WebStorm, you can either:
  • Open the Redux DevTools web interface in a browser tab (while keeping your main debug session in WebStorm), or
  • Monitor the server logs alongside your debug output right in the IDE’s terminal.

Quick Tips #

• Make sure you’re running WebStorm 2019.3 or newer to access the native Redux debugging tab.
• For React apps, use WebStorm’s Chrome debug configuration—this ensures the IDE can properly hook into your app’s Redux state.

内容的提问来源于stack exchange，提问作者oddz