Ramson devtools

Advanced Websocket filtering for Chrome Devtools. Add extra powers for filtering Websockets connections.

• Group by request/response (if the payload is JSON and has an id property identifying the messages)

Developed with React

Installation

To add Ramson Devtools as an extension in developer mode

1. git clone https://github.com/josescgar/ramson-devtools.git
2. cd ramson-devtools
3. npm install
4. npm run build
5. Open chrome and go to chrome://extensions/
6. Enable Developer mode
7. Select Load unpacked extension...
8. Select the dist folder in the ramson-devtools folder

Known issues

Since chrome devtools extension APIs do not offer Websocket monitoring out of the box, this extension wraps the native Websocket definition to intercept messages sent and received. This is a rather "unstable" solution and it is know to cause issues with some sites.

Third party

• ReactJS
• React JSON Tree

Resources

• manifest.json
• Devtools extension docs
• Example devtools extesion project
• How to inject code in the page scope
• Devtools css sources