[ad_1]
Chrome DevTools是一個出色的工具，通常在 技術審核指南，以及一般的SEO。
我們中的許多人為廣泛的工具套件付費（其中一些工具的成本高達數千美元），其目標是：
- 獲取更多數據點。
- 簡化和自動化部分工作。
然而，應用邏輯和定性的先驗知識，沒有哪個工具能夠代替SEO可以執行的分析。
除了付費工具套件之外，市場上還有許多免費工具，它們都能為自己的受眾服務。但是，用於基本和高級SEO審核的最有用的免費工具之一是 Chrome DevTools。
內置於Chrome瀏覽器中的DevTools具有許多功能，可讓我們驗證和審核一些技術性SEO基礎知識以及更高級的審核點。
在大多數情況下，DevTools相對簡單易用。就是說，有少數非常有用且不太明顯的用例可用於技術審核過程。
要打開DevTools，可以右鍵單擊網頁，然後單擊「檢查」，或者單擊瀏覽器右上角的三點漢堡菜單，然後選擇「更多工具」>「開發人員工具」。
下面是使用DevTools識別問題或驗證第三方工具提出的問題的一些方法。
1.檢查您的內容是否可訪問
有時會被認為是理所當然的-除非您使用的JavaScript會得到更多關注-否則重要的是要驗證搜索引擎是否已識別您的主要內容元素。
雖然Google確實有適當的流程來 爬行 和 呈現您網站的內容，它並不總是100％，有時可能由於各種原因而失敗。
可以在DevTools的Elements標籤中看到的DOM（文檔對象模型），您可以：
- 查看各種內容元素，包括元標題和主頁正文內容。
- 驗證是否可以由Google提取。
在這裡要尋找的關鍵是源代碼和elements選項卡的內容之間的差異。
審核使用JavaScript量很大的網站時，內容（例如頁面標題）有時在HTML源代碼中看起來不錯。但是，如果通過JavaScript注入，它可能僅在Elements標籤中顯示為JS塊。
這可能是一個問題，稍後可以通過執行site：example.com/page「您要查找的內容」高級搜索並檢查頁面的緩存版本來驗證。
儘管Google確實有兩步進行JavaScript爬網，但最好還是使Google能夠輕鬆地發現您網站上的內容並降低流程複雜性。
2.模擬多設備體驗
在大多數情況下，擁有移動友好型網站已經成為並且多年來一直是成功網站的重要組成部分。
DevTools可以幫助確定移動設備的友好性以及診斷可用性和速度問題。
易用性
在DevTools中，您可以通過「設備模式」圖標在移動設備和桌面設備之間切換：
您還可以在打開DevTools界面的情況下使用鍵盤快捷鍵（在Mac上使用Cmd + Shift + M或在Linux OS的Windows上使用Ctrl + Shift + M）在兩種模式之間切換。
根據經驗，這是一種有效的審核方法–而不是調整瀏覽器窗口的大小以測試響應能力。
在設備模式下，您可以在響應視口之間進行切換，也可以在不同的預設設備之間進行選擇來測試頁面。
如果您有大量來自特定設備的訪問者，但轉換率低於平均水平，則這對於識別任何潛在問題很有用。
但是，從上面的屏幕快照中可以看到，由於Pixel 2現在已被Pixel 4取代，因此預設選項列表已過時。您可以使用「編輯」選項為其他設備設置自定義尺寸。
網站速度
與移動設備一起，網站速度也是兩個SEO的重要因素（由於 速度更新）和可用性。
儘管有許多第三方速度測試工具，但是如果您要審核HTTP Auth後面的登台網站並被robots.txt阻止，則DevTools是測試這些網頁的理想解決方案。
從屏幕右上方的三點漢堡菜單中，您可以訪問網路條件（位於「更多工具」下）。
在「網路條件」面板中，您可以選擇：
- 禁用瀏覽器緩存。
- 故意將網路限制為快速3G，慢速3G。
- 或添加自定義油門。
您還可以選擇各種用戶代理，從Googlebot智能手機到各種Microsoft Edge UA和Opera。
我建議使用Google Analytics（分析）數據並測試您大多數用戶使用的瀏覽器和設備。
設置完成後，您應該導航至「網路」標籤，查看頁面載入情況，以及已解析頁面上的初始標記DOMContentLoaded的情況，這兩個內容都在頁面底部可見DevTools面板。
為了進行進一步的速度分析，您可以運行 Google Lighthouse 從「審核」標籤中。
3.渲染阻止資源
如前所述，從「網路」選項卡中，您可以確定要在DOM之前載入哪些JavaScript和CSS資源。
儘管這不一定在所有網站上都存在問題，但在DOM之前先載入資源 可能導致它被阻止，這是較常見且可解決的網站速度問題之一。
這些可以通過在「網路」標籤中過濾JS和CSS來識別：
4.檢查資源狀態碼
網路選項卡還允許您檢查資源的HTTP狀態。這對於檢查是否有任何資源返回404或5XX，或者您的緩存是否按預期工作都非常有用。
載入200的資源很好，返回304的任何資源也可以。
304有時會被誤認為是重定向，但是在這種情況下，這表明Last-Modified緩存方法正在按預期運行，並且瀏覽器已經具有有關資源的信息，因此無需再次下載它們。
圖片積分
作者截取的所有屏幕截圖，2020年1月