這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

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.

螢幕擷圖

  • Messages sent/received and events triggered during Customizer load.
  • Logging the changing of the Site Title.
  • Logging the change of a nav menu item from a saved sate.
  • Expanding the Site Identity section and then navigating to edit a widget.
  • Changes to wp.customize.state when saving the customizer changes.
  • State changes, messages, and events related to saving.

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

以下人員參與了開源軟體〈Customizer Dev Tools〉的開發相關工作。

參與者

將〈Customizer Dev Tools〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

0.1.1 [2017-11-14]

  • Add setting change listener for settings in preview.
  • Tested up to 4.9.

0.1.0 [2016-08-18]

Initial release