{"id":6041,"date":"2026-03-15T20:23:37","date_gmt":"2026-03-15T13:23:37","guid":{"rendered":"https:\/\/dev.artru.net\/?p=6041"},"modified":"2026-03-16T09:20:40","modified_gmt":"2026-03-16T02:20:40","slug":"tong-hop-code-console-debug","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/tong-hop-code-console-debug\/","title":{"rendered":"Compilation of Console Debugging Code"},"content":{"rendered":"<h2 class=\"wp-block-heading\">The code checks the height of {body} when it changes.<\/h2>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">(() =&gt; {\n  const H = () =&gt; Math.max(\n    document.documentElement.scrollHeight,\n    document.documentElement.clientHeight,\n    document.body?.scrollHeight || 0,\n    document.body?.clientHeight || 0\n  );\n\n  let last = H(), raf = null;\n\n  const check = () =&gt; {\n    raf = null;\n    const h = H();\n    if (h !== last) {\n      console.log('&#91;HEIGHT] =',h,'|',h - last);\n      last = h;\n    }\n  };\n\n  const s = () =&gt; raf || (raf = requestAnimationFrame(check));\n\n  new ResizeObserver(s).observe(document.documentElement);\n  document.body &amp;&amp; new ResizeObserver(s).observe(document.body);\n  new MutationObserver(s).observe(document.documentElement, { childList: true, subtree: true });\n\n  addEventListener('load', s, { passive: true });\n  addEventListener('resize', s, { passive: true });\n\n  console.log('\u2705 Height watcher ON');\n})();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u201c&quot;Stress Test&quot; Interface (Layout Durability Test)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This code will replace all the text on your website with an extremely long piece of text (Lorum Ipsum). It&#039;s very useful for checking if your Cards, Buttons, or Grid are breaking when the article title is too long.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a').forEach(el => {\n  el.innerText = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. \".repeat(3);\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">&quot;X-Ray&quot; mode (Surveying nested structures)<\/h2>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&#91;].forEach.call(document.querySelectorAll('*'), function(el) {\n  el.style.outline = '1px solid #' + (Math.random() * 0xFFFFFF &lt;&lt; 0).toString(16);\n  el.style.backgroundColor = 'rgba(0,0,0,0.05)';\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">List images that are too large (Slower LCP).<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This code scans all images on the page and logs out images whose actual size (Natural size) is significantly larger than their displayed size, helping you identify the cause of slow website performance.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">(async () => {\n  for (const img of $$('img')) {\n    try {\n      const res = await fetch(img.src);\n      const blob = await res.blob();\n      const bm = await createImageBitmap(blob);\n      const { width: nW, height: nH } = bm;\n      const { width: dW, height: dH } = img;\n\n      if (dW > 0 &amp;&amp; nW \/ dW > 1.5) {\n        const ratio = (nW \/ dW).toFixed(2);\n        const waste = (((nW * nH - dW * dH) \/ (nW * nH)) * 100).toFixed(1);\n        \n        console.log(\n          `%c &#91;HEAVY] ${ratio}x %c (${waste}% waste) %c\\n` +\n          `\u2022 Natural: ${nW}x${nH}px\\n` +\n          `\u2022 Display: ${dW}x${dH}px\\n` +\n          `%c\u2022 RECOMMEND: Resize to ${dW * 2}px%c\\n` +\n          `\u2022 URL: ${img.src}\\n` +\n          `\u2022 DOM:`,\n          'color:white;background:#e67e22;font-weight:bold;border-radius:3px;padding:2px 5px;',\n          'color:red;font-weight:bold;', \n          'color:inherit;',\n          'color:green;font-weight:bold;text-decoration:underline;',\n          'color:inherit;',\n          img\n        );\n\n        img.style.outline = '4px dashed #e67e22';\n        img.style.outlineOffset = '-4px';\n      }\n      bm.close();\n    } catch (e) {}\n  }\n})();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Edit content directly<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Transform your entire website into a text editor. You can click anywhere to delete text, type new text to test which wording best fits the layout before making changes in the backend.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">document.designMode = 'on';<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Check for a &quot;messy&quot; z-index.\u201c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you encounter an issue where one element overlaps another (like a Header overlapping a Popup), this code will list all elements with the specified attribute. <code data-no-translation=\"\" data-no-auto-translation=\"\">z-index<\/code> So you can compare the order.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">const elements = &#91;...document.querySelectorAll('*')]\n  .map(el => ({\n    element: el,\n    zIndex: window.getComputedStyle(el).zIndex\n  }))\n  .filter(obj => obj.zIndex !== 'auto');\nconsole.table(elements);<\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>Code ki\u1ec3m tra chi\u1ec1u cao {body} khi c\u00f3 s\u1ef1 thay \u0111\u1ed5i. &#8220;Stress Test&#8221; Giao di\u1ec7n (Ki\u1ec3m tra \u0111\u1ed9 b\u1ec1n Layout) \u0110o\u1ea1n code n\u00e0y s\u1ebd thay th\u1ebf to\u00e0n b\u1ed9 v\u0103n b\u1ea3n tr\u00ean web b\u1eb1ng m\u1ed9t \u0111o\u1ea1n text c\u1ef1c d\u00e0i (Lorum Ipsum). R\u1ea5t h\u1eefu \u00edch \u0111\u1ec3 check xem c\u00e1c Card, Button ho\u1eb7c Grid c\u1ee7a b\u1ea1n c\u00f3 b\u1ecb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-6041","post","type-post","status-publish","format-standard","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/6041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=6041"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/6041\/revisions"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=6041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=6041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=6041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}