I am trying to debug a Twig template in my Drupal 9 site. I am using VSCode as my IDE and using Xdebug for debugging. I have setup/configured the installation based on the instructions outlined here -
https://www.drupal.org/docs/develop/development-tools/configuring-visual-studio-code
I am able to set breakpoints in PHP files (step thru and watch variables successfully) however I just can't seem to do the same for Twig template files (just so I can see what variables I have access to in that template). What I mean by when I say I am unable to add the breakpoint is that clicking on the gutters of a Twig file within VSCode does not result in addition of any breakpoint.
I'd like to take advantage of Xdebug instead of using debugging functions like breakpoint() and dump() offered by the Devel and Twig_xdebug modules within Drupal. I am pretty sure I am doing something wrong or have missed a step but I can't seem to figure out what it is.
Some more details on my env:
a local Drupal 9 setup on a Mac OS that uses PHP 7.4 and nginx as its webserver.
Xdebug (v3.1.1) is installed and enabled (verified via phpinfo() output)
VSCode (1.63.0) installed with all of the supporting Drupal and PHP extensions outlined in the above article (specifically php-debug) have been installed.
I am using the default launch configuration to Run my debug session in VSCode.
I'd appreciate any pointers on what I am doing wrong and/or what I can try. Also, I hope I provided enough info on my use case.
Twig compiles the template files into PHP files. You need to set breakpoints in these Twig generated PHP files in order to debug them.
On this page, I also see that there is caching involved, which you will need to disable. That documentation seems to be quite comprehensive.
Came here looking for an answer to this very question.
You may be interested to know that there are a couple of ways to achieve this. You can either use a built-in feature of the devel.module (see: https://www.drupal.org/node/2788089) or there is also a contrib module called twig_xdebug, which lives here: https://www.drupal.org/project/twig_xdebug
I think the mechanism behind both of these is probably very similar, to be honest. The latter of those links provides further links to several guides on the subject matter. HTH! :)
Related
I'm using Vaadin 14.4.4 with Gradle 6.3 and Spring Boot.
When I was creating a website in developer's mode everything was working well. Now I switched to productionMode = true and website doesn't load a single css file.
I'm trying to use one css file per class.
After switching back to developer's mode the CSS formatting is not working as it used to.
I tried vaadinClean, vaadinBuildFrontend and vaadinPrepareFrontend but that doesn't seem to fix my problem...
Do you guys have any suggestions does any of you interfered with the same problem as I ?
From the docs of the gradle plugin for
Vaadin:
./gradlew clean build -Pvaadin.productionMode - will compile Vaadin
in production mode, then packages everything into the war/jar archive.
Automatically calls the vaadinPrepareFrontend and
vaadinBuildFrontend tasks.
Note the explicit passing of -Pvaadin.productionMode. It might seem
a bit counter intuitive to have to pass that explicitly to a task like
vaadinBuildFrontend, which sole purpose usually is to build the
production stage.
We are running static analysis tests on two points:
On Git pre-commit hook, and in that case we are using phpcs, phpmd, stylelint and eslint engines (vanilla installations + Drupal Coder for Drupal standards addition)
Once in a week we are updating our project's dashboard on SonarQube, which runs the following quality profiles: Drupal (PHP), JS and SCSS
We want to align our standards to a single standard, but using different engines makes it much harder (or even impossible?).
I can think of some possible ways to achieve that:
Manually align the rules on both pre-commit and SonarQube
Use SonarQube for our pre-commit tests
I'm not sure about that, since by looking at the Drupal standards at SonarQube, it seems like there are much less rules there than on the Drupal PHPCS standards (from Drupal Coder) - relevant question I found about it
(also another relevant question about aligning SonarQube's PHP plugin with phpCS)
Create a custom plugin for SonarQube with our engines set (no way..)
The ideal solution in my way of thinking is to have SonarQube read the rules files (e.g. phpcs.dist.xml) in the Git repo just like most of the static analysis tools out there.
I also saw the SonarQube and stylelint Rule Mapping - which is the only mapping I found about those engines.
How can we overcome that issue in the simplest way?
You can use PHPStan in your CLI, the same way you probably use coding standard checks or PHPUnit tests:
vendor/bin/phpstan analyse src --level=0
Set this in your pre/post-commit hook and you are ready to go.
Read more in short post about first install of PHPStan
I'm working on a spring boot application and adding a small configuration web page using Mustache templates using this article as an example. I have it working fine when all of my mustache template files have the extension .html, but the problem is that I don't get any IDE support. IntelliJ IDEA has a plugin for mustache, but the extension has to be .mustache. When I change the file extensions, though, I end up with a 404 error.
I've seen in the official example that they are using .mustache, so I know it's possible. I couldn't find anything in that project to indicate that a setting was changed to enable this. The only major difference is that I am using Kotlin instead of Java, but I don't see why that would have any effect on the mustache file extensions.
What am I missing? Thanks!
According to Spring Boot documentation (for v1.5.6, for v2.0.0.M3) you can easily configure the extension of Mustache template files by setting the following property:
spring.mustache.suffix=.mustache # Suffix to apply to template names.
In v1.5.x the default was .html but in v2.0.0 they switched to .mustache. (release notes)
Also you can configure IntelliJ IDEA to handle *.html files with the Handlebars/Mustache plugin by registering *.html pattern in Settings > Editor > File types > Handlebars/Mustache.
This isn't an answer in place of ones already given. Really it should be a comment, but I can't upload a screenshot in a comment.
It's worth noting that (at least in my IDE), I had to install the mustache plugin (not noted in the kotlin spring tutorial I'm following), and once installed, there is not a context menu selection for a new mustache file type:
But, if you pick the generic File and name it whatever.mustache, the editor will apply the mustache language tool to it.
Seems very "yeah, duh", but it threw me for a bit b/c everything in intellij so far feels so specific, I thought the fact that I wasn't seeing it as an option meant I was missing something :| .
Nevermind. I just realized that it is a 2.0.0 branch of spring boot and the 1.5.x branch still has it as .html.
This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.
I'm trying to write a module that requires either module a or module b (not both, though having both is fine). It just dependent on a OR b. Is there a way to put this in the .info file or enforce this OR dependency programatically?
You can't natively in any current version of Drupal, there is a discussion here which talks about adding a enhances[] and enhancedby[] property for .info files (amongst a few other new properties), but it has not been put into core as far as I can tell.
If you're using Drupal 6 you might have a look at the Module Supports module which was created in response to that discussion.
If you're using Drupal 7 the discussion might get you half way there, and if not there are a few patches on that page that will at least show you roughly what you need to do to patch Drupal core yourself to do get it working.
The only way I've seen other modules implement this is by reporting problems after a module is installed and not including the modules as dependent. I would assume this would be similar to modules like ckeditor or jquery_ui which require non-drupal code to be put in place to operate properly.