JavaScript Tracker
A chrome extension tracks front-end JavaScript that uses DOM or jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) on web page at runtime.
Features
- Live Tracking, what changes you see on page is what code you get.
- Code by Elements, only listing the code that affects selected element.
- Brief Overview, getting rough code information at a glance.
- Easy Filtering, grouping manipulations into 5 types.
- Link to Source, one click to see all details.
- Performance Improvement, better performance than previous version by taking advantage of browser JavaScript engine
Demo Video
Installation
Add JavaScript Tracker to your Google Chrome from Chrome Web Store
Usage (see Demo Video for visual guide)
-
Go to the page you want to track (you can use example page to give it a try).
-
Click JavaScript Tracker icon on Chrome browser extension bar.
-
Interact with the page opened by JavaScript Tracker.
-
Open Elements panel in Developer Tools and select the element you are interested in.
-
Go to the "JS-Tracker" sidebar to see what JavaScript code affects the selected element.
There are also some websites selected by me that you can try JavaScript Tracker as much as you like. ?
Limitations
Those elements wrapped in <iframe> can not be tracked, since <iframe> creates an independent executive environment of its parent.
Future Works
- Support Firefox
- Track jQuery-UI
- Optimize resouce usage
Contribution
Suggestions and discussions are highly welcome. Feel free to open issues or email me for any bug, question, idea or feature wish. ?
Special Thanks
Special thanks to Fiti, a fantastic UI/UX designer, for the design of logo, banner, music, and materials in sidebar. Without her I will never give birth to this project. ?️
License
MIT