Bookmarklet observation tool, creates json dump of the current page

README.md

Bookmarklet tool modelled after a Playwright observer script (Node), generated by Chat GPT 5.

It crawls the page, saves DOM inventory, visible text, local/session storage, IndexedDB list, layout metrics, screenshots, and a HAR.

I used it to record a page on localhost development server, feed the dump to ChatGPT, and have it create a specification of the web app.

Prompt:

Analyse this observer json dump of a local web app and write up the specifications into the "specs/" 
folder with each domain topic (including technical topic) as a seperate markdown file. Create a 
"SPECS.md" in the root of the directory which is an overview document that contains a table that 
links to all the specs.

Partial example:

Information Architecture & UX

• Single page app with a full-viewport map container id="map".
• Top-left: Leaflet.draw toolbar with create (polyline, polygon, rectangle) and a separate edit/delete section.
• Bottom-left: Legend block labelled "Industry Types" with categories: Agriculture, Forestry, Mining, Oil and Gas, Rural, Transportation, Unknown, Urban, Utility, Unclassified.
• Left-side floating panel: "Layer Visibility" with toggles for Drawn Project, Imported Project, Surface Disturbance - Areas, Surface Disturbance - Linear.
• Right-side floating panel: "Base Maps" grid with options: Light Grey, OpenStreetMap, Satellite Imagery, Topographic.
• Bottom-right: Attribution control (Leaflet | Powered by Esri | Tiles © Esri — Esri, DeLorme, NAVTEQ).
• Header/home banner with link to "./" and label 🏠 Surface Disturbance - Dev.

Platform & External Services

• Leaflet for mapping (DOM classes leaflet-*).
• Leaflet.draw for drawing/editing features (DOM classes leaflet-draw-*).
• File import control (DOM class leaflet-control-better-filelayer).
• Basemap sources: OpenStreetMap and Esri (World Imagery, Topographic, Light Grey).
• Attribution displayed via Leaflet attribution control.

Assumed JS/CSS assets are loaded in the HTML hosting the map.

jsr_quick_dump.js

javascript:(function(){function d(obj){return JSON.stringify(obj,null,2)};function gCS(el){const s=getComputedStyle(el);return {d:s.display,v:s.visibility,o:s.opacity}};const inv=[...document.querySelectorAll('a,button,input,select,textarea,[role],[id],[class]')].map(el=>({tag:el.tagName.toLowerCase(),id:el.id||null,cls:el.className||null,role:el.getAttribute('role')||null,name:(el.getAttribute('aria-label')||el.name||el.textContent?.trim()||null),type:el.getAttribute('type')||null,href:el instanceof HTMLAnchorElement?el.getAttribute('href'):null,val:(el instanceof HTMLInputElement||el instanceof HTMLTextAreaElement||el instanceof HTMLSelectElement)?(el.value??null):null,ph:(el instanceof HTMLInputElement||el instanceof HTMLTextAreaElement)?(el.placeholder??null):null,aria:[...el.attributes].filter(a=>a.name.startsWith('aria-')).reduce((o,a)=>(o[a.name]=a.value,o),{}),data:{...el.dataset},css:gCS(el)}));const storage={localStorage:Object.fromEntries(Object.entries(localStorage)),sessionStorage:Object.fromEntries(Object.entries(sessionStorage)),cookies:document.cookie||''};const payload={url:location.href,title:document.title,inventory:inv,storage};const b=new Blob([d(payload)],{type:'application/json'});const a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='jsr_quick_dump.json';a.click();})();