☰

Web Inspector

Allows you to inspect web pages

  1. // ==UserScript==
  2. // @name         Web Inspector
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1.4
  5. // @description  Allows you to inspect web pages
  6. // @author       https://gf.qytechs.cn/en/users/85040-dan-wl-danwl
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @run-at       document-start
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. // MIT License
  14.  
  15. // Copyright(c) 2024 DanWL
  16.  
  17. // Permission is hereby granted, free of charge, to any person obtaining a copy
  18. // of this software and associated documentation files(the "Software"), to deal
  19. // 	in the Software without restriction, including without limitation the rights
  20. // to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
  21. // copies of the Software, and to permit persons to whom the Software is
  22. // furnished to do so, subject to the following conditions:
  23.  
  24. // The above copyright notice and this permission notice shall be included in all
  25. // copies or substantial portions of the Software.
  26.  
  27. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  28. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  29. // 	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
  30. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  31. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  32. // 	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  33. // SOFTWARE.
  34.  
  35.  
  36. // This userscript defines a function on the web page you visit
  37. // For the function to do anything, use this bookmarklet:
  38. // javascript:(function(){WEB_INSPECTOR();})();
  39. // A bookmarklet is essentially a regular browser bookmark/favorite but with a JavaScript url
  40.  
  41. // jshint esnext: false, esversion: 8
  42.  
  43. (() => {
  44. 	function debugAlert(str) {
  45. 		const debug = false;
  46.  
  47. 		if (debug) {
  48. 			alert(str);
  49. 		}
  50. 	}
  51.  
  52. 	function el(tagName, className) {
  53. 		const ret = document.createElement(tagName);
  54.  
  55. 		if (className) {
  56. 			ret.className = className;
  57. 		}
  58.  
  59. 		return ret;
  60. 	}
  61.  
  62. 	function spanNode(className, innerTextOrText) {
  63. 		const span = el('span', className);
  64.  
  65. 		if (typeof innerTextOrText !== 'undefined') {
  66. 			if (typeof innerTextOrText === 'string') {
  67. 				innerTextOrText = textNode(innerTextOrText);
  68. 			}
  69.  
  70. 			if (typeof innerTextOrText === 'object' && isFinite(innerTextOrText.nodeType) && innerTextOrText.nodeType === Node.TEXT_NODE) {
  71. 				// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
  72. 				// using instanceof doesnt always work
  73.  
  74. 				append(span, innerTextOrText);
  75. 			}
  76. 			else {
  77. 				throw new Error('spanNode(className, innerTextOrText) innerTextOrText is ' + innerTextOrText);
  78. 			}
  79. 		}
  80.  
  81. 		return span;
  82. 	}
  83.  
  84. 	function brNode() {
  85. 		return el('br');
  86. 	}
  87.  
  88. 	function textNode(txt) {
  89. 		return document.createTextNode(txt);
  90. 	}
  91.  
  92. 	function append(parent, nodes) {
  93. 		// enables much better minimising
  94.  
  95. 		if (!Array.isArray(nodes)) {
  96. 			nodes = [nodes];
  97. 		}
  98.  
  99. 		nodes.forEach((node) => {
  100. 			parent.appendChild(node);
  101. 		});
  102. 	}
  103.  
  104. 	function htmlSymbol(symbol) {
  105. 		return spanNode('html-symbol', symbol);
  106. 	}
  107.  
  108. 	function createTagNameNode(tagName) {
  109. 		return spanNode('tag-name', tagName);
  110. 	}
  111.  
  112. 	function createTagAttributeValueNode(attribute) {
  113. 		const isLink = ['href', 'src'].includes(attribute.name);
  114. 		const isStyle = attribute.name === 'style';
  115. 		const span = spanNode('tag-attribute-value');
  116.  
  117. 		if (isLink) {
  118. 			append(span, [textNode('"'), createLink(attribute.value, attribute.value), textNode('"')]);
  119. 		}
  120. 		else if (isStyle) {
  121. 			append(span, [textNode('"'), parseStyle(attribute.ownerElement.style), textNode('"')]);
  122. 		}
  123. 		else {
  124. 			append(span, textNode(JSON.stringify(attribute.value)));
  125. 		}
  126.  
  127. 		return span;
  128. 	}
  129.  
  130. 	function createPlainTextNode(node) {
  131. 		// TODO html entities highlighting
  132.  
  133. 		return spanNode('text', textNode(applyHTMLWhitespaceRules(node.textContent)));
  134. 	}
  135.  
  136. 	function elementDoesNotNeedToBeClosed(tagName) {
  137. 		// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  138.  
  139. 		return ['base', 'link', 'meta', 'hr', 'br', 'wbr', 'area', 'img', 'track', 'embed', 'source', 'input'].includes(tagName);
  140. 	}
  141.  
  142. 	function applyHTMLWhitespaceRules(text) {
  143. 		// https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
  144.  
  145. 		return text
  146. 			.replace(/^[\t ]+/mg, '')
  147. 			.replace(/[\t\r\n]/g, ' ')
  148. 			.replace(/ {2,}/g, ' ');
  149. 	}
  150.  
  151. 	function createSpacer(spacing) {
  152. 		const spacer = el('pre', 'spacer');
  153.  
  154. 		spacer.innerHTML = spacing;
  155.  
  156. 		return spacer;
  157. 	}
  158.  
  159. 	function createIndentSpacer(indentLevel) {
  160. 		const space = '\t';
  161. 		let spacing = '';
  162.  
  163. 		while (indentLevel > 0) {
  164. 			spacing += space;
  165. 			indentLevel--;
  166. 		}
  167.  
  168. 		const spacer = createSpacer(spacing);
  169.  
  170. 		spacer.className += ' indentation';
  171.  
  172. 		return spacer;
  173. 	}
  174.  
  175. 	function createLink(url, displayText) {
  176. 		const link = el('a');
  177.  
  178. 		link.href = url;
  179. 		link.target = '_blank';
  180.  
  181. 		append(link, textNode(displayText));
  182.  
  183. 		return link;
  184. 	}
  185.  
  186. 	function createExpandCollapseBtn(element) {
  187. 		// https://www.amp-what.com &#9660
  188.  
  189. 		const btn = el('button', 'expand-collapse-button');
  190.  
  191. 		btn.innerHTML = '▼';
  192.  
  193. 		return btn;
  194. 	}
  195.  
  196. 	function setupExpandCollapseBtns(output) {
  197. 		// outerHTML doesnt pass event handlers, so add them all after finished generating the content
  198.  
  199. 		const btns = output.querySelectorAll('button.expand-collapse-button');
  200.  
  201. 		for (let i = 0; i < btns.length; i++) {
  202. 			btns[i].onclick = function(e) {
  203. 				const btn = e.target;
  204. 				let element;
  205.  
  206. 				if (btn.parentNode.className.match(/^html-line\b/)) {
  207. 					element = btn.parentNode.querySelector('.tag-inner');
  208. 				}
  209. 				else if (btn.parentNode.className.match(/^[a-z\-]+-rule\b/)) {
  210. 					element = btn.parentNode.querySelector('.css-brace-content');
  211. 				}
  212. 				else {
  213. 					console.error('btn', btn);
  214.  
  215. 					throw new Error('setupExpandCollapseBtns(output) btns[i].onclick showing/collapsing button does not correctly control html or css');
  216. 				}
  217.  
  218. 				if (element.className.match(/ collapsed /)) {
  219. 					element.className = element.className.replace(/ collapsed /, '');
  220. 				}
  221. 				else {
  222. 					element.className += ' collapsed ';
  223. 				}
  224. 			};
  225. 		}
  226. 	}
  227.  
  228. 	function getUrlOrigin(link) {
  229. 		debugAlert('getUrlOrigin(link) link = ' + link);
  230.  
  231. 		if (typeof URL !== 'function') {
  232. 			throw new Error('Your browser does not support the URL constructor');
  233. 		}
  234.  
  235. 		let url;
  236.  
  237. 		try {
  238. 			url = new URL(link);
  239. 		}
  240. 		catch(error) {
  241. 			throw new Error('getUrlOrigin(link) link is not a valid url. link = ' + link);
  242. 		}
  243. 		finally {
  244. 			if (url && !url.origin) {
  245. 				throw new Error('getUrlOrigin(link) link when turned into a URL does not have an origin. link = ' + link);
  246. 			}
  247.  
  248. 			if (url.origin === 'null') {
  249. 				// some urls like about:blank have a 'null' origin
  250. 				return null;
  251. 			}
  252.  
  253. 			return url.origin;
  254. 		}
  255. 	}
  256.  
  257. 	async function getIframeContent(node, tagNode, indentLevel) {
  258. 		const iframeSrcOrigin = getUrlOrigin(node.src);
  259. 		const tagInnerNode = spanNode('tag-inner collapsed ');
  260. 		let _resolve;
  261.  
  262. 		function appendIframeOuterHTML(iframeOuterHTML) {
  263. 			try {
  264. 				window.removeEventListener('message', receiveParseHTMLOutputMessage);
  265. 				tagInnerNode.insertAdjacentHTML('beforeend', iframeOuterHTML);
  266. 				append(tagNode, tagInnerNode);
  267. 				_resolve();
  268. 			}
  269. 			catch(error) {
  270. 				throw error;
  271. 			}
  272. 		}
  273.  
  274. 		function receiveParseHTMLOutputMessage(event) {
  275. 			// security does not matter as much for receiving the messages
  276. 			// at worst its the incorrect html
  277.  
  278. 			try {
  279. 				if (event.origin !== iframeSrcOrigin) {
  280. 					return;
  281. 				}
  282.  
  283. 				if (!(event.data && event.data.WEB_INSPECTOR && event.data.WEB_INSPECTOR.parseHTMLOutput)) {
  284. 					return;
  285. 				}
  286.  
  287. 				appendIframeOuterHTML(event.data.WEB_INSPECTOR.parseHTMLOutput);
  288. 			}
  289. 			catch(error) {
  290. 				throw error;
  291. 			}
  292. 		}
  293.  
  294. 		return await new Promise((resolve) => {
  295. 			_resolve = resolve;
  296.  
  297. 			if (!iframeSrcOrigin) {
  298. 				appendIframeOuterHTML(spanNode('userscript-error', 'Error: unable to get iframe content because iframe src has a "null" origin. postMessage does not allow "null" origins to be used to communicate between windows.').outerHTML);
  299. 				return;
  300. 			}
  301.  
  302. 			window.addEventListener('message', receiveParseHTMLOutputMessage);
  303. 			node.contentWindow.postMessage({WEB_INSPECTOR: {parseHTML: indentLevel + 1}}, iframeSrcOrigin);
  304. 		});
  305. 	}
  306.  
  307. 	function parseHTML_addNewLineSpacing(parent, indentLevel) {
  308. 		append(parent, brNode());
  309.  
  310. 		if (indentLevel > 0) {
  311. 			append(parent, createIndentSpacer(indentLevel));
  312. 		}
  313.  
  314. 		const spacing = createSpacer('  ');
  315.  
  316. 		append(parent, spacing);
  317.  
  318. 		return spacing;
  319. 	}
  320.  
  321. 	function parseHTML_parseElementAttributes(tagNode, node) {
  322. 		const nodeAttributes = node.attributes;
  323.  
  324. 		if (nodeAttributes.length) {
  325. 			const tagAttributesNode = spanNode('tag-attributes');
  326.  
  327. 			for (const attribute of nodeAttributes) {
  328. 				append(tagAttributesNode, [htmlSymbol(' '), spanNode('tag-attribute-name', attribute.name), htmlSymbol('='), createTagAttributeValueNode(attribute)]);
  329. 			}
  330.  
  331. 			append(tagNode, tagAttributesNode);
  332. 		}
  333. 	}
  334.  
  335. 	function parseHTML_parseElementCloseTag(indentLevel, line, tagNode, tagName) {
  336. 		if (tagNode.querySelectorAll('.tag, .css, .script').length > 0) {
  337. 			append(tagNode, brNode());
  338.  
  339. 			if (indentLevel > 0) {
  340. 				append(tagNode, createIndentSpacer(indentLevel));
  341. 			}
  342.  
  343. 			const spacing = parseHTML_addNewLineSpacing(line, indentLevel);
  344. 			const expandCollapseBtn = createExpandCollapseBtn(tagNode.querySelector('.tag-inner'));
  345.  
  346. 			spacing.insertAdjacentElement('afterend', expandCollapseBtn);
  347. 			expandCollapseBtn.insertAdjacentHTML('afterend', '<pre class="spacer"> </pre>');
  348. 			append(tagNode, spacing);
  349. 		}
  350.  
  351. 		append(tagNode, [htmlSymbol('</'), createTagNameNode(tagName), htmlSymbol('>')]);
  352. 	}
  353. 	
  354. 	async function parseHTML(node, parent, indentLevel) {
  355. 		// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
  356. 		// using instanceof doesnt always work
  357.  
  358. 		const isElement = node.nodeType === Node.ELEMENT_NODE;
  359. 		const isText = node.nodeType === Node.TEXT_NODE;
  360. 		const isComment = node.nodeType === Node.COMMENT_NODE;
  361. 		const isDoctype = node.nodeType === Node.DOCUMENT_TYPE_NODE;
  362.  
  363. 		const line = spanNode('html-line');
  364.  
  365. 		if (isElement) {
  366. 			const tagNode = spanNode('tag');
  367. 			const tagName = node.tagName.toLowerCase();
  368. 			const elementIsSelfClosing = elementDoesNotNeedToBeClosed(tagName);
  369. 			const style = getComputedStyle(node);
  370.  
  371. 			// FIXME isHidden detection isn't fully correct https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
  372. 			const isHidden = style.display === 'none' || style.visibility !== 'visible';
  373.  
  374. 			if (isHidden) {
  375. 				tagNode.className += ' hidden-tag';
  376. 			}
  377.  
  378. 			append(tagNode, [htmlSymbol('<'), createTagNameNode(tagName)]);
  379. 			parseHTML_parseElementAttributes(tagNode, node);
  380. 			append(tagNode, htmlSymbol((elementIsSelfClosing ? ' /' : '') + '>'));
  381.  
  382. 			if (tagName === 'iframe') {
  383. 				if (node.srcdoc && node.src === 'about:srcdoc') {
  384. 					// TODO support doctype declaration
  385. 					const tagInnerNode = spanNode('tag-inner collapsed ');
  386. 					const tmp = el('html');
  387.  
  388. 					tmp.innerHTML = node.srcdoc;
  389.  
  390. 					for (const child of tmp.childNodes) {
  391. 						await parseHTML(child, tagInnerNode, indentLevel + 1).then(() => {}, (error) => {
  392. 							debugAlert('in parseHTML iframe.srcdoc .then error');
  393. 							throw error;
  394. 						});
  395. 					}
  396.  
  397. 					append(tagNode, tagInnerNode);
  398. 				}
  399. 				else if (node.src) {
  400. 					await getIframeContent(node, tagNode, indentLevel).then(() => {}, (error) => {
  401. 						debugAlert('in parseHTML getIframeContent.then error');
  402. 						throw error;
  403. 					});
  404. 				}
  405. 			}
  406. 			else if (node.childNodes.length > 0) {
  407. 				const tagInnerNode = spanNode('tag-inner');
  408.  
  409. 				if (isHidden || node.childNodes.length > 1) {
  410. 					// initialise to collapsed, dont make it collapse again unless done so by user
  411. 					tagInnerNode.className += ' collapsed ';
  412. 				}
  413.  
  414. 				switch(tagName) {
  415. 					case 'style': {
  416. 						append(tagInnerNode, parseStyle(node.sheet, 0));
  417. 						break;
  418. 					}
  419. 					case 'script': {
  420. 						append(tagInnerNode, parseScript(node));
  421. 						break;
  422. 					}
  423. 					default: {
  424. 						for (const child of node.childNodes) {
  425. 							await parseHTML(child, tagInnerNode, indentLevel + 1).then(() => {}, (error) => {
  426. 								debugAlert('in parseHTML parseHTML.then error');
  427. 								throw error;
  428. 							});
  429. 						}
  430. 					}
  431. 				}
  432.  
  433. 				append(tagNode, tagInnerNode);
  434. 			}
  435.  
  436. 			if (!elementIsSelfClosing) {
  437. 				parseHTML_parseElementCloseTag(indentLevel, line, tagNode, tagName);
  438. 			}
  439.  
  440. 			append(line, tagNode);
  441. 		}
  442. 		else if (isText) {
  443. 			append(line, createPlainTextNode(node));
  444. 		}
  445. 		else if (isComment) {
  446. 			parseHTML_addNewLineSpacing(line, indentLevel);
  447.  
  448. 			append(line, spanNode('comment', '<!-- ' + node.textContent + '-->'));
  449. 		}
  450. 		else if (isDoctype) {
  451. 			parseHTML_addNewLineSpacing(line, indentLevel);
  452.  
  453. 			append(line, spanNode('document-type', '<!DOCTYPE ' + node.nodeName + '>'));
  454. 		}
  455. 		else {
  456. 			debugAlert('unexpected node');
  457.  
  458. 			console.log('isElement', isElement);
  459. 			window._node = node;
  460. 			console.error(node);
  461. 			throw new Error('parseHTML(node, parent, indentLevel) unexpected node');
  462. 		}
  463.  
  464. 		append(parent, line);
  465. 	}
  466.  
  467. 	function validateIndentLevel(indentLevel) {
  468. 		if (indentLevel === undefined || isNaN(indentLevel)) {
  469. 			// any of these + 1 gives NaN
  470. 			return true;
  471. 		}
  472.  
  473. 		if (typeof indentLevel === 'number' && isFinite(indentLevel) && indentLevel >= 0) {
  474. 			return true;
  475. 		}
  476.  
  477. 		throw new Error('validateIndentLevel(indentLevel) indentLevel must be a number >= 0, undefined or NaN');
  478. 	}
  479.  
  480. 	function cssSymbol(symbol) {
  481. 		return spanNode('css-symbol', symbol);
  482. 	}
  483.  
  484. 	function atRuleNameNode(name) {
  485. 		return spanNode('css-at-rule-name', name);
  486. 	}
  487.  
  488. 	function cssSelectorText(selectorText) {
  489. 		// parsing selector text is very complex
  490. 		// so just leave it as it is for now
  491. 		// https://www.npmjs.com/package/css-selector-parser
  492. 		// https://github.com/mdevils/css-selector-parser/blob/master/src/parser.ts
  493.  
  494. 		return spanNode('css-full-selector', selectorText);
  495. 	}
  496.  
  497. 	function previewCSSColorNode(property, value) {
  498. 		if (!property.match(/(^|-)color$/)) {
  499. 			// properties with a color as a value are either 'color' or end with '-color'
  500. 			return;
  501. 		}
  502.  
  503. 		if (property.match(/^-/)) {
  504. 			// could be a css varable which might not be a color value
  505. 			return;
  506. 		}
  507.  
  508. 		if (value.match(/^(-|var\()/i)) {
  509. 			// cant easily preview variable colors
  510. 			return;
  511. 		}
  512.  
  513. 		if (value.match(/^(currentcolor|inherit|initial|revert|revert-layer|unset)$/i)) {
  514. 			// cant easily preview global colors
  515. 			return;
  516. 		}
  517.  
  518. 		// the outline adds contrast 
  519. 		// getComputedStyle(preview) gives empty string so use the very new css invert function
  520. 		// https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert
  521.  
  522. 		const span = spanNode('css-color-preview-container');
  523. 		const preview = spanNode('css-color-preview');
  524. 		const previewInner = spanNode();
  525.  
  526. 		preview.style.outlineColor = value;
  527. 		previewInner.style.backgroundColor = value;
  528.  
  529. 		append(preview, previewInner);
  530. 		append(span, [createSpacer(' '), preview]);
  531.  
  532. 		return span;
  533. 	}
  534.  
  535. 	function parseStyle(cssStyleDeclaration, indentLevel) {
  536. 		validateIndentLevel(indentLevel);
  537.  
  538. 		// https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model
  539. 		// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule
  540. 		// https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
  541.  
  542. 		const style = spanNode('css');
  543.  
  544. 		function addNewLineSpacing(parent, indentLevel, spacer) {
  545. 			if (!isFinite(indentLevel)) {
  546. 				return;
  547. 			}
  548.  
  549. 			append(parent, [brNode(), createIndentSpacer(indentLevel), spacer ? spacer : createSpacer('  ')]);
  550. 		}
  551.  
  552. 		function parseDeclaration(property, value, indentLevel, isLastDeclaration) {
  553. 			validateIndentLevel(indentLevel);
  554.  
  555. 			const decNode = spanNode('css-declaration');
  556. 			const propNode = spanNode('css-declaration-property', property);
  557. 			const valNode = spanNode('css-declaration-value', value);
  558. 			const colorPreviewNode = previewCSSColorNode(property, value);
  559.  
  560. 			addNewLineSpacing(decNode, indentLevel);
  561.  
  562. 			append(decNode, [propNode, cssSymbol(': ')]);
  563.  
  564. 			if (colorPreviewNode) {
  565. 				append(valNode, colorPreviewNode);
  566. 			}
  567.  
  568. 			append(decNode, [valNode, cssSymbol(';')]);
  569.  
  570. 			if (!isFinite(indentLevel) && !isLastDeclaration) {
  571. 				append(decNode, cssSymbol(' '));
  572. 			}
  573.  
  574. 			return decNode;
  575. 		}
  576.  
  577. 		function parseRuleCSSRules(rule, indentLevel) {
  578. 			if (!rule.cssRules.length) {
  579. 				return textNode('');
  580. 			}
  581.  
  582. 			const ruleRulesNode = spanNode();
  583.  
  584. 			for (const ruleRule of rule.cssRules) {
  585. 				parseRule(ruleRulesNode, ruleRule, indentLevel + 1);
  586. 			}
  587.  
  588. 			return ruleRulesNode;
  589. 		}
  590.  
  591. 		function parseRule(parentElement, rule, indentLevel) {
  592. 			validateIndentLevel(indentLevel);
  593.  
  594. 			const ruleNode = spanNode();
  595. 			const braceLeadingNode = spanNode('css-brace-leading');
  596. 			const braceContentNode = spanNode('css-brace-content');
  597. 			const spacer = createSpacer('  ');
  598.  
  599. 			function insertExpandCollapseBtn() {
  600. 				spacer.insertAdjacentElement('beforebegin', createExpandCollapseBtn(braceContentNode));
  601. 				spacer.innerHTML = ' ';
  602. 			}
  603.  
  604. 			addNewLineSpacing(ruleNode, indentLevel, spacer);
  605.  
  606. 			switch (rule.constructor.name) {
  607. 				case 'CSSStyleRule': {
  608. 					insertExpandCollapseBtn();
  609.  
  610. 					ruleNode.className = 'style-rule';
  611.  
  612. 					append(braceLeadingNode, cssSelectorText(rule.selectorText));
  613. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  614. 					append(braceContentNode, [parseRuleCSSRules(rule, indentLevel), parseStyle(rule.style, indentLevel)]);
  615. 					addNewLineSpacing(braceContentNode, indentLevel);
  616. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  617.  
  618. 					break;
  619. 				}
  620. 				case 'CSSImportRule': {
  621. 					ruleNode.className = 'import-rule';
  622.  
  623. 					const url = spanNode();
  624. 					const layer = spanNode(0, rule.layerName === null ? '' : (' ' + (rule.layerName ? `layer(${rule.layerName})` : rule.layerName)));
  625. 					const supports = spanNode(0, rule.supportsText === null ? '' : ` supports(${rule.supportsText})`);
  626.  
  627. 					append(url, [textNode('url("'), createLink(rule.styleSheet.href, rule.href), textNode('")')]);
  628. 					append(ruleNode, [atRuleNameNode('@import '), url, layer, supports, spanNode(0, rule.media.mediaText)]);
  629.  
  630. 					break;
  631. 				}
  632. 				case 'CSSMediaRule': {
  633. 					insertExpandCollapseBtn();
  634.  
  635. 					ruleNode.className = 'media-rule';
  636.  
  637. 					append(braceLeadingNode, [atRuleNameNode('@media '), textNode(rule.conditionText)]);
  638. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  639. 					append(braceContentNode, parseRuleCSSRules(rule, indentLevel));
  640. 					addNewLineSpacing(braceContentNode, indentLevel);
  641. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  642.  
  643. 					break;
  644. 				}
  645. 				case 'CSSFontFaceRule': {
  646. 					insertExpandCollapseBtn();
  647.  
  648. 					ruleNode.className = 'font-face-rule';
  649.  
  650. 					append(braceLeadingNode, atRuleNameNode('@font-face'));
  651. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  652. 					append(braceContentNode, parseStyle(rule.style, indentLevel + 1));
  653. 					addNewLineSpacing(braceContentNode, indentLevel);
  654. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  655.  
  656. 					break;
  657. 				}
  658. 				case 'CSSPageRule': {
  659. 					insertExpandCollapseBtn();
  660.  
  661. 					ruleNode.className = 'page-rule';
  662.  
  663. 					append(braceLeadingNode, atRuleNameNode('@page'));
  664.  
  665. 					if (rule.selectorText) {
  666. 						append(braceLeadingNode, [cssSymbol(' '), cssSelectorText(rule.selectorText)]);
  667. 					}
  668.  
  669. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  670. 					append(braceContentNode, [parseRuleCSSRules(rule, indentLevel), parseStyle(rule.style, indentLevel + 1)]);
  671. 					addNewLineSpacing(braceContentNode, indentLevel);
  672. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  673.  
  674. 					break;
  675. 				}
  676. 				case 'CSSNamespaceRule': {
  677. 					ruleNode.className = 'namespace-rule';
  678.  
  679. 					append(ruleNode, atRuleNameNode('@namespace '));
  680.  
  681. 					if (rule.prefix) {
  682. 						append(ruleNode, rule.prefix + ' ');
  683. 					}
  684.  
  685. 					append(rule, [textNode('url("'), createLink(rule.namespaceURI, rule.namespaceURI), textNode('")')]);
  686.  
  687. 					break;
  688. 				}
  689. 				case 'CSSKeyframesRule': {
  690. 					insertExpandCollapseBtn();
  691.  
  692. 					ruleNode.className = 'keyframes-rule';
  693.  
  694. 					append(braceLeadingNode, [atRuleNameNode('@keyframes '), textNode(rule.name)]);
  695. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  696. 					append(braceContentNode, parseRuleCSSRules(rule, indentLevel + 1));
  697. 					addNewLineSpacing(braceContentNode, indentLevel);
  698. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  699.  
  700. 					break;
  701. 				}
  702. 				case 'CSSKeyframeRule': {
  703. 					insertExpandCollapseBtn();
  704.  
  705. 					ruleNode.className = 'keyframe-rule';
  706.  
  707. 					append(braceLeadingNode, textNode(rule.keyText));
  708. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  709. 					append(braceContentNode, parseStyle(rule.style, indentLevel + 1));
  710. 					addNewLineSpacing(braceContentNode, indentLevel);
  711. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  712.  
  713. 					break;
  714. 				}
  715. 				case 'CSSCounterStyleRule': {
  716. 					insertExpandCollapseBtn();
  717.  
  718. 					ruleNode.className = 'counter-style-rule';
  719.  
  720. 					append(braceLeadingNode, [atRuleNameNode('@counter-style '), textNode(rule.name)]);
  721. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  722. 					[
  723. 						['system', rule.system],
  724. 						['symbols', rule.symbols],
  725. 						['additiveSymbols', rule.additiveSymbols],
  726. 						['negative', rule.negative],
  727. 						['prefix', rule.prefix],
  728. 						['suffix', rule.suffix],
  729. 						['range', rule.range],
  730. 						['pad', rule.pad],
  731. 						['speak-as', rule.speakAs],
  732. 						['fallback', rule.fallback]
  733. 					].forEach((declaration) => {
  734. 						if (declaration[1]) {
  735. 							append(braceContentNode, parseDeclaration(declaration[0], declaration[1], indentLevel + 1));
  736. 						}
  737. 					});
  738. 					addNewLineSpacing(braceContentNode, indentLevel);
  739. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  740.  
  741. 					break;
  742. 				}
  743. 				case 'CSSSupportsRule': {
  744. 					insertExpandCollapseBtn();
  745.  
  746. 					ruleNode.className = 'supports-rule';
  747.  
  748. 					append(braceLeadingNode, [atRuleNameNode('@supports '), textNode(rule.conditionText)]);
  749. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  750. 					append(braceContentNode, parseRuleCSSRules(rule, indentLevel + 1));
  751. 					addNewLineSpacing(braceContentNode, indentLevel);
  752. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  753.  
  754. 					break;
  755. 				}
  756. 				case 'CSSFontFeatureValuesRule': {
  757. 					ruleNode.className = 'font-feature-values-rule';
  758.  
  759. 					// TODO test this in a browser that supports CSSFontFeatureValuesRule
  760. 					// not supported in librewolf 133.0-1 on linux
  761.  
  762. 					// https://developer.mozilla.org/en-US/docs/Web/API/CSSFontFeatureValuesRule
  763. 					// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values
  764. 					// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values/font-display
  765.  
  766. 					console.warn(rule);
  767. 					console.warn('unclear how to parse CSSFontFeatureValuesRule, using unformatted');
  768.  
  769. 					append(ruleNode, textNode(rule.cssText));
  770.  
  771. 					// ruleNode.appendChild(textNode('@font-feature-values '));
  772. 					// ruleNode.appendChild(rule.fontFamily);
  773. 					// ruleNode.appendChild(cssSymbol(' {'));
  774.  
  775. 					// who knows
  776.  
  777. 					// ruleNode.appendChild(cssSymbol('}'));
  778.  
  779. 					break;
  780. 				}
  781. 				case 'CSSFontPaletteValuesRule': {
  782. 					ruleNode.className = 'font-palette-values-rule';
  783.  
  784. 					// TODO test this in a browser that supports CSSFontPaletteValuesRule
  785. 					// not supported in librewolf 133.0-1 on linux
  786.  
  787. 					console.warn(rule);
  788. 					console.warn('unclear how to parse CSSFontFeatureValuesRule, using unformatted');
  789.  
  790. 					append(ruleNode, textNode(rule.cssText));
  791.  
  792. 					// ruleNode.appendChild(textNode('@font-palette-values '));
  793. 					// ruleNode.appendChild(rule.name);
  794. 					// ruleNode.appendChild(cssSymbol(' {'));
  795.  
  796. 					// ruleNode.appendChild(parseDeclaration('font-family', rule.fontFamily, indentLevel + 1));
  797. 					// ruleNode.appendChild(parseDeclaration('base-palette', rule.basePalette, indentLevel + 1));
  798.  
  799. 					// no idea how this will behave
  800. 					// https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule
  801. 					// https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/overrideColors
  802. 					// may need special treatment for formatting
  803. 					// ruleNode.appendChild(parseDeclaration('override-colors', rule.overrideColors, indentLevel + 1, true))
  804.  
  805. 					// ruleNode.appendChild(cssSymbol('}'));
  806.  
  807. 					break;
  808. 				}
  809. 				case 'CSSLayerBlockRule': {
  810. 					insertExpandCollapseBtn();
  811.  
  812. 					ruleNode.className = 'layer-block-rule';
  813.  
  814. 					append(braceLeadingNode, [atRuleNameNode('@layer '), textNode(rule.name)]);
  815. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  816. 					append(braceContentNode, parseRuleCSSRules(rule, indentLevel + 1));
  817. 					addNewLineSpacing(braceContentNode, indentLevel);
  818. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  819.  
  820. 					break;
  821. 				}
  822. 				case 'CSSLayerBlockRule': {
  823. 					ruleNode.className = 'layer-block-rule';
  824.  
  825. 					append(ruleNode, atRuleNameNode('@layer '));
  826.  
  827. 					rule.nameList.forEach((name, i) => {
  828. 						append(ruleNode, textNode(name));
  829.  
  830. 						if (i + 1 < this.length) {
  831. 							append(ruleNode, cssSymbol(', '));
  832. 						}
  833. 					});
  834.  
  835. 					append(ruleNode, cssSymbol(';'));
  836.  
  837. 					break;
  838. 				}
  839. 				case 'CSSPropertyRule': {
  840. 					insertExpandCollapseBtn();
  841.  
  842. 					ruleNode.className = 'property-rule';
  843.  
  844. 					append(braceLeadingNode, [atRuleNameNode('@property '), textNode(rule.name)]);
  845. 					append(ruleNode, [braceLeadingNode, cssSymbol(' {')]);
  846. 					append(braceContentNode, [parseDeclaration('syntax', rule.syntax, indentLevel + 1), parseDeclaration('inherits', '' + rule.inherits, indentLevel + 1), parseDeclaration('initial-value', rule.initialValue, indentLevel + 1, true)]);
  847. 					addNewLineSpacing(braceContentNode, indentLevel);
  848. 					append(ruleNode, [braceContentNode, cssSymbol('}')]);
  849.  
  850. 					break;
  851. 				}
  852. 				default: {
  853. 					ruleNode.className = 'unexpected-rule';
  854.  
  855. 					// should not need to explicitly handle CSSGroupingRule because other rule types inherit from it
  856. 					// should not need to explicitly handle CSSNestedDeclarations because other rules pass a cssStyleDeclaration
  857.  
  858. 					console.warn(rule);
  859. 					console.warn('unexpected css rule type, using unformatted');
  860.  
  861. 					append(ruleNode, textNode(rule.cssText));
  862.  
  863. 					break;
  864. 				}
  865. 			}
  866.  
  867. 			parentElement.appendChild(ruleNode);
  868. 		}
  869.  
  870. 		if (cssStyleDeclaration instanceof CSSStyleSheet) {
  871. 			const ruleRulesNode = spanNode();
  872.  
  873. 			for (const rule of cssStyleDeclaration.cssRules) {
  874. 				parseRule(ruleRulesNode, rule, indentLevel);
  875. 			}
  876.  
  877. 			append(style, ruleRulesNode);
  878. 		}
  879. 		else {
  880. 			// previously use a for of before to filter out all style declarations
  881. 			// need to know if there is a next declaration for formatting purposes
  882. 			// element.style has numbered indexes for styles actually declared on the element
  883.  
  884. 			for (let i = 0; ; ) {
  885. 				const prop = cssStyleDeclaration[i];
  886.  
  887. 				if (!prop) {
  888. 					break;
  889. 				}
  890.  
  891. 				i++;
  892.  
  893. 				const hasNext = !!cssStyleDeclaration[i];
  894.  
  895. 				append(style, parseDeclaration(prop, cssStyleDeclaration.getPropertyValue(prop), indentLevel + 1, !hasNext));
  896. 			}
  897. 		}
  898.  
  899. 		return style;
  900. 	}
  901.  
  902. 	function parseScript(node) {
  903. 		// TODO formatting, highlighting
  904.  
  905. 		return spanNode('script', node.textContent.trim());
  906. 	}
  907.  
  908. 	function hideCollapsed() {
  909. 		let a = '.collapsed';
  910. 		let b = a;
  911.  
  912. 		['br', '.spacer', '.spacer'].forEach((c) => {
  913. 			b += ' + ' + c;
  914. 			a += ', ' + b;
  915. 		});
  916.  
  917. 		return a + ' {\n\tdisplay: none;\n}';
  918. 	}
  919.  
  920. 	function color(selector, color) {
  921. 		return `${selector} {\n\tcolor: ${color};\n}`;
  922. 	}
  923.  
  924. 	function getStyle() {
  925. 		return `body {
  926. 	margin: 1em;
  927. 	padding: 0;
  928. 	display: block;
  929. 	font-family: monospace;
  930. 	font-size: 1em;
  931. 	line-height: 1.2em;
  932. 	tab-size: 2;
  933. 	color: #cbcbc7;
  934. 	background: #232327;
  935. 	word-break: break-word;
  936. }
  937.  
  938. .spacer {
  939. 	margin: 0;
  940. 	padding: 0;
  941. 	border: 0;
  942. 	outline: 0;
  943. 	display: inline-block;
  944. }
  945.  
  946. ${hideCollapsed()}
  947.  
  948. .expand-collapse-button {
  949. 	margin: 0;
  950. 	padding: 0;
  951. 	border: 0;
  952. 	width: fit-content;
  953. 	cursor: pointer;
  954. 	background: inherit;
  955. 	color: #88888a;
  956. }
  957.  
  958. .expand-collapse-button:has(+ .spacer + .tag > .collapsed), .expand-collapse-button:has(+ .spacer + .css-brace-leading + .css-symbol + .css-brace-content.collapsed) {
  959. 	rotate: 270deg;
  960. }
  961.  
  962. ${color('.userscript-error', '#ff0000')}
  963.  
  964. .document-type {
  965. 	font-style: italic;
  966. }
  967.  
  968. ${color('.html-symbol', '#7c7c7e')}
  969.  
  970. ${color('.document-type', '#72baf9')}
  971.  
  972. ${color('.comment', '#90EE90')}
  973.  
  974. ${color('.tag-name', '#72baf9')}
  975.  
  976. ${color('.tag-attribute-name', '#fb7be5')}
  977.  
  978. ${color('.tag-attribute-value', '#9b79d4')}
  979.  
  980. .tag-attribute-value a {
  981. 	color: inherit;
  982. 	text-decoration: underline;
  983. }
  984.  
  985. ${color('.tag.hidden-tag .html-symbol', '#6e6e6e')}
  986.  
  987. ${color('.tag.hidden-tag .tag-name', '#929294')}
  988.  
  989. ${color('.tag.hidden-tag .tag-attribute-name', '#676768')}
  990.  
  991. ${color('.tag.hidden-tag .tag-attribute-value', '#939394')}
  992.  
  993. ${color('.css-symbol', '#7c7c7e')}
  994.  
  995. ${color('.css-at-rule-name', '#72baf9')}
  996.  
  997. ${color('.css-declaration-property', '#80d36f')}
  998.  
  999. ${color('.css-declaration-value', '#fb7be5')}
  1000.  
  1001. .css-color-preview {
  1002. 	display: inline-block;
  1003. 	width: 1em;
  1004. 	height: 1em;
  1005. 	outline-width: 2px;
  1006. 	outline-style: solid;
  1007. 	filter: invert(100%);
  1008. }`;
  1009. 	}
  1010.  
  1011. 	async function main(outputWindow) {
  1012. 		const meta1 = el('meta');
  1013. 		const meta2 = el('meta');
  1014. 		const title = el('title');
  1015. 		const style = el('style');
  1016. 		const output = el('span');
  1017.  
  1018. 		meta1.setAttribute('charset', 'utf-8');
  1019.  
  1020. 		meta2.setAttribute('name', 'viewport');
  1021. 		meta2.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1');
  1022.  
  1023. 		title.innerHTML = 'Web Inspector - ' + document.title;
  1024.  
  1025. 		style.innerHTML = getStyle();
  1026.  
  1027. 		for (const node of document.childNodes) {
  1028. 			await parseHTML(node, output, 0).then(() => {}, (error) => {
  1029. 				debugAlert('in main parseHTML.then error');
  1030. 				throw error;
  1031. 			});
  1032. 		}
  1033.  
  1034. 		if (output.firstElementChild.tagName === 'BR') {
  1035. 			// remove unnecessary spacing at top
  1036. 			output.firstElementChild.remove();
  1037. 		}
  1038.  
  1039. 		setupExpandCollapseBtns(output);
  1040.  
  1041. 		outputWindow.document.write('<!DOCTYPE html><html><head></head><body></body></html>');
  1042.  
  1043. 		append(outputWindow.document.head, meta1);
  1044. 		append(outputWindow.document.head, meta2);
  1045. 		append(outputWindow.document.head, title);
  1046. 		append(outputWindow.document.head, style);
  1047. 		append(outputWindow.document.body, output);
  1048. 	}
  1049.  
  1050. 	async function receiveParseHTMLMessage(event) {
  1051. 		try {
  1052. 			// unable to access iframe content, so wait for a message from the top window
  1053. 			// then pass the output element
  1054.  
  1055. 			if (event.source !== top) {
  1056. 				// this check should reduce security issues
  1057. 				return;
  1058. 			}
  1059.  
  1060. 			if (!(event.data && event.data.WEB_INSPECTOR && event.data.WEB_INSPECTOR.parseHTML)) {
  1061. 				// make sure the instruction exists
  1062. 				return;
  1063. 			}
  1064.  
  1065. 			const indentLevel = parseInt(event.data.WEB_INSPECTOR.parseHTML);
  1066.  
  1067. 			if (!(isFinite(indentLevel) && indentLevel > 0)) {
  1068. 				return;
  1069. 			}
  1070.  
  1071. 			window.removeEventListener('message', receiveParseHTMLMessage);
  1072.  
  1073. 			const output = spanNode();
  1074.  
  1075. 			for (const node of document.childNodes) {
  1076. 				await parseHTML(node, output, indentLevel).then(() => {}, (error) => {
  1077. 					debugAlert('in receiveParseHTMLMessage parseHTML error');
  1078. 					throw error;
  1079. 				});
  1080. 			}
  1081.  
  1082. 			event.source.postMessage({WEB_INSPECTOR: {parseHTMLOutput: output.outerHTML}}, event.origin);
  1083. 		}
  1084. 		catch(err) {
  1085. 			throw err;
  1086. 		}
  1087. 	}
  1088.  
  1089. 	function isDefined(variable) {
  1090. 		return typeof variable !== 'undefined';
  1091. 	}
  1092.  
  1093. 	function extractErrorInfo(error) {
  1094. 		let str = error.name + ': ' + error.message;
  1095.  
  1096. 		if (isDefined(error.fileName) && isDefined(error.lineNumber) && isDefined(error.columnNumber)) {
  1097. 			str += ' in ' + error.fileName + ' ' + error.lineNumber + ':' + error.columnNumber;
  1098. 		}
  1099.  
  1100. 		if (isDefined(error.stack)) {
  1101. 			str += '\n' + error.stack;
  1102. 		}
  1103.  
  1104. 		return str;
  1105. 	}
  1106.  
  1107. 	function errorDetected(error) {
  1108. 		return prompt('Error while using Web Inspector:', extractErrorInfo(error));
  1109. 	}
  1110.  
  1111. 	if (self !== top) {
  1112. 		window.addEventListener('message', receiveParseHTMLMessage);
  1113.  
  1114. 		return;
  1115. 	}
  1116.  
  1117. 	window.WEB_INSPECTOR = function() {
  1118. 		// try to open in a new window
  1119. 		// if popups are blocked, replace the current webpage with the web inspector
  1120.  
  1121. 		const outputWindow = open('about:blank') || window;
  1122.  
  1123. 		main(outputWindow).then(() => {}, (error) => {
  1124. 			debugAlert('in window.WEB_INSPECTOR main error');
  1125. 			errorDetected(error);
  1126. 		});
  1127.  
  1128. 		outputWindow.onload = function() {
  1129. 			main(outputWindow).then(() => {}, (error) => {
  1130. 				debugAlert('in window.WEB_INSPECTOR outputWindow main error');
  1131. 				errorDetected(error);
  1132. 			});
  1133. 		};
  1134. 	};
  1135. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址