[WordPress] 外掛分享： Customizer Dev Tools

前言介紹

  • 這款 WordPress 外掛「Customizer Dev Tools」是 2016-08-18 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2017-11-09，距離現在已有 3031 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 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 環境。

0.1.0 | 0.1.1 | trunk |

延伸相關外掛（你可能也想知道）

  • WP Crontrol 》WP Crontrol 可以讓您查看和控制 WP-Cron 系統中正在發生的事件。從管理界面，您可以：, , 查看所有的 Cron 事件以及它們的參數、循環間隔時間、回撥函數以及...。
  • Query Monitor – The developer tools panel for WordPress 》ministrator user). This cookie can be set by defining QM_AUTH_KEY in your wp-config.php file., To learn more about how to use Query Monitor, please...。
  • P3 (Plugin Performance Profiler) 》這個外掛程式可以創建您 WordPress 網站的外掛程式效能概況，並且藉由測量這些外掛對網站載入時間的影響。通常WordPress網站由於過多或配置不佳的外掛程式而...。
  • Debug Bar 》在管理列上新增一個除錯選單，顯示查詢、快取及其他有用的除錯資訊。, 開發者必備的外掛！, 當啟用WP_DEBUG時，也會追蹤 PHP 的警告和注意事項，使它們更容易...。
  • WP Debugging 》此外掛在啟用時會在 wp-config.php 中設定以下偵錯常數，並在停用時移除它們。任何錯誤都會導致拋出 PHP Exception。偵錯常數請參考 WordPress 的「Debugging...。
  • Debug Log Manager – Conveniently Monitor and Inspect Errors 》Debug Log Manager 可以讓您：, , 單擊啟用 WP_DEBUG 以記錄 PHP、數據庫和 JavaScript 錯誤，不需要手動編輯 wp-config.php 文件，完成後再禁用。 , 在自訂...。
  • My WP Customize Admin/Frontend 》這個外掛讓管理者和前端使用者都能輕鬆地進行自訂設定。許多自訂篩選器和操作，還包含開發者工具。, 示範網站在這裡：https://tastewp.com/new/?pre-installe...。
  • Code Profiler – WordPress Performance Profiling and Debugging Made Easy 》一個可以測量 WordPress 外掛與佈景主題效能的分析工具。, Code Profiler 可以協助您在 PHP 層面上測量您的外掛與佈景主題的效能，並快速找到任何潛在的 Word...。
  • reBusted! 》這個外掛可以免去你問「你有清空快取嗎？」的問題。, 這是根據原本由 Paul Clark 開發的外掛更新，以符合今天的 WordPress 和 PHP。, 功能, , 在線上網站上安...。
  • Plugin Detective – Troubleshooting Conflicts 》Plugin Detective 可以幫助您快速且輕鬆地排除網站上的問題，並找出問題的原因。一旦找到罪犯，您可以快速停用有問題的外掛程式。甚至當您的網站出現白屏、致...。
  • which template file 》想知道 WordPress 在前台顯示頁面時使用哪個模板嗎？, 這個外掛可以幫您達成這個目的。您可以在免費的模擬網站上嘗試使用：點此連結 => https://tastewp.c...。
  • Dashboard Widgets Suite 》插件名稱：Dashboard Widgets Suite（控制面板小工具套裝）, , 該外掛提供 1 個插件與 9 個小工具，可簡化您的工作流程並提高工作效率。該套裝小工具包括以下...。
  • Debug Log – Manager Tool 》這是一個簡單的除錯日誌外掛程式，您可以在儀表板中檢查除錯日誌。透過一個點擊，您可以啟用或停用除錯功能（例如 ‘ WP_DEBUG’、‘WP_DEBUG...。
  • WP Safe Mode 》WP Safe Mode 可讓您暫時停用/啟用特定外掛，並切換到其他佈景主題以檢視您的網站。, 如果您遇到特定外掛或佈景主題的問題並需要進行疑難排解，但又不想影響...。
  • Template Debugger 》你是否常常感到困惑，想知道你正在編輯的模板檔案是哪一個？你曾經因為不確定 WordPress 是否正在使用你期望的檔案而印出一些文字嗎？, 如果是的話，試試這個...。

文章
Filter
Apply Filters
Close
Mastodon