JQuery Monitor | overview / usage *

/ SprUng, Android, coding cheat, Database, Debugging, PLUGINS, wp-cli, wordpress - more cheats, TOOLS / 8 minutes of reading

RESOURCES

  • Query Monitor SetUP Steps
  • The best way to get a handle on everything generated by Query Monitor is to install it on a test site and take a look at the reports.
  • GItHub: https://github.com/johnbillion/query-monitor
    • View as Logged-Out User
    • in admin area – open query monitor
    • Scroll the very bottom of the reported data and look for the link that says Set authentication cookie. Note that you must be in the admin area to see the link. If you look for the link on a front end page, you won’t find it.
    • Clicking that link will add an authentication cookie to your browser. That way Query Monitor will know to display test results even if you aren’t logged in.
    • With the authentication cookie set, log out of the site or switch to a non-admin user profile using a plugin like User Switching.
    • Navigate to the page where you want to see debugging information and scroll to the bottom of the page. There you’ll see a condensed version of the Query Monitor report. Click on any item to expand the report.

ALSO: https://clickety-clack.click/query-monitor-addons-developer-tools/

https://www.cloudways.com/blog/wordpress-query-monitor/


Worked for me (bluehost)

  • define( 'QM_DB_SYMLINK', true ); //extended info from query monitor - db.php
  • then running wpcli – 
    wp qm enable

https://github.com/johnbillion/query-monitor/wiki/db.php-Symlink

 

John Blackbourn edited this page on Jan 21 · 20 revisions

In addition to the main plugin file, Query Monitor includes a file named db.php which gets symlinked into your wp-content directory when the plugin is activated. This file is called a WordPress dropin plugin and it allows Query Monitor to do a few clever things such as logging the query result and full stack trace for all database queries.

Occasionally PHP won't have the correct permissions to put this symlink in place. Query Monitor will still work fine in this situation but you won't see extended information that makes Query Monitor much more useful.

The QM_DB_SYMLINK constant is also available (since version 3.6.7) for disabling the creation of this symlink upon activation. If this constant is set to boolean false, for example in your wp-config.php file, then the symlink won't be created.

In this situation you can create the symlink manually using one of the methods below.

Using WP-CLI

Query Monitor (version 3.6 and above) includes a WP-CLI command for putting the symlink into place:

wp qm enable

Using the command line

If you don't have access to WP-CLI you can run a command to create the symlink manually:

macOS / Linux:

ln -s /path/to/wordpress/wp-content/plugins/query-monitor/wp-content/db.php /path/to/wordpress/wp-content/db.php

Windows (requires administrator privileges):

mklink C:\path\to\wordpress\wp-content\db.php C:\path\to\wordpress\wp-content\plugins\query-monitor\wp-content\db.php

Relaxing the file permissions

Relax the file permissions on the wp-content directory and then de-activate and re-activate Query Monitor and it'll attempt to create the symlink again.

Via your hosting control panel

If you're unable to do any of the above, or your host prevents the creation of symlinks via PHP, you should be able to use your web hosting control panel (such as Plesk or cPanel) to create the symlink. Contact your web host if you're unsure.

When an existing db.php file is already in place

The db.php file will sometimes conflict with another plugin that also uses a db.php file. Such plugins include:

  • W3 Total Cache
  • LudicrousDB
  • HyperDB

There is nothing that can be done about this. This a WordPress core limitation due to the fact that the dropin plugin file must be called db.php and placed in the wp-content directory, and only one can exist there.

 

DB Symlink - enable with wpcli
Show less


It also has a series of constants that you can add to the wp-config.php file to configure parameters and settings of the monitor:

To show page permissions: define( ‘QM_ENABLE_CAPS_PANEL’, true );

QM_DARK_MODE turn on the dark mode for Query Monitor interface. Default value: false

QM_DB_EXPENSIVE If an individual database query takes longer than this, it is considered “slow” and a warning is activated. Default value: 0.05

QM_DISABLED Disables Query Monitor completely. Default value: false

QM_DISABLE_ERROR_HANDLER Disables PHP error handling. Default value: false

QM_ENABLE_CAPS_PANEL Activates the permissions check panel. Default value: false

QM_HIDE_CORE_ACTION Hides the WordPress core in the “Hooks and Actions” panel Default value: false

QM_HIDE_SELF The Query Monitor itself is hidden from several panels. Default value: false

QM_NO_JQUERY Do not specify jQuery as a Query Monitor dependency. If jQuery is not queued, Query Monitor will still work, but with reduced functionality. Default value: false

QM_SHOW_ALL_HOOK Shows every hook that has an action or filter attached to it in the “Hooks and Actions” panel (instead of the action hooks that are triggered during the request). Default value: false

And, if this is not enough, in Query Monitor settings, by clicking on the gear icon on the right, you can even select the default editor, from the browser or even installed on your computer.

You can see the database queries that are made, both per applicant and duplicates…

The hooks in use…

The headers…

Conditionals…

And even the variables of the environment…

WP-Config Settings
Show less

WordPress Query Monitor Plugin: Let’s Debug and Improve Performance

September 5, 2019

7 Min Read

 

Are you getting WordPress errors but unable to resolve them?

To detect WordPress errors, the developers usually work in reverse. They start by excluding sections of the code that might harbor the issue(s) and then start evaluating individual areas. In general, for WordPress websites, the major areas of concern are PHP settings, .htaccess file, wp-config file, database queries, and DNS settings.

Some time ago, I came across the WordPress Query Monitor plugin, a great dev tool for discovering what’s going on the website. The plugin offers detailed information that developers can use to narrow down the “troubled” areas of the code.

In this tutorial on the plugin, I will begin with a detailed introduction of the WordPress Query Monitor plugin and then go into a brief description of the common use case of the plugin.

Table of Contents

What Is WordPress Query Monitor?

Query Monitor is a WordPress plugin that adds great value to the debugging phase and generally improves the overall performance of your WordPress dev workflows.

The plugin adds an entry in the top menu bar that acts as a dropdown list that contains the number of queries being executed on the current page, the loading time, filters by type of query, filters by components, etc. As a result, developers have a better idea of what could be causing the errors on the website.

![wordpress query monitor plugin](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggxgn6jqayj303k03kglf.jpg

It has been developed by John Blackbourn and is available at both the official WordPress Plugin Repository and from GitHub. Like every great WordPress plugin, Query Monitor is regularly updated and the development team provides excellent support and fixes for all reported bugs.

The installation is very simple and generally does not require additional steps (when compared to the installation process of similar plugins). After installation, this WordPress debug plugin does not need additional configuration. Right out of the box, it starts displaying the dropdown list in the admin toolbar.

query monitor settings
query monitor settings

By clicking the entries in the dropdown list, you can access details about the queries that are made to the database, the scripts, and CSS that is loaded, active hooks, and the HTTP API calls.

toolbar
toolbar

Features of WordPress Query Monitor

Here is a quick overview of the features of the Query Monitor plugin.

Theme Errors

Theme feature lists down all the queries triggered by the installed WordPress theme. It displays the file name of the theme template responsible for a specific query and shows the complete template hierarchy. Theme feature also highlights the unloaded theme parts and the name of the active WordPress theme.

PHP Errors

WordPress runs on PHP and whether the request is generated by a theme or a plugin it is in the form of a PHP code. PHP Errors feature highlights the source components and the location responsible for generating the query.

Note: Not all the queries listed inside the Query Monitor are serious. It is quite possible that it is just a warning.

AJAX Calls

Dynamic WordPress sites make a lot of Ajax calls for sending and fetching data in real-time without loading the complete web page. Query Monitor also shows these requests along with other useful debugging information. This information can help the developer in highlighting any errors.

REST API

If you have the permission to monitor the Query Monitor, you can debug the information presented inside the header of a request of an authenticated WordPress REST API. Currently, the plugin only supports PHP errors and memory usage.

Authentication

By default, only the admin of a single-site installation and the super admin of a WordPress Multisite can view the logs inside the Query Monitor. However, you can configure an authentication cookie that allows you to see the logs even when you are logged in as a user.

Privacy Statement

WordPress Query Monitor neither collects any data nor send any data to third parties.

I have also noticed that the FAQs indicate that Debug Bar add-ons can be used with Query Monitor, just deactivate Debug Bar first. And there are also add-ons for Query Monitor.

Why Query Monitor Is Useful for Developers?

With Query Monitor plugin, developers can have a fair idea of what areas to improve. More than that, developers can discover the plugin or other website assets that is consuming an abnormal volume of resources or (in worse cases) are conflicting with the rest of the core files.

For website owners and developers interested in improving Web Performance Optimization (WPO), Query Monitor is an ideal solution for identifying bottlenecks that can be rectified with improved code snippets, alternatives or in some cases complete replacement of scripts/plugins.

Let’s consider a simple dev task – finding out the page load time and the number of active queries on the page.

WordPress offers two simple functions: get_num_queries () and timer_stop(). As the name explains, the get_num_queries () returns the number of database queries generated during the execution and timer_stop() returns the number of seconds required to generate the page.

How to Use WordPress Query Monitor?

Once you have installed and activated Query Monitor, you need to go to Plugins → Installed Plugins → Query Monitor → Settings and then click on “Set authentication cookie” button. Now let’s see each section of the Query Monitor plugin in detail.

Overview

The first tab provides you an overview of your website. It shows you page generation time, peak memory usage, database query time, and database queries.

overview
overview

Database Queries

Whenever a user requests for any information or tries to submit the information, a database query is triggered. Query Monitor tracks this query and displays it inside the logs so that you as a user can see which queries were executed successfully and which were not. And could also filter by the type and component of the query.

queries
queries

Request

Request feature shows the query variable for the current user and highlights the custom query. It also shows the associated query strings present inside a request.

request
request

Admin Screen

This section shows the activities happening on the WordPress admin panel. It lists down the components that are being accessed from the admin panel and shows an error due to the unavailability of any PHP file.

admin screen
admin screen

Scripts

When you visit the Scripts tab inside the Query Monitor, it lists down all the queued scripts and styles enclosed within the request. It also highlights any broken or unresponsive script due to an external dependency.

scripts
scripts

Styles

It is quite possible that at times due to an external dependency a certain CSS file does not load and breaks the layout of your web page. This section deals with the CSS Style sheets and helps you identify the source files behind any query.

styles
styles

Hooks and Actions

Hooks and actions play an important part in any WordPress site as they allow you to create a custom functionality using the predefined controls provided by WordPress itself. Doing so, can sometimes break your website and troubleshooting the error could be a tiring job.

Thanks to Query Monitor which has a built-in tool to identify errors caused by hooks and actions. This allows you to filter actions and hooks by core, theme or plugin. And also give you the complete name and reference which can be found easily inside the code for debugging purposes.

hooks and actions
hooks and actions

Languages

In case of a multilingual website, Language tab identifies any broken or unavailable files and also displays the language settings.

languages
languages

HTTP API Calls

This tab shows all the server-side queries and also shows the response code, timeout log, and failed requests. It is a useful feature as it enables you to see the response in real-time and help you to debug the server-side code efficiently.

http api calls
http api calls

Transient Updates

WordPress is capable of caching the API response in its database as some APIs only allow a certain number of requests at a given time. Transient Updates shows these transients and also displays the size and the component.

transient updates
transient updates

Capability Checks

By default, this is inactive and can be activated by placing the code inside the wp-config.php file. Capability Checks performs capability checks for each user on the page and displays the parameters along with the result.

capability checks
capability checks

Environment

This is a complete overview of the WordPress environment and contains three sections for PHP, Database, and WordPress. Inside each section, useful information about the environment is displayed such as MySQL version, PHP memory limit, WordPress version, etc.

environment
environment

Conditionals

Shows all WordPress conditionals on the current request.

conditionals
conditionals

Wrapping up!

WordPress Query Monitor plugin focuses on debugging and provides all pertinent information in an easy-to-understand way. The plugin is ideal for quickly identifying the plugins, themes or functions that are affecting the website performance.

The plugin integrates a menu in the admin toolbar that shows a general description of the current page, with complete data displayed in a panel (once you select a menu item). Which of these components do you use most often to keep your site healthy? Any suggestions?

Scroll to Top