Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{align:right}
{html}
<a href="https://twitter.com/share" class="twitter-share-button" data-via="phpstorm">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<span id="fb-root"></span>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false" style="position:relative;margin-left:-20px;top:-5px;"></span>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium"></g:plusone>
{html}
{align}

Include Page
Social Buttons PhpStorm
Social Buttons PhpStorm

 

Note
iconfalse

This tutorial gives an overview of debugging PHP and JavaScript code simultaneously from within PhpStorm. It covers setting up the Run/Debug Configuration to start the two debuggers at once so we can step into our PHP and JavaScript code at the same time.

Web applications typically consist of both PHP and JavaScript code. PHP code will run on the server side, JavaScript will run in the browser. With PhpStorm, we can easily debug the PHP code to inspect what is happening on the server, modify variables and so on. We can also debug the JavaScript running in the browser by starting a JavaScript debugging session from our IDE. But what if we want to do both at the same time? The answer would be to start two debugging sessions at once. Let's see how we can do that!

Table of Contents

Prerequisites

The following prerequisites will have to be in place for debugging PHP and JavaScript applications:

...

The current version of PhpStorm does not support setting both PHP and JavaScript breakpoints in one file. For example, no JavaScript breakpoints can be set in the following code:

Code Block

<?php
// ...
?><!doctype html>
<html lang="en">
<head>
    <script>
        /* javascript code */
    </script>
</head>
<body>
</body>
</html>

To be able to debug the PHP and JavaScript code simultaneously, it's best to move the JavaScript code into a separate .js file and reference it from the HTML:

Code Block

<?php
// ...
?><!doctype html>
<html lang="en">
<head>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

We can then place PHP breakpoints in the .php file, and set JavaScript breakpoints in the .js file.

Wiki Markup
{align:right}
{html}
<a href="https://twitter.com/share" class="twitter-share-button" data-via="phpstorm">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<span id="fb-root"></span>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false" style="position:relative;margin-left:-20px;top:-5px;"></span>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium"></g:plusone>
{html}
{align}

Include Page
Social Buttons PhpStorm
Social Buttons PhpStorm