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.

Asset Queue Manager

This tool allows you to monitor, dequeue and requeue scripts and styles that are enqueued on your site. It is designed for frontend performance engineers who want to view and manage all assets enqueued on any page and control the minification and concatenation themselves. For background, please rea.........

Similar: 67%

TIVWP-DM Development Manager

NOTE: The current version of the TIVWP-DM plugin was released mostly for educational purposes. I appreciate your comments and ideas. Please see the TIVWP-DM Development Manager's GitHub repo for additional files showing how to setup Travis-CI/PHPUnit for automatic testing. TIVWP-DM Development Man.........

Similar: 58%

Frontend Debugger

Only for development! Displays: Header Thumbnails The Loop (content) Footer Included template parts Highlight script, link and style elements To remove all registered scripts and styles add ?remove-scripts to the URL. All these scripts and styles will be listed at the bottom of the footer as HT.........

Similar: 50%

P3 (Plugin Performance Profiler)

This plugin creates a profile of your WordPress site's plugins' performance by measuring their impact on your site's load time.  Often times, WordPress sites load slowly because of poorly configured plugins or because there are so many of them. By using the P3 plugin, you can narrow down anything ca.........

Similar: 45%

What's running

Only for development!Now with OPcache memory consumption support This plugin dumps the colorized filenames and memory consumptions or file sizes after the normal WordPress HTML output, after the closing html tag. This generates invalid HTML but gives you an overview of loaded plugins and the curren.........

Similar: 40%

Simple System Status

"Simple System Status" does exactly what it says on the box - shows you, very simply, your systems status for your WordPress Setup. Simple System Status adds a submenu item under the 'tools' section of your WordPress installation....

Similar: 38%

Machine Language

Toggles human and machine language (aka ID-s) on admin pages....

Similar: 34%

Query Monitor

Query Monitor is a debugging plugin for anyone developing with WordPress. It has some advanced features not available in other debugging plugins, including automatic AJAX debugging, REST API debugging, and the ability to narrow down things by plugin or theme. For complete information, please see Qu.........

Similar: 34%

Plugin Inspector

The Plugin Inspector plugin is an easy way to check plugins installed on your WordPress and make sure that plugins do not use deprecated WordPress functions and some unsafe functions like eval, base64_decode, system, exec, etc. Some of those functions may be used to load malicious code (malware) fro.........

Similar: 27%

AskApache Debug Viewer

Extreme Advanced debugging plugin for seeing the verbose of the verbose debug info. Tech Support, Server Admins, WordPress Developers, Plugin Developers, or anyone wanting to see under the hood of their website and diagnose problems. This debugging plugin goes further than any other in the way it .........

Similar: 15%