使用 Chrome 開發人員工具檢查代碼

Chrome 的開發人員工具可用於快速分析網頁內容/資源,因此可協助您檢查 Display & Video 360 的代碼。

存取開發人員工具

  1. 在網頁中按一下滑鼠右鍵,然後選取 [檢查元素]。系統隨即顯示您所點擊元素的 HTML 程式碼。

  2. 依序選取 [檢視] > [開發人員] > [開發人員工具]

  3. 使用「alt + command + i」鍵盤快速鍵。

可用的分頁與其用途

  • Elements 分頁:這個分頁會顯示網頁轉譯後的 HTML,這與網頁的原始碼不同。如果網頁在載入時,透過 JavaScript 建立或變更了任何 HTML 元素,那麼這些變更就會反映在網頁所轉譯的 HTML 中,但網頁原始碼不會受到影響。

    應用方式
    • 查看代碼修改的項目:您可在這個分頁中找出已導入網頁的像素、Floodlight 代碼和/或廣告代碼,以判斷它們是否經過修改。由於 Display & Video 360 代碼中的網址包含使用「doubleclick」網域的網址,因此您可以在尋找代碼時使用「double」這個實用的搜尋字詞。找到所需項目之後,只要將目前導入的代碼版本,與直接從廣告投放管理使用者介面匯出的代碼進行比較即可。
    • 針對 CSS 相關問題進行疑難排解:在 Elements 分頁中,右側欄會顯示各種 CSS 屬性,這些屬性可控制所選 HTML 元素的顯示方式與位置。
      • Computed Style 列會顯示所選元素作用中的 CSS 規則,無論這些規則是由網頁的網站管理員所撰寫的 CSS 程式碼明確設定,或衍生自該類型 HTML 元素的瀏覽器預設值,這兩種規則都包括在內。
      • 相對地,Styles 區段則只會顯示網站管理員明確指定的 CSS 規則,當中的每個子區段代表了網頁程式碼中寫入相關 CSS 規則 (會影響所選 HTML 元素的 CSS 規則) 的不同位置。如果您發現某個規則會導致網頁發生問題,只要按一下位於該子區段右上角的連結,即可載入執行相關規則的行或文件。
    Elements 分頁中最實用的一項功能之一,就是可以讓您一邊檢查程式碼、一邊加以編輯。如果您認為某一行 HTML 程式碼或某項 CSS 規則會導致網頁發生問題,可視需要更改程式碼來驗證您的假設,這樣只會影響儲存在瀏覽器暫存記憶體中的網頁版本。當您重新載入網頁 (或是其他使用者造訪該網頁) 時,您所做的變更就會消失。
  • Resources 分頁:由於您所檢查的網頁會與不同的資源一起載入,因此您可在這個分頁中查看列有這些資源的表格,當中的資源類型包括圖片、HTML 文件、JavaScript 檔案等。您可以透過「搜尋」功能查看可供網頁使用的所有資源,而不只是網頁本身的資源,因此您可以利用這個分頁,針對 Display & Video 360 相關問題進行疑難排解。

    應用方式

    找出未寫入網頁的代碼:儘管 Elements 分頁可讓您查看網頁所轉譯的 HTML,但廣告代碼卻不一定是透過將程式碼寫入網頁本身的方式觸發。換句話說,要找出已導入的刊登位置代碼,最簡單可靠的方法就是使用 Resources 分頁中的「搜尋」功能。

  • Network 分頁:這個分頁是內建的 Proxy-sniffer,可讓您監控網頁在載入當時和之後的 HTTP 流量。

    應用方式
    • 檢查廣告代碼或像素是否能正確觸發:Proxy-sniffer 是最適合用來執行品質確保作業和疑難排解程序的工具。基本上,如果某個代碼無法正確觸發,該代碼就無法追蹤或傳回廣告素材內容。同樣地,只要能發出正確的呼叫 (使用正確的語法/格式),我們的伺服器並不會干涉代碼的導入方式。但依據網頁性質的不同,您可能需要將某些因素列入考量。您可以使用 Network 分頁偵測廣告代碼或像素是否已觸發。如果廣告代碼或像素已經觸發,請確定呼叫語法與該代碼未修改版本中顯示的網址完全相符。
    • 延遲測試:除了檢查是否發出呼叫之外,Network 分頁還會顯示特定要求收到回應所花費的時間。如要進行延遲測試 (尤其是要測試動態像素代碼的話),這項功能會非常實用。假如像素在載入網頁時的延遲過長,只要檢查搭載像素發出的呼叫,通常就能找出發生問題的原因。換句話說,產生延遲的原因並不是像素本身,而是代碼內的其中一個搭載像素引起延遲。
  • Scripts 分頁:這個分頁可用於針對 JavaScript 程式碼進行除錯。雖然對於網頁開發人員而言,這可說是無價的工具,不過這項工具與 Google Marketing Platform 產品的品管或疑難排解並無直接關係。

  • Timeline 分頁:這個分頁會顯示某個時段內的 HTTP 流量與記憶體用量。與 Network 分頁非常類似,Timeline 分頁也可用於找出產生延遲的來源。除此之外,這個分頁與 Display & Video 360 的相關問題並無關聯。

  • Profiles 分頁:網路開發人員可利用這項工具,針對網路應用程式中的 CPU 用量進行最佳化。這個分頁與 Display & Video 360 的相關問題並無關聯。

  • Audits 分頁:這個分頁可在網頁載入時進行分析,並針對縮短網頁載入時間及增加感知 (和實際) 回應提供建議及進行最佳化。這個分頁與 Display & Video 360 的相關問題並無關聯。

  • Console 分頁:這個分頁會自動偵測該網頁程式碼中的錯誤。Network 分頁判斷出系統未觸發代碼後,您可透過 Console 分頁找出未觸發代碼的原因

    應用方式

    疑難排解語法錯誤:如果系統未觸發您的代碼,請檢查 Console 分頁,以查看 Chrome 是否偵測到任何錯誤。以下是必須多加留意的主要錯誤:

    Console 分頁的其中一項實用功能,就是將所顯示的錯誤訊息連結到造成錯誤的行及文件。這有助於將問題追溯到必須更改的程式碼行,不過,這項功能並非百分之百可靠。雖然這個分頁提供的錯誤偵測結果十分可靠,但其歸屬機制較不精準,因此可能只會連結到位於錯誤程式碼附近的行。
    • NS_IMAGELIB」:將 iFrame「src」網址導入為圖片時,就可能發生這個錯誤。這種混淆會造成廣告代碼或像素無法正確觸發;不過如果是像素或 Floodlight 代碼,這個錯誤並不會影響系統歸屬轉換。換句話說,假如像素內含這個錯誤,導入該像素中的第三方像素就無法正確觸發。
    • Unsafe JavaScript attempt to access frame with URL」:您可以忽略這項錯誤,因為這只是在網頁從其他網域嵌入 iFrame 時所顯示的安全性警告。除非使用者的安全性設定等級較高,否則在多數情況下,系統不會顯示這個安全性警告。此外,這個警告也不會影響像素或 Floodlight 代碼 (或搭載像素) 的放送方式。
    • Resource interpreted as '_blank_' but transferred with MIME type」:這表示檔案的格式有問題。MIME 是網際網路的檔案格式識別碼。當載入資源的副檔名錯誤 (例如,gif 檔使用 .jpeg 副檔名) 時,就有可能發生這項錯誤。
    • Uncaught TypeError」:這表示網頁中的某個 HTML 元素發生類型錯誤,通常是指 JavaScript 函式含有錯誤的程式碼。
    • Uncaught SyntaxError」:這表示網頁中的某個元素發生語法錯誤,通常是指元素不當使用了多餘的字元 (<"/-*^#)。
這對您有幫助嗎?
我們應如何改進呢?

還有其他問題嗎?

登入即可獲得其他支援選項,快速解決您的問題