I do have an improved version of the official Octothorpes WordPress plugin, but unfortunately the original authors have refused to open-source it, and without an open source license attached to the original files I built on, I can't share it. <rant>I have to express some frustration. I'm extremely disappointed that Octothorpes do not seem to work at all. The whole project is a brilliant idea—I went for it hook, line, and sinker. In fact, I liked it so much that I immediately started working on improving things, such as their extremely lacking WordPress integration plugin... so eagerly, in fact, that I put in a lot of work before testing whether Octothorpes actually work at all. And it appears that they don't. At least, I couldn't ever get them to, despite sinking several long nights into it. Disappointingly, I had to add a lot of unneeded extra structure to my site code to even try and get Octothorpes working—contrary to what the documentation suggested—and even after doing everything right, as confirmed by their debugging tool, my Octothorpes never appeared on their server. Given that I never got it to work and couldn't find anyone who was able to assist me, all the complexity I had to add to my site in the effort—such as serving Octothorpe-specific page versions, like the one you are looking at right now—became needless cruft. So after a few very long nights of fruitlessly spinning my wheels, I've given up, and removed it all again. I have to add that I'm disappointed. I'm not used to showing up enthusiastic to contribute to an open-source project and so quickly winding up walking away with absolutely nothing, no involvement, no ability to use or run it, no interest in my desire to contribute (even code I've already finished!), nothing. Maybe I've been lucky before now. Octothorpes are a brilliant idea, in concept. I hope they work someday, and become a project that might see wide adoption and contribution by enthusiastic developers. (And that the main devs see the value in WordPress plugin developers expressing an interest in authoring OP integrations with WordPress... 43% of the world's websites can't be wrong...) Sorry to rant, but, my site, my several nights of work lost, my prerogative to express it.</rant>Frustrated rant about it here, click to read...
Seeing as how this Octothorpe-compliant low-bandwidth page version serves no purpose anymore (and doesn't contain any code related to the Octothorpe service anymore, except for noticing visitors using URLs referencing it, in order to show this message), you probably want to view the original page in its complete technicolor glory at https://michaelkupietz.com/determining-which-javascript-script-changed-an-elements-attribute/.
Determining which script changed an element's attribute
So, I had an issue where quite a while ago I added some js code that would open a details disclosure element if it contained a named anchor that was included in the page's URL. For instance if you loaded the URL https://thisdomain.com/somepage.html#blahblahblah, and the page had <a name="blahblahblah"> hidden inside a closed details element, it would open that element by setting the attribute "open" on the details element, and scroll to reveal the anchor.
The problem was, I needed to make some changes to how that code functioned, and I couldn't find where I had added the script that did that.
Long story short: I temporarily added this script to the head of the page, and then reloaded it with an #anchor added to the URL, in this case https://michaelkupietz.com/literally-hundreds-capsule-reviews/#puzzlehead:
<script type="text/javascript" data-cfasync="false">
// Override the open property setter to catch when it's being set
const originalDescriptor = Object.getOwnPropertyDescriptor(HTMLDetailsElement.prototype, 'open');
Object.defineProperty(HTMLDetailsElement.prototype, 'open', {
set: function(value) {
if (value === true) {
console.trace('Details element being opened:', this);
debugger; // This will break execution
}
originalDescriptor.set.call(this, value);
},
get: originalDescriptor.get
});This produced the console output:
console.trace() Details element being opened:
<details class="mctag-topdetails scriptable a1" open="">
literally-hundreds-capsule-reviews:36:13801
nrWrapper https://michaelkupietz.com/literally-hundreds-capsule-reviews/:36
set https://michaelkupietz.com/literally-hundreds-capsule-reviews/:11
handleAnchor https://michaelkupietz.com/literally-hundreds-capsule-reviews/:3362
nrWrapper https://michaelkupietz.com/literally-hundreds-capsule-reviews/:36
(Async: EventListener.handleEvent)
nrWrapper https://michaelkupietz.com/literally-hundreds-capsule-reviews/:36
<anonymous> https://michaelkupietz.com/literally-hundreds-capsule-reviews/:3374
We can ignore the nrWrapper lines, those are because I'm testing New Relic, which is a whole other story.
But we see a "set" on line 11, which, if we view the page source, is actually the script line that calls the console log. However, then we see "handleAnchor" on line 3362—and that's the name of the function that is setting the details attribute "open", and the line of the page source it's doing it on. In the original function I had it in, it's wrapped in an anonymous function, hence <anonymous>, although if it had been wrapped in one or more named functions, that would have been listed here in detail. But the line 3362 showed me what to look at, and if "handleAnchor" wasn't unique enough to search my codebase for, the greater context around line 3362 would have given me enough to search for and find it.
Now, it's worth pointing out, this can be adapted without much difficulty to watch attributes on other elements. In the javascript that does this, notice HTMLDetailsElement in Object.getOwnPropertyDescriptor(HTMLDetailsElement.prototype, 'open');. HTMLDetailsElement is the prototype of the HTML details element. You need to know the prototype of whatever element you need to watch change, and those prototype names aren't always standard, either within any single browser, nor across browsers.
Fortunately you can get the prototype names. I found some code at https://kangax.github.io/jstests/html5_elements_interfaces_test/ that you can insert in the body of an HTML page to list the javascript prototypes of HTML elements:
<script type="text/javascript">
(function(){
var elements = (
'a abbr address area article aside audio ' +
'b base bdo blockquote body br button ' +
'canvas caption cite code col colgroup command ' +
'datalist dd del details device dfn div dl dt ' +
'em embed ' +
'fieldset figcaption figure footer form ' +
'h1 h2 h3 h4 h5 h6 head header hgroup hr html ' +
'i iframe img input ins ' +
'kbd keygen ' +
'label legend li link ' +
'map mark menu meta meter ' +
'nav noscript ' +
'object ol optgroup option output ' +
'p param pre progress ' +
'q ' +
'rp rt ruby ' +
'samp script section select small source span strong style sub summary sup ' +
'table tbody textarea tfoot th thead time title tr track ' +
'ul ' +
'var video ' +
'wbr'
).split(' ');
var exposesHTMLElement = typeof HTMLElement !== 'undefined' &&
typeof HTMLElement.prototype !== 'undefined',
exposesHTMLUnknownElement = typeof HTMLUnknownElement !== 'undefined' &&
HTMLUnknownElement.prototype !== 'undefined',
el,
isGenericElement,
isUnknownElement,
elementType;
if (!('__proto__' in ({}))) {
document.write('<strong>__proto__ doesn\'t seem to be supported. Tests are not run, but elements are still inspected.</strong>')
}
document.write('<ul>');
for (var i = 0, len = elements.length; i < len; i++) {
el = document.createElement(elements[i]);
if ('__proto__' in el && exposesHTMLElement) {
isGenericElement = el.__proto__ === HTMLElement.prototype;
}
if ('__proto__' in el && exposesHTMLUnknownElement) {
isUnknownElement = el.__proto__ === HTMLUnknownElement.prototype;
}
elementType = isGenericElement ? 'generic' : isUnknownElement ? 'unknown' : '';
document.write(
'<li><span class="label">' + elements[i] +
':</span><span class="value ' + elementType + '">' +
el +
'</span></li>');
}
document.write('</ul>');
})();
</script>I haven't played with implementing this for anything but details tags, but this should be enough to start.
Content originally from https://michaelkupietz.com/determining-which-javascript-script-changed-an-elements-attribute/. © copyright 2025 Michael E. Kupietz