5 ms·

Show HN: A Chrome extension that tracks front-end JavaScript at runtime

95 points by pilagod 9y ago

protomyth 9y ago
Really glad you went to the trouble to do a video. That was informative and helpful. Nice work.
- Raphmedia 9y ago
  As a sidenote, they might want to add a little "play" button on the video's preview image. At first glance, I scrolled past without understanding that the image was a link to the video.
  - pilagod 9y ago
    Thanks for your advice. I will update it later :)
  - pilagod 9y ago
    I have uploaded new video preview photo with play button, it's much clear now. Thanks again :)
    - Raphmedia 9y ago
      Much better! I'm sure it will increase the number of clicks.
- pilagod 9y ago
  Thanks for your appreciation :)))
thrownaway954 9y ago
this is absolutely wonderful. having a log of what has changed on a element through javascript is awesome
- pilagod 9y ago
  Hope this tool could help you at some future time :)
alexmorenodev 9y ago
Awesome. This could (and I hope it will) save some dozen of hours debugging.
- pilagod 9y ago
  I believe it will :)
appstateguy 9y ago
Looks great! Do you know what, if any, performance impact this has?
- paulirish 9y ago
  Enough to be noticeable in a busy webapp with lots of DOM manipulations. You'll probably want to keep its instrumentation disabled when you're not actively using it.
  - pilagod 9y ago
    That's right. Especially for doing animations. There will be a lot of additional tracking work even though those operations have been tracked. Performace issue will be a challenge future work
gcbw2 9y ago
is it a true webextension? i.e. will it work on firefox? ...or was the firefox quantum move a failure?
- lucideer 9y ago
  This might work on Firefox, but I doubt it, given it extends Chrome Dev Tools and Firefox doesn't have Chrome Dev Tools, it has its own very different dev tools. I'm not sure what you mean by a "true" WebExtension; Firefox and Chrome addons are two types of webextension. They have a lot of compatibilities and generally share the same APIs on shared features, but each also has its own extra, unique features that will likely never be supported by the other. > was the firefox quantum move a failure? If you're choosing to define "failure" as not changing Firefox entirely to be a carbon copy of Chrome, then yes. Otherwise, no.
  - pilagod 9y ago
    Really appreciate your detailed information. I'm not familiar with Firefox extension system, and I really learn a lot from your reply, thanks :)))) Maybe its time for me to study Firefox devtools and to find if there are something interesting to do :p
    - lucideer 9y ago
      Firefox recently deprecated their entire legacy extension system, in favour of a new, more secure system based on Chrome's extension system, and also on the W3C's draft spec[0] This means that many things should be identical between them: including but not limited to the packaging format, manifest format, security model, and the basic APIs for simple common browser features like tabs, page loads, network connections, etc. which gives you a very high compatibility surface area. Naturally, APIs for any innovative features either browser have will be unique to that browser. e.g. Firefox has unique APIs for it's Container system, and it's Sidebar. I guess Chrome has some unique features too. [0] https://browserext.github.io/browserext/ https://browserext.github.io/browserext/
      - 9y ago
timdorr 9y ago
This is already built into the Chrome Dev Tools on the Performance tab. You have to start it manually, but you get much more detail and low level feedback: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ https://developers.google.com/web/tools/chrome-devtools/eval...
- DaveSchmindel 9y ago
  I too was wondering why this particular extension made it to the front page...
  - pilagod 9y ago
    This extension leverage the prototype chain of HTML DOM API, so it is coupled with the front end environment.
- paulirish 9y ago
  Not entirely right, though I do love the Perf tab. (Disclosure: I work on it.) This extension adds instrumentation to listen to changes to DOM nodes and style attributes. And it reports exactly what the change was: https://github.com/pilagod/js-tracker/blob/master/src/tracker/trackers/dom/trackerHelpers.ts https://github.com/pilagod/js-tracker/blob/master/src/tracke... That level of detail isn't really provided in the Perf tab, as it's quite invasive and can have significant perf overhead in a busy webapp. (DevTools does have a hidden experiment called "Timeline: Invalidation Tracking" which does report on various DOM/CSS changes, though. It's cool). Also, I should point out a _very_ similar extension my mate built: https://github.com/kdzwinel/DOMListenerExtension https://github.com/kdzwinel/DOMListenerExtension Same basic idea, but just reporting every change to DOM nodes that a MutationObserver can see.
  - pilagod 9y ago
    Really nice explanation in detail, I do really learn a lot from your reply. And I'm so glad to hear that your mate has done a great job relevant to this topic, I have search for a long time but didn't get any relative work. I will look over his repo and learn more from there. Thanks again for your in-depth reply !
chucksmash 9y ago
Re: the limitations section, you can execute your extension content scripts within iframes as well via this manifest.json setting: https://developer.chrome.com/extensions/content_scripts#all_frames https://developer.chrome.com/extensions/content_scripts#all_... Though that comes with challenges of its own.
- pilagod 9y ago
  Really thanks for your information, its helpful! I wiil think more about it if there is any possibility to overcome this limitation

95 points by pilagod 9y ago

protomyth 9y ago

Really glad you went to the trouble to do a video. That was informative and helpful. Nice work.

Raphmedia 9y ago
As a sidenote, they might want to add a little "play" button on the video's preview image. At first glance, I scrolled past without understanding that the image was a link to the video.
- pilagod 9y ago
  Thanks for your advice. I will update it later :)
- pilagod 9y ago
  I have uploaded new video preview photo with play button, it's much clear now. Thanks again :)
  - Raphmedia 9y ago
    Much better! I'm sure it will increase the number of clicks.
pilagod 9y ago
Thanks for your appreciation :)))

thrownaway954 9y ago

this is absolutely wonderful. having a log of what has changed on a element through javascript is awesome

pilagod 9y ago
Hope this tool could help you at some future time :)

alexmorenodev 9y ago

Awesome. This could (and I hope it will) save some dozen of hours debugging.

pilagod 9y ago
I believe it will :)

appstateguy 9y ago

Looks great! Do you know what, if any, performance impact this has?

paulirish 9y ago
Enough to be noticeable in a busy webapp with lots of DOM manipulations. You'll probably want to keep its instrumentation disabled when you're not actively using it.
- pilagod 9y ago
  That's right. Especially for doing animations. There will be a lot of additional tracking work even though those operations have been tracked. Performace issue will be a challenge future work

gcbw2 9y ago

is it a true webextension? i.e. will it work on firefox? ...or was the firefox quantum move a failure?

lucideer 9y ago
This might work on Firefox, but I doubt it, given it extends Chrome Dev Tools and Firefox doesn't have Chrome Dev Tools, it has its own very different dev tools. I'm not sure what you mean by a "true" WebExtension; Firefox and Chrome addons are two types of webextension. They have a lot of compatibilities and generally share the same APIs on shared features, but each also has its own extra, unique features that will likely never be supported by the other. > was the firefox quantum move a failure? If you're choosing to define "failure" as not changing Firefox entirely to be a carbon copy of Chrome, then yes. Otherwise, no.
- pilagod 9y ago
  Really appreciate your detailed information. I'm not familiar with Firefox extension system, and I really learn a lot from your reply, thanks :)))) Maybe its time for me to study Firefox devtools and to find if there are something interesting to do :p
  - lucideer 9y ago
    Firefox recently deprecated their entire legacy extension system, in favour of a new, more secure system based on Chrome's extension system, and also on the W3C's draft spec[0] This means that many things should be identical between them: including but not limited to the packaging format, manifest format, security model, and the basic APIs for simple common browser features like tabs, page loads, network connections, etc. which gives you a very high compatibility surface area. Naturally, APIs for any innovative features either browser have will be unique to that browser. e.g. Firefox has unique APIs for it's Container system, and it's Sidebar. I guess Chrome has some unique features too. [0] https://browserext.github.io/browserext/ https://browserext.github.io/browserext/
    - 9y ago

timdorr 9y ago

This is already built into the Chrome Dev Tools on the Performance tab. You have to start it manually, but you get much more detail and low level feedback: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ https://developers.google.com/web/tools/chrome-devtools/eval...

DaveSchmindel 9y ago
I too was wondering why this particular extension made it to the front page...
- pilagod 9y ago
  This extension leverage the prototype chain of HTML DOM API, so it is coupled with the front end environment.
paulirish 9y ago
Not entirely right, though I do love the Perf tab. (Disclosure: I work on it.) This extension adds instrumentation to listen to changes to DOM nodes and style attributes. And it reports exactly what the change was: https://github.com/pilagod/js-tracker/blob/master/src/tracker/trackers/dom/trackerHelpers.ts https://github.com/pilagod/js-tracker/blob/master/src/tracke... That level of detail isn't really provided in the Perf tab, as it's quite invasive and can have significant perf overhead in a busy webapp. (DevTools does have a hidden experiment called "Timeline: Invalidation Tracking" which does report on various DOM/CSS changes, though. It's cool). Also, I should point out a _very_ similar extension my mate built: https://github.com/kdzwinel/DOMListenerExtension https://github.com/kdzwinel/DOMListenerExtension Same basic idea, but just reporting every change to DOM nodes that a MutationObserver can see.
- pilagod 9y ago
  Really nice explanation in detail, I do really learn a lot from your reply. And I'm so glad to hear that your mate has done a great job relevant to this topic, I have search for a long time but didn't get any relative work. I will look over his repo and learn more from there. Thanks again for your in-depth reply !

chucksmash 9y ago

Re: the limitations section, you can execute your extension content scripts within iframes as well via this manifest.json setting: https://developer.chrome.com/extensions/content_scripts#all_frames https://developer.chrome.com/extensions/content_scripts#all_... Though that comes with challenges of its own.

pilagod 9y ago
Really thanks for your information, its helpful! I wiil think more about it if there is any possibility to overcome this limitation