Google Chrome Developer tools are of course not a substitute for the data you get from other powerful SEO crawler results; but it provides such interesting data that I recommend using it when doing a technical SEO audit.
You can open the Chrome developer tools by following these steps. You can also open this panel with the Windows (CTRL+Shift+I OR F12) or Mac (Command+Option+I) shortcuts.
The important options you can make in your SEO work after the console is opened are listed under the subheadings below.
1. Status Codes
You can see which server response code the resources loaded on the page have. In this way, you can clearly identify the resources redirected with 404 or 301 on the page. You can see these response codes in the "Status" section. You can also look at the URLs that only return a status code of 200 on the page with the code below.
status-code:200
If caching is properly set up on your server, you can see the 304 status code in this area, for example, for resources that have never been changed. You can also review all the details of the URL in the “Headers” section:
2. Domain Specific Results
You can identify results specific to certain domains from the overseas chinese in worldwide data resources loaded on the page with the code below. This analysis will be useful for page types that include a lot of resources.
-domain:*.hubspot.com
You can already see the domains when you start typing directly with -domain.*:
3. Wordpress Plugins
You can see which plugins are available on Wordpress-based sites with the code below. If the wp-content path has not changed while installing via FTP, you can try this method. For example, in the screenshot below, I can see that a plugin like All in One SEO is used.
4. Waterfall
Chrome clearly shows you the waterfall status of the sources. You can analyze the TTFB values as follows. In this way, you can identify the sources that affect the TTFB value the most.
5. Types of Links
You can determine which link option is used in the links on the page, such as nofollow or UGC, with the code below. After opening DevTools, just paste this code into the “Console” section and press Enter to see the result. I used nofollow for example, you can also use it to see labels such as “ sponsored ”.
$$('a[rel*=nofollow]')
6. Lighthouse Audit
You can perform direct analysis with the “Lighthouse” section in DevTools without installing a Chrome extension. You can see the results of the pages you want for mobile and desktop with a single click and create your to-dos.
As you can see in the example below, you can access the results with just one click without any additional effort:
7. Instant HTML Checks & Changes
It will be a very basic command; but you can click anywhere on the page in the "Elements" section to see which HTML tag it has and make live edits:
You can also change any part of the interface you want with the code below.
document.designMode = 'on'
8. Location Change
You can access results for that city by entering the coordinate you want with Chrome. These operations can be useful especially when analyzing foreign competitors or doing SERP analysis on your multilingual sites.
