Technical SEO Tip: Screaming Frog's 'Show Differences' Highlights JavaScript-Loaded Content

May 30, 2024 at 1:21:07 PM

TL;DR New Screaming Frog feature "Show Differences" visually highlights content loaded through JavaScript. This tool allows direct comparison between the HTML version of a page and content requiring JavaScript, ensuring certainty about JavaScript dependencies. To use it, configure the spider for JavaScript rendering, enable HTML storage, start a crawl, and view differences in the "View Source" tab. This helps identify elements needing JavaScript.

Technical SEO Tip: Screaming Frog's 'Show Differences' Highlights JavaScript-Loaded Content

Screaming Frog's "Show Differences" feature allows users to visually highlight content loaded through JavaScript by directly comparing the HTML version of a page against the JavaScript-loaded content. This ensures certainty about which elements require JavaScript.

Steps to Use the Feature

Open Screaming Frog
Configure Spider for Rendering:
- Navigate to Configuration > Spider > Rendering
- Select "JavaScript" in the "Rendering" dropdown
Configure Spider for Extraction:
- Go to Configuration > Spider > Extraction
- Ensure both "Store HTML" and "Store Rendered HTML" are enabled
Start the Crawl:
- Click on your desired URL
View Differences:
- At the bottom tab, go to View Source
- Select the "Show Differences" box
- Use the dropdown to see highlighted differences between JavaScript and HTML content. Green sections in the "Rendered" column indicate content requiring JavaScript.