Seoul Searching: Debugging JavaScript for LLMs

The presentation explores how LLMs access and retrieve web content, why the page you see may not be the page an LLM receives, and how to use Chrome DevTools to identify JavaScript-related retrieval issues.

It also covers a practical auditing approach for finding issues and scaling checks across page templates, global elements, tech stacks, and third parties.

Transcript

1. Seoul Searching: Debugging JavaScript for LLMs Finding the gap between what users see and what LLMs get Jonathan Moore Technical SEO & Analytics Consultant
2. We stopped worrying →
3. Google is good at handling JavaScript
4. You are probably familiar with this https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
5. But AI systems are different
6. Andre Alpar tested this https://www.searchengineworld.com/do-ai-assistants-actually-render-your-javascript-when-grounding-we-put-it-to-the-test
7. The risk isn't necessarily JavaScript
8. JavaScript is the point of failure
9. Let’s debug!
10. The core idea
11. View Source is the code that the server initially sends to your browser
12. The DOM is the browser's current representation of the page, including changes made by JavaScript
13. There are many different rendering approaches https://web.dev/articles/rendering-on-the-web#conclusion
14. Server-side rendering content is rendered on the server https://web.dev/articles/rendering-on-the-web#server-side
15. Client-side rendering content is rendered in the browser with JavaScript https://web.dev/articles/rendering-on-the-web#client-side
16. The skill is to spot the point of failure!
17. My philosophy →
18. 1. Find the root cause 2. Don’t puke issues
19. My debug flow → →
20. 1. Establish what the server sends 2. Compare what the browser builds 3. Isolate dependencies 4. Trace where the content comes from 5. Test different agents
21. Sorry, I use windows
22. Set up a debug Chrome Profile https://support.google.com/chrome/answer/2364824
23. Customise the network Check : Big request rows and Screenshots
24. Customise the network Add your own headers to the network
25. Open the elements panel Crtl + Shift + C
26. View Source Crtl + U
27. You can also check the sources panel
28. Did you know DevTools has commands? Ctrl + Shift + P https://developer.chrome.com/docs/devtools/command-menu
29. Enabling and enabling JavaScript Type: > Disable… and select Type: > Enable… and select
30. Find text in the Sources panel
31. Find text in the Elements panel Select text right click and inspect
32. Searching for text in Elements panel Ctrl + F Pro tip: Use XPath to match patterns https://bit.ly/4zFMIxz
33. Use $0 to reference the selected node console.log(JSON.stringify(JSON.parse($0.textContent), null, 2)) https://bit.ly/4zFMIxz
34. Search all loaded text Ctrl + Shift + F https://bit.ly/4zFMIxz Pro tip: Use regEx search
35. Search network responses Ctrl + F
36. https://developer.chrome.com/docs/devtools/search
37. Network filters Pro tip: Use filter properties https://developer.chrome.com/docs/devtools/network/reference#filter
38. Filter by MIME type Pro tip: Use Ctrl + Click to select multiple MIME Types
39. Blocking requests https://developer.chrome.com/docs/devtools/request-conditions
40. Show Requests conditions drawer
41. Blocking requests continued
42. Request initiator chain https://developer.chrome.com/docs/devtools/network/reference#initiators-dependencies
43. Request dependency chain Sold shift over a request
44. Show network conditions drawer
45. Switch User Agents AI user agent list: https://bit.ly/4zFMIxz https://developer.chrome.com/docs/devtools/device-mode/override-user-agent
46. Use Snippets to save time https://developer.chrome.com/docs/devtools/javascript/snippets
47. This one checks whether selected text appears in the raw HTML and rendered DOM.
48. Enter “!” In the command menu to run them
49. https://bit.ly/4zFMIxz
50. The only limit is your imagination https://bit.ly/4zFMIxz
51. Check out the AI Assistance features as well https://developer.chrome.com/docs/devtools/ai-assistance
52. Auditing principles
53. Pulling it all together
54. Page Templates
55. Global elements
56. Technology stack
57. Third-parties
58. Understand the reach
59. Understand the impact
60. Scaling checks
61. Browser extensions are ok https://chromewebstore.google.com/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob?pli=1
62. But crawlers are better https://sitebulb.com/resources/guides/how-to-crawl-javascript-websites/, https://support.sitebulb.com/en/articles/9857330-response-vs-render-report
63. Sitebulb even offer free trials https://sitebulb.com/free-trial/
64. We need to understand what LLMs receive → →
65. The page you see may not be what the LLM gets → ≠ →
66. If it’s not retrieved, it’s invisible.
67. Get the slides and code here! https://bit.ly/4gwKDNc https://bit.ly/4zFMIxz
68. Thank you! Jonathan Moore in/ https://www.linkedin.com/in/moorejonathan/ PLATINUM GOLD SILVER