1.0.5 - before/after + less console output

Author: NomadicDaddy

.gitignore

@@ -3,3 +3,4 @@ dist/
 releases/
 .vscode/
 .build.ps1
+package-lock.json

.prettierignore

@@ -3,3 +3,4 @@
 **/releases
 **/.vscode
 .build.ps1
+package-lock.json

content.js

@@ -43,7 +43,7 @@
 					document.body.addEventListener(event, this.logEvent.bind(this));
 				});
 
-				console.log('htmx event listeners set up');
+				// console.log('htmx event listeners set up');
 			} catch (error) {
 				console.error('Error during htmx-debugger initialization:', error);
 				this.handleError(error);
@@ -53,7 +53,7 @@
 		},
 
 		isExtensionEnvironment: function () {
-			console.log('Checking extension environment...');
+			// console.log('Checking extension environment...');
 			if (typeof chrome === 'undefined') {
 				console.warn('Chrome API is not available');
 				return false;
@@ -64,7 +64,7 @@
 			}
 			try {
 				chrome.runtime.getURL('');
-				console.log('chrome.runtime.id exists:', !!chrome.runtime.id);
+				// console.log('chrome.runtime.id exists:', !!chrome.runtime.id);
 				return true;
 			} catch (error) {
 				console.warn('Extension context is invalid:', error.message);
@@ -148,7 +148,7 @@
 					eventInfo.xhr = this.getXhrInfo(event.detail.xhr);
 				}
 
-				console.log('htmx Event:', eventInfo);
+				// console.log('htmx Event:', eventInfo);
 				this.sendMessage(eventInfo);
 			} catch (error) {
 				console.error('Error logging event:', error);
@@ -164,7 +164,7 @@
 			}
 
 			try {
-				console.log('Sending htmx debug info:', JSON.stringify(data, null, 2));
+				// console.log('Sending htmx debug info:', JSON.stringify(data, null, 2));
 				chrome.runtime.sendMessage(
 					{
 						type: 'HTMX_EVENT',
@@ -177,7 +177,7 @@
 							this.isConnected = false;
 							this.attemptReconnection();
 						} else {
-							console.log('Message sent successfully:', response);
+							// console.log('Message sent successfully:', response);
 							this.reconnectAttempts = 0; // Reset reconnect attempts on successful message
 						}
 					}
@@ -310,7 +310,7 @@
 										console.warn('Connection check failed, retrying...', chrome.runtime.lastError);
 										setTimeout(checkConnection, 1000);
 									} else {
-										console.log('Connection verified:', response);
+										// console.log('Connection verified:', response);
 										this.isConnected = true;
 										this.reconnectAttempts = 0;
 										resolve();
@@ -333,13 +333,13 @@
 
 		startConnectionCheck: function () {
 			const periodicCheck = () => {
-				console.log('Running periodic check...');
+				// console.log('Running periodic check...');
 				try {
 					if (this.isExtensionEnvironment()) {
-						console.log('Extension environment valid, verifying connection...');
+						// console.log('Extension environment valid, verifying connection...');
 						this.verifyConnection()
 							.then(() => {
-								console.log('Periodic connection check successful');
+								// console.log('Periodic connection check successful');
 							})
 							.catch((error) => {
 								console.error('Periodic connection check failed:', error);
@@ -353,7 +353,7 @@
 					console.error('Error during periodic check:', error);
 					this.handleExtensionInvalidated();
 				} finally {
-					console.log('Scheduling next check...');
+					// console.log('Scheduling next check...');
 					setTimeout(periodicCheck, 5000);
 				}
 			};
@@ -405,7 +405,7 @@
 
 	// Move the captureHtmxEvent and related functions inside the IIFE
 	function captureHtmxEvent(event) {
-		console.log('htmx event captured:', event.type, event);
+		// console.log('htmx event captured:', event.type, event);
 
 		// Skip connection tests and other non-essential events
 		if (event.type === 'TEST' || event.type === 'CONNECTION_TEST' || event.detail?.type === 'CONNECTION_TEST') {
@@ -544,7 +544,7 @@
 					if (chrome.runtime.lastError) {
 						console.error('Error sending message:', chrome.runtime.lastError);
 					} else {
-						console.log('Message sent successfully:', response);
+						// console.log('Message sent successfully:', response);
 					}
 				}
 			);
@@ -623,5 +623,3 @@
 		console.warn('Not running in a Chrome extension environment. htmx event capture disabled.');
 	}
 })();
-
-console.log('htmx-debugger content script loaded');

manifest-firefox.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "htmx-debugger",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "htmx-debugger - a debugging tool for htmx applications",
 	"permissions": ["activeTab", "alarms"],
 	"background": {

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "htmx-debugger",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "htmx-debugger - a debugging tool for htmx applications",
 	"permissions": ["alarms"],
 	"optional_host_permissions": ["<all_urls>"],

output.css

@@ -455,6 +455,9 @@ video {
 .mr-2 {
 	margin-right: 0.5rem;
 }
+.mt-1 {
+	margin-top: 0.25rem;
+}
 .mt-2 {
 	margin-top: 0.5rem;
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "htmx-debugger",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "htmx-debugger - a debugging tool for htmx applications",
 	"author": "Phillip Beazley <phillip@beazley.org>",
 	"license": "MIT",
@@ -14,19 +14,18 @@
 		"css": "tailwindcss -c ./tailwind.config.mjs -i ./tailwind.css -o ./output.css --minify",
 		"format": "prettier --write .",
 		"lint": "eslint .",
-		"build": "powershell ./.build.ps1",
-		"prepare": "npm run build"
+		"build": "pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass \"./.build.ps1\""
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.12.0",
 		"eslint": "^9.12.0",
-		"globals": "^15.10.0",
+		"globals": "^15.11.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"tailwindcss": "^3.4.13"
 	},
 	"peerDependencies": {
-		"htmx.org": "^2.0.2"
+		"htmx.org": "^2.0.3"
 	},
 	"repository": {
 		"type": "git",

package.json

@@ -417,10 +417,10 @@ function captureElementSnapshot(element) {
 	return {
 		outerHTML: element.outerHTML,
 		innerHTML: element.innerHTML,
-		attributes: Array.from(element.attributes).map(attr => ({
+		attributes: Array.from(element.attributes).map((attr) => ({
 			name: attr.name,
-			value: attr.value
-		}))
+			value: attr.value,
+		})),
 	};
 }