Tag Archive: debug

Debugging a Twig View

Just a quick note here to save future hunting.

Ever seen this crap error message?

An exception has been thrown during the rendering of a templat

It totally sucks, right? And then you try debugging with XDebug, only to find you can’t most of the time, since Twig uses eval().

Anyway, to save you looking, if you set a breakpoint where that message is thrown you can get to see your own Exception:


Look at line 401 (this may have changed in later versions):

} catch (Exception $e) {
    throw new Twig_Error_Runtime(sprintf('An exception has been thrown during the rendering of a template ("%s").', $e->getMessage()), -1, $this->getTemplateName(), $e);

You can now see your Exception!

Configuring this REALLY did my head in,but in reality there are only a few steps to hook up your puPHPet Vagrant box (however miss something and you’ll be left scratching your head)  so here’s the quick vibe:

First up create a file in your site root called debugrun.php or whatever:

require_once 'vendor/codeception/codeception/autoload.php';

use Symfony\Component\Console\Application;

$app = new Application('Codeception', Codeception\Codecept::VERSION);
$app->add(new Codeception\Command\Run('run'));


Then goto Edit configurations in the debug menu.

Screen Shot 2015-09-28 at 23.44.41
replacing ‘yoursite’ with a valid path of course. Ok that and then go into your preferences. Click on deployment and connect with SFTP using your ssh key  puphpet/files/dot/ssh/id_rsa :
Set the path mappings tab to /var/www/yoursite or whatever.

Screen Shot 2015-09-28 at 23.47.31

Goto Languages > PHP and add a remote interpreter:

Screen Shot 2015-09-28 at 23.50.33

Lastly go into Tools SSH Terminal and choose default remote interpreter. Now hit the debug button and codeception should launch! Dont ask me how to change the terminal colours!

This is insanely easy to set up. Run this, or stick it in your .bashrc. If you are running your server on a VM or remote server, change localhost to the IP of your dev box.

export XDEBUG_CONFIG=”idekey=PHPSTORM remote_host=localhost profiler_enable=1″

Now you can start listening for conections in your IDE.


If you haven’t used sourcemaps, now is the time!

With the advent of compiled CSS like LESS or SASS, or minified/uglified JS, it makes debugging awkward as you cant see the original lines of code that you wrote. Cue CTRL_F’ing to find that line to tweak! But not any more!

When you generate your LESS/SASS, if you tell it to compile a sourcemap too, it will create one! This allows your browser to report which line of the less or scss file the rule in question came from.

For the Less compiler command, you have several options:

--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline  puts the map (and any less files) into the output css file
--source-map-url=URL     the complete url and filename put in the less file

For Sass, you just add the option at the end of the command:

sass sass/screen.scss:stylesheets/screen.css --sourcemap

Now in Firefox, open your page, right click, and click Inspect Element (not the Firebug one, the default Firefox Inspector!)

In the CSS rules pane, right click, and make sure show original sources is checked.

Screen Shot 2015-05-18 at 16.57.27 (2)

To the right of the actual rule, you click the link which would usually take you to the CSS file for viewing, but now, it takes you to your Less/Sass file! You can now tweak rules and save them directly from the inspector!

Screen Shot 2015-05-18 at 17.01.11

In my new workplace, our SASS files are compiled by Gulp automatically. (In my last work I had lessc configured in PHPStorm). If your own files are automatically built, then you should also checkout Firefox addons for live reloading! The great thing about that is that the CSS files update without refreshing! Great if you have session info or other info that might need reinstantiating, you dont have to keep keying stuff in! Have fun!