Introduction

Magento Debugger is a Chrome extension, which allows you to debug Magento store in a siple and fast way.
This extension alows developers to view information of each block, to view database queries, informaion about models, also it allows to reset the administration password if you forget it, etc.

Chrome extension installation

  1. Go to Chrome WebStore and install Magento Debugger

Magento addon back-end installation

There is no need to install Magento modules to a customer's environment. You should only configure your local http server to use Magento Debugger. So, your customer's GIT (or other CVS) repository will be clean and you can debug the code easily.

  1. At the back-end side you can download and configure Magento Debuger by one of the following ways:
    1. After installation of chrome extension, click the "magento" tab at Chrome Deeloper Tools, and you can see the message with the downloading link to a current version.
    2. Get the archive using the link for downloading for the latest stable version.
    3. Use GIT repository to clone Magento Debugger
  2. Unpack files or clone from GIR repository into the directory you want.
  3. Make directory "config" at the Magento Debugger writable for the server.
  4. Configure your virtual host at the nginx, apache or any http server into the right way:
    Replace index.php file of your magento project with index.php file of the debugger at the virtual host configuration.
    For NGINX server next configuration can be added into the configuration file of a virtual host:
    location = /index.php {
        root           /path/to/magento/debugger/MagentoDebugger;
        fastcgi_pass   unix:/var/run/php-fpm.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /path/to/magento/debugger/MagentoDebugger/index.php;
        include        fastcgi_params;
    }

    For the apache server configuration, virtual host configuration will look like:
    <VirtualHost *:80>
        ...
    
        <Directory "/path/to/your/magento/debugger">
            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Require all granted
        </Directory>
        AliasMatch ^/index.php /path/to/your/magento/debugger/index.php
        
        ...
    </VirtualHost>
    Do't forget to reload your HTTP server

    At least if you will have some problems with configurations at the top variants, you can include following code to the index.php of your Magento at the beginig of the file:

    $includeMagentoDebugger = '/path/to/your/magento/debugger/index.php';
    if (!defined('MAGENTO_DEBUGGER_VERSION') && is_file($includeMagentoDebugger)){
        require_once($includeMagentoDebugger);
        return;
    }

  5. Please open your project by Chrome browser
  6. If your project was not configured by "Magento Debugger W3Site.org" you will be prompted to configure it.
  7. Please enter project's identification or use default
  8. Please enter the path to your project at the file-system.
  9. Click "Save", and here you go. If you've done everything well, than you can debug with "Magento Debugger W3Site.org"!

Magento Debugger update

Chrome extension updates automatically, however if the file permissions is unwritable at the back-end part, you might need to update it manually.

  1. The easiest way to update it manually is to run script at the "Magento Debugger" back-end part. Use command "php update.php version-number" at the terminal, for example "php update.php 0.1.1".
  2. But you can fix file permitions if necessary when Chrome extension will ask you to fix it by using command "php privileges.php" at the terminal. After that action Magento Debugger version will be fixeed automaticaly.

Using Magento Debugger

Magento Debugger is easy to use. Just load your project at the browser and click F-12 or open Chrome Developer Tools with the Menu - More Tools - Developer Tools.
You'll see "Magento" tab at the developer tool, all debug features are available for you here.

Debugging blocks

  1. For template blocks debugging, use tab "Blocks", and tick the checkbox "Blocks".
  2. After that reload the page.
  3. You will be able to see all information about loaded blocks in cooments of the HTML code. Those comments will contain information about template file, the name in the layout, the class name of the present block. Here you will be able to see temporary id of the block in order to understand where it starts and where it finishes.
Please see screenshots:

Mail

  1. To get all emails which were sent, tick the checkbox "Mail" at the "Mail" tab.
  2. After receiving an email, you will need to refresh the mail list.
  3. At the "Mail" tab, you'll see the trace of the functions stack and body of the letter by using buttons "trace" and "body".

Profiler

  1. To collect profiling information, you need to tick the checkbox "Profiler" at the "Profiler" tab.
  2. Here you will be able to see the list of profiling information per each page.

SQL

  1. To collect and view information about SQL queries, you need to open "SQL" tab.
  2. Here you can see three options for collecting sql queries:
    Disable - the collection of the queries will be stopped
    All - to collect all queries you can select this option
    By time - this feature allows you to collect queries with duration more than specified time frame
  3. Also "trace" feature is available, that option allows you to include information about functions backtrace of queries.
  4. To stop following of queries you can stop following queries in runtime, for copy a queries to buffer or carefully research