https://github.com/hosseind88/custom-event-monitoring

this is an devtools extention that let's you monitor events that you dispatch by document.dispatchEvent
https://github.com/hosseind88/custom-event-monitoring

extention javascript monitoring react

Last synced: 7 days ago
JSON representation

this is an devtools extention that let's you monitor events that you dispatch by document.dispatchEvent

• Host: GitHub
• URL: https://github.com/hosseind88/custom-event-monitoring
• Owner: hosseind88
• Created: 2022-06-17T09:36:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-05T06:21:27.000Z (over 2 years ago)
• Last Synced: 2023-03-06T03:50:38.961Z (almost 2 years ago)
• Topics: extention, javascript, monitoring, react
• Language: TypeScript
• Homepage:
• Size: 306 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Custom Event Monitoring

this is an devtools extention that let's you monitor events that you dispatch by ```document.dispatchEvent```

in main page you can add your listener events. f.e you want to dispatch an event like this:

```

document.dispatchEvent(new CustomEvent('KEY_A', {

  detail: {

    name: 'some data'

  }

}));

```

you should add ```KEY_A``` and hit confirm.

![Screen Shot 2022-06-21 at 13 34 15](https://user-images.githubusercontent.com/72156162/174761927-fc02be1b-5547-4325-8792-024d3380bc1e.png)

then you see this page:

![Screen Shot 2022-06-21 at 13 38 25](https://user-images.githubusercontent.com/72156162/174762513-3a8c1544-cf1d-4803-bc6b-d4b4d99de4c2.png)

now you can dispatch your events. let's dispatch above event that we said about.

now you will see this:

![Screen Shot 2022-06-21 at 13 41 15](https://user-images.githubusercontent.com/72156162/174763157-a5daff46-f01d-42af-aec7-679ab46e6e69.png)

tada 🎉.

and also you can click on event buttons and filter events you see. or click on back button and edit the events you defined.

we have not deployed this extention yet. so until then, you can clone this project and do these steps:

```

yarn install

yarn run build

```

then you have a dist folder. go to:

extentions > click on Developer Mode > Load Unpacked > Select dist folder and hit save

done. you now have it in your devtools.