Versions Compared

Old Version 2

changes.mady.by.user Basara

Saved on

compared with

New Version Current

changes.mady.by.user Basara

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page can be accessed by going to System > Settings > SystemSystem → Settings → System

Table of Contents

Show Debug Info

Set this SHOW if you want to see the execution details and show debug details. Set this LOG if you want to write the execution details

  • SHOW: When enabled, displays execution and debug details directly on the web page. This can be helpful for troubleshooting but should be disabled in production environments to prevent sensitive information from being exposed.

  • LOG: When enabled, logs execution and debug details to the error log file. This is a more secure option for production environments.

Note

Note: Some web hosting providers may restrict the display of debug information due to security concerns. If you encounter issues, check your server's PHP configuration or contact your hosting provider for assistance.

Debug Level

Select

Choose the

depth

level of

the details

detail you

need

want to see in the debug output. Higher levels provide more in-depth information, but it's strongly recommended to never set the debug level higher than 2 on live websites to avoid exposing sensitive information.

Template debug

Enable Template

debug setting if you need to check

Debug to troubleshoot issues with

template in

your storefront

and

or control panel

. This will give you a links for storefront and admin with the debug parameter in the URL.Image Removed

templates. When enabled, a debug parameter will be added to your storefront and admin URLs, providing additional debugging information.

Image Added

Browser inspector

Almost all browsers have the Page or Code Inspector

Most modern web browsers have built-in developer tools that include a page inspector or code inspector. This tool allows you to examine the HTML and CSS code of a

page

webpage.


When you select some element on your page the Rules view lists show

Inspecting CSS Rules:

  1. Select an Element: Click on any element on the page you want to inspect.

  2. View CSS Rules: The inspector's "Rules" view will display all the CSS rules that

apply

  1. are applied to the selected element.

This can help you understand where CSS file located and what rule your need to edit. 
  • Read FireFox page inspector guide
    • Read 

    Understanding CSS Origins:

    The "Rules" view can help you:

    • Identify CSS Files: Determine which CSS files contain the rules affecting the element.

    • Locate Specific Rules: Find the exact CSS rules that are responsible for the element's styling.

    • Modify Styles: If necessary, you can edit the CSS rules directly in the inspector to make changes and see the immediate effects.

    By using your browser's inspector, you can gain valuable insights into the structure and styling of your website's pages.