Both, Popups for Divi and Divi Areas Pro come with a powerful integrated debugger. Enabling the Debug-Mode can be done in the following ways:
Debugging features
There are several ways to enable a debugging feature.
- Debug Output in JS Console: All plugins
- Debug Output in code (“un-minified JS code”): Only Divi Areas Pro
wp-config.php
- Supported by:
- Popups for Divi
- Divi Areas Pro
Out of the box, both plugins will observe the global variable WP_DEBUG
to determine whether to “Enable Debug Output“.
Divi Areas Pro also observes SCRIPT_DEBUG
to determine whether to “Output un-minified JS“.
define( 'WP_DEBUG', true ); // Enable output in JS Console (all plugins).
define( 'WP_DEBUG', false ); // Disable output in JS Console (all plugins).
define( 'SCRIPT_DEBUG', true ); // Output un-minified JS (Divi Areas Pro).
define( 'SCRIPT_DEBUG', false ); // Output minified JS (Divi Areas Pro).
define( 'DIVIMODE_DEBUG', true ); // Output additional details in un-minified JS.
PHP filter
- Supported by:
- Popups for Divi
- Divi Areas Pro
Use the WordPress filter divi_areas_js_data
to manually override the “Enable Debug Output” state:
<?php
add_filter( 'divi_areas_js_data', 'my_custom_js_data' );
function my_custom_js_data( $config ) {
$config['debug'] = true; // Enable output in JS Console.
return $config;
}
Divi Areas Pro offers the filter divi_areas_output_unminified_js to manually set the state of “Output un-minified JS”:
<?php
// Output un-minified JS:
add_filter( 'divi_areas_output_unminified_js', '__return_true' );
// Output minified JS:
add_filter( 'divi_areas_output_unminified_js', '__return_false' );
Divi Areas Pro Settings
- Supported by:
- Popups for Divi
- Divi Areas Pro
You can also manually enable or permanently disable the debugger via the Divi Areas > Settings page, inside the Front-End tab.
Output in JS Console
- Supported by:
- Popups for Divi
- Divi Areas Pro
When enabled, the JS API will display a ton of information that tells you, what exactly happens, and why. To see the debug output, open your browsers JS console and reload a page that contains a Divi Area.
-
Every browser has a JavaScript console. Usually, you can open this console with a simple keyboard shortcut:
– Chrome: Press ⌘+⌥+J (on a Mac) or Ctrl+Shift+J (on Windows).
– Firefox: Press ⌘+⌥+K (on a Mac) or Ctrl+Shift+K (on Windows).
– For other browsers or more details, read the official guide on wordpress.org
The debug output is visible to all users, both logged-in and guests, so it’s best to only use it on a development or staging site. if you enable it on a production website, remember to disable it again once you are done.
Default output in your JS console
Tip: Filter and Debug Levels
Every debug output that is generated by Divi Areas Pro uses the Prefix “[DiviAreas]”. You can use the Console’s Filter to quickly hide all other messages. Also, make sure to play with the Debug-Level options to see what kind of debug information is available.
Output un-minified JS
- Supported by:
- Popups for Divi
- Divi Areas Pro
Every Divi Area injects a one-line JS snippet on your pages to register the Area and set up your custom triggers. You can find this snippet, by examining your website source code and searching for the term “DiviArea”.
-
First, open the browsers' developer tools:
- Chrome/Firefox: Press ⌘+⌥+I (on a Mac) or F12 (on Windows).
- Alternate: Right-click anywhere on the page. In the context menu choose "View Page Source".Then, search the page source:
- Open the "Elements" tab of the developer tools
- Now hit ⌘+F (Mac) or Ctrl+F (Windows) to search for anything, like a tag, attribute or string
Here’s an example of the minified JS snippet:
When the option “Output un-minified JS” is enabled, the same script is output like this:
The minification is done by a simple string translation without using external libraries. It’s super fast and reliable.