[WordPress] 外掛分享: Customizer Dev Tools

首頁外掛目錄 › Customizer Dev Tools
全新外掛
安裝啟用
尚無評分
3077 天前
最後更新
問題解決
WordPress 4.7+ v0.1.1 上架:2016-08-18

內容簡介

此外掛提供一個立即查看自訂器 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。

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.1.1) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Customizer Dev Tools」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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.

延伸相關外掛

文章
Filter
Mastodon