I wanted a project to experiment more with 'vibe-coding' and ended up making a project I actually use (one that extends/enhances the existing network devtools tab).
- Session Detection: attempts to detect if you're going to need to create and maintain a session
- Bot Detection Detection: You aren't detecting ME, I'M detecting YOU attempting to detect ME
- Cookie tracking to help with long-chain api step through: click on a request to get visual feedback on whether it uses data from another request earlier in the chain, and whether any depend on information from it (not including the response body...yet)
- Headers as JSON, plus some experimental header-importance ranking: see which headers you'll almost certainly have to include at a glance, or just copy the whole lot in a single click
- Response and Request body Typescript schema generation - attempts to generate a typescript schema from a json object with at least slightly intelligent naming and deduplication
- Clone the repo locally
- Install dependencies with
npm i - Compile the project with
npm run build - Open Chrome
- Go to
chome://extensions/ Load Unpacked> select the repodistdirectory created from the build step- Activate the extension
- Open devtools > WDYWFM
This is basically an extension for the network tab in devtools, and under the hood uses the api for it, so just like in there, select a request you're interested in and poke around. The intent isn't to be a replacement for the network tab, that's already great and feature rich.
- response body analysis and similar functionality to what is happening with cookies - where does this data go? How is it used?
- heavily refactor to make more human-debuggable/human-friendly
- enhance agent rules to more strictly follow code conventions to facilitate the above.