前言介紹
- 這款 WordPress 外掛「Customizer Dev Tools」是 2016-08-18 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2017-11-09，距離現在已有 2733 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
xwp | westonruter |
外掛標籤
debug | customize | debugging | dev-tools | customizer |
內容簡介
此外掛提供一個立即查看自訂器 JavaScript 程式操作歷程的開發者工具。自訂器是一個單頁應用程式，其中包含許多事件、訊息和狀態更改，這些驅動自訂器的應用程式。了解這些內容對於開發自訂器的 JavaScript 是必要的。
要使用此外掛，啟用它，打開自訂器和瀏覽器控制台，然後輸入以下命令：
CustomizerDevTools.startLogging()
此時，您可以開始與自訂器應用程式交互，以查看從那個時間點起的日誌條目，或重新載入自訂器以查看自訂器初始化期間發出的日誌條目。
自訂器中並非所有內容都能發出日誌條目。如果需要特定事件，請提交問題。
功能：
透過瀏覽器控制台執行 CustomizerDevTools.startLogging() 可開始記錄自訂器事件，並透過 CustomizerDevTools.stopLogging() 停止。在前者中，您可以通過傳遞字串或正則表達式 (RegExp 物件) 來篩選要輸出的內容，或使用瀏覽器控制台內建的日誌篩選功能。
紀錄在 wp.customize 上觸發的所有事件。
紀錄在 wp.customize.state 新增和更改的內容。
記錄對於面板、區塊和控制項的 active 和 expanded 狀態的更改。
紀錄面板 (控制項) 和預覽傳送和接收的訊息。
記錄面板、區塊、控制項、優先區塊和設定的動態增加和刪除 (在 ready 事件觸發後處理)。
從父視窗持續地提供自訂器預覽中的 wp.customize 物件，您可以透過 CustomizerDevTools.previewCustomize 存取。當預覽重新整理時，此參照會更新，因此您不再需要更改框架視窗上下文即可存取此物件。
同樣地，當前自訂器預覽的 window 以 CustomizerDevTools.previewWindow 形式顯示。這是對 wp.customize.previewer.targetWindow.get() 更簡便的做法，且具有提供自動完成的額外好處。
請確保您也安裝了自訂器瀏覽器歷程紀錄和自訂化快照外掛，這樣您就可以重新載入瀏覽器窗口，自訂器將以相同的狀態加載，包括焦點面板、區塊、控制項，預覽 URL，預覽中的捲動位置以及預覽的裝置。
需要 PHP≥5.3。
原文外掛簡介
The customizer is a single-page application that includes a lot of events, messages, and state changes which drive the application. Being aware of these things is essential for developing JavaScript for the customizer.
To use, activate the plugin, open the customizer and the browser console and enter:
CustomizerDevTools.startLogging()
You can then either start interacting with the customizer app to see the log entries from that point, or you can reload the customizer to see the log entries emitted during the customizer initialization.
Not everything in the customizer is currently implemented to emit a log entry. File an issue for any specific event that may be needed.
Features:
Start logging of customizer events via running CustomizerDevTools.startLogging() from your browser console, and stop via CustomizerDevTools.stopLogging(). In the former, you can filter what is logged out by passing a string or regular expression (RegExp object) to match against the given log, or you can use the browser console’s built-in log filtering.
Logs out all events triggered on wp.customize.
Logs out additions and changes to to wp.customize.state.
Logs changes to the active and expanded states for panels, sections, and controls.
Logs out messages sent and received by the pane (controls) and preview.
Logs out dynamic addition and removal of panels, sections, controls, partials, and settings (after the ready event triggers).
The wp.customize object from the Customizer preview is made persistently available from the parent frame via CustomizerDevTools.previewCustomize. This reference is updated whenever the preview refreshes, so you no longer have to change the frame window context to access this object.
In the same way, the current Customizer preview window is exposed as CustomizerDevTools.previewWindow. This is a shortcut for doing wp.customize.previewer.targetWindow.get(), and it has the added benefit of allowing the browser’s dev tools to provide auto-completion.
Make sure you also install the Customizer Browser History and Customize Snapshots plugins so that you can reload the browser window and have the Customizer load with the same state as before you reloaded, including the persistence of the focused panel, section, control, the previewed URL, the scroll position in the preview, and which device is being previewed.
Requires PHP≥5.3.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Customizer Dev Tools」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
WPGraphQL IDE 》總結：WordPress 外掛 GraphQL IDE for WPGraphQL 為使用者提供一個更直觀的界面，方便進行 GraphQL 查詢和測試。, , 問題與答案：, - ,
Where 》在管理列顯示您的 WordPress 站點的環境類型。, 可用的篩選器, ‘where_env_should_add_env_type’ – 如果使用者是管理員且管理列正在顯示，...。
G Debugger 》G Debugger整合了Gutenberg區塊編輯器，添加了有用的視覺調試工具，以協助區塊開發。, 在這個初步版本中，目前的功能包括：, , 「屬性檢查器」顯示區塊當前屬...。