Web developer tools for debugging JavaScript issues in Google Search

Google provides a lot of tools to help you debug JavaScript SEO issues in Google Search. This guide
gives you an overview of the available tools and suggestions on when to use each tool.
Find basic SEO issues with Lighthouse #
Use Lighthouse for your f…

Google provides a lot of tools to help you debug JavaScript SEO issues in Google Search. This guide
gives you an overview of the available tools and suggestions on when to use each tool.

Find basic SEO issues with Lighthouse

Use Lighthouse for your first investigation.
It comes with a bunch of SEO audits.

A screenshot of SEO audits in Lighthouse.

The Lighthouse SEO audits are very basic first checks for a single page of your website. They catch
the most common mistakes and give you a first impression on how your website is doing in terms of
search engine discoverability. Note that Lighthouse runs in your browser, which is not an accurate
representation of how Googlebot might see a web page. For instance, browsers (and Lighthouse) don’t
use robots.txt to decide if they can fetch resources from the network, while Googlebot does. So when
Lighthouse identifies potential problems, you should fix them, but you may have to use other tools
to debug issues further.

Validate pages with Google Search testing tools

Google Search provides
a set of tools for testing how Googlebot sees your web content.
Some of these tools are particularly useful when testing from your development environment:

In combination with
tools like local-tunnel or ngrok
you can create a temporary public URL from your local development environment and iterate quickly
while you are testing with Google’s testing tools.

These testing tools provide you with multiple helpful pieces of information, like:

  • The rendered HTML that Googlebot will use for indexing
  • An overview of the resources loaded and explanations of why resources can’t be loaded
  • Console log messages and JavaScript errors with stack traces
A screenshot of the Mobile-Friendly Test.

The Google Search Console URL Inspection
Tool
can also give you detailed
information about the status of a page.

A screenshot of the URL Inspection Tool.

Here you can find out:

  • If the URL is in the Google Search index or can be indexed in the future
  • What the rendered HTML from the most recent crawl looks like
  • What the rendered HTML looks like for a fresh crawl of the page
  • Information about page resources
  • JavaScript log messages and errors with stack traces
  • A screenshot
  • Mobile usability issues
  • What structured data was detected on the page and if it’s valid

Using these tools you can identify most issues and resolve them. Google Search also provides
documentation for
fixing Google Search-related JavaScript problems
for more guidance on what to do once you identified the cause of a problem.

Investigate site health with Google Search Console

The tools from the last section are great at resolving specific issues on a single page of your
website, but if you want to get a better overview of your entire website, the Google Search
Console
is where you need to go.

Coverage report

The Coverage report shows you which
pages of your website are indexed and which ones have problems.

A screenshot of the Coverage report.

Core Web Vitals report

The Core Web Vitals report helps you
get an overview of how the pages of your website are performing in terms of the Core Web
Vitals
.

A screenshot of the Core Web Vitals report.

Make these tools part of your developer tooling

In this article, we’ve seen a series of tools for various purposes from testing a page before
publishing it to monitoring the pages on a live website that give you transparency on how your
website does in terms of discoverability for Google Search. Some of these tools might become useful
parts of your development toolkit, others might be more like ad-hoc tools to identify the cause of a
problem and fix affected pages. To learn more about Google Search for developers or JavaScript
SEO
, check out the official
Search for developers documentation.


Print Share Comment Cite Upload Translate
APA
Martin Splitt | Sciencx (2024-03-28T17:58:56+00:00) » Web developer tools for debugging JavaScript issues in Google Search. Retrieved from https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/.
MLA
" » Web developer tools for debugging JavaScript issues in Google Search." Martin Splitt | Sciencx - Thursday June 25, 2020, https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/
HARVARD
Martin Splitt | Sciencx Thursday June 25, 2020 » Web developer tools for debugging JavaScript issues in Google Search., viewed 2024-03-28T17:58:56+00:00,<https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/>
VANCOUVER
Martin Splitt | Sciencx - » Web developer tools for debugging JavaScript issues in Google Search. [Internet]. [Accessed 2024-03-28T17:58:56+00:00]. Available from: https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/
CHICAGO
" » Web developer tools for debugging JavaScript issues in Google Search." Martin Splitt | Sciencx - Accessed 2024-03-28T17:58:56+00:00. https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/
IEEE
" » Web developer tools for debugging JavaScript issues in Google Search." Martin Splitt | Sciencx [Online]. Available: https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/. [Accessed: 2024-03-28T17:58:56+00:00]
rf:citation
» Web developer tools for debugging JavaScript issues in Google Search | Martin Splitt | Sciencx | https://www.scien.cx/2020/06/25/web-developer-tools-for-debugging-javascript-issues-in-google-search/ | 2024-03-28T17:58:56+00:00
https://github.com/addpipe/simple-recorderjs-demo