devgeniem / dustpress-debugger Goto Github PK

WordPress plugin that provides handy ajaxified debugger tool for DustPress based themes.

License: GNU General Public License v3.0

PHP 20.04% JavaScript 74.66% HTML 1.46% SCSS 3.84%

dustpress-debugger's Introduction

DustPress Plugin: DustPress Debugger

DustPress Debugger is a WordPress plugin which displays the data loaded by your current DustPress model in a json viewer.

Contributors: devgeniem / Nomafin, villesiltala
Plugin url: https://github.com/devgeniem/dustpress-debugger
Tags: dustpress, wordpress, plugins, dustjs, dust.js
Requires at least: 4.2.0
Tested up to: 5.3.0
License: GPL-3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Installation

Composer

Install with composer by running:

$ composer require devgeniem/dustpress-debugger

OR add it into your composer.json:

{
  "require": {
    "devgeniem/dustpress-debugger": "*"
  }
}

Manually

Clone the DustPress Debugger repository into you WordPress plugins directory.

Activation

To enable the debugger go to the WordPress dashboard and activate the plugin. After activation users with with the manage_options capability can enable the debugger on the user profile page by checking the DustPress Debugger enabled checkbox.

You can also activate the debugger on any user by defining DUSTPRESS_DEBUGGER_ALWAYS_ON constant in your project. This will override the manual settings, so it is not recommended to use this setting in production!

Usage

Install the browser extension, open your devtools and select the "dustpress-debugger" tab. If on chrome you will need to request scripting & cookie access to the relevant urls when opening the view for the first time.

Building the browser extension

Select the specified node version in the .nvmrc file by installing nvm and running:

nvm install # install specified node version
nvm use # use specified node version

Or by installing it manually.

Then run the following commands:

npm ci # install npm packages
npm run build # build the extensions assets

For a firefox build which uses manifest version 2 you can run:

npm run build -- --env=target=firefox

The built assets will be in the dist/ folder.

Development version

You can build the development version of the extension by running the commands specified in the building section but instead of npm run build run the following:

npm run watch

Or for the firefox version:

npm run watch -- --env=target=firefox

This will build the assets and wait for changes to files. Then add the contents of the dist/ folder as a temporary or unpackaged plugin depending on which browser you are using.

Add data with JavaScript

You can manually add data into the debugger by using the extend function of the global debugger object in JavaScript. The first parameter is your data. The second parameter is the key under which your data is added. You can add multiple data sets under the same key.

window.DustPressDebugger.extend('someData', 'my-data-key');

If you are using the DustPress.js plugin, the data loaded via AJAX is automatically added into the debugger view.

dustpress-debugger's People

Contributors

Stargazers

Watchers

Forkers

onnimonni ivuorinen kseckinc godbone nomafin

dustpress-debugger's Issues

Create a custom capability for the Debugger

Currently the plugin uses "manage_options" capability to check whether the current user is allowed to enable the debugger for the front-end. If this was a custom role instead, it would prevent unwanted accesses if a developer would want to grant debugging for some role or user.

The debugger crashes on preview

Viewing the debugger is not currently possible while on a preview of a post. The JS code crashes with the following error:

dustpress-debugger.js?ver=1.3.1:60 Uncaught TypeError: Cannot set property 'Ajax' of undefined

It appears the debug data can not be loaded from the backend and the AJAX request gets an error response:

{"status": "error", "data": false}

Add composer.json

Add composer.json and so that we can add the package for packagist.org.

You can look at wp-sanitize-accented-uploads for example.

Shorten long string values

When there is a long string value in the data (for example a long piece of HTML or something similar), shorten it and make it expandable by a click.

Ajax debug data to debugger even though it's rendered

Change the ajax debugging so that it returns the debug data to the debugger even though the ajax call itself has been defined to return HTML with certain partial.

Create and update the JSON view only when needed

Currently, the JSON view is parsed and added to the DOM after the AJAX call fetching the data is complete. Because of this, the initial page load is a bit heavier. The view is also rerendered after each DustPress.js request. This hangs up the execution for DustPress.js callbacks until the rendering is done.

To fix this issue, rendering the JSON view could be executed only when the debugger is opened. Rerendering could occur only if the data has changed after previous closing event.