{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/2014/12/12/configure-phpstorm-to-debug-php-with-xdebug-and-chrome/",
    "result": {"data":{"site":{"siteMetadata":{"title":"K2V Academy"}},"markdownRemark":{"id":"fd62bcf8-22ec-5948-ac64-6bfe342e1980","fields":{"slug":"/2014/12/12/configure-phpstorm-to-debug-php-with-xdebug-and-chrome/","readingTime":{"text":"5 min read"}},"html":"<p>It’s been a while since I made a post. So back with another one. This time it’s PHP. Specifically PHP debugging. Boys and girls, today we are gonna configure PhpStorm which is one heck of an IDE for PHP development, to debug PHP code with Xdebug and Chrome. With these simple steps you can easily start debugging PHP code without headache.</p>\n<p>First open up the php.ini file and make sure you have enabled remote debugging and profiling for Xdebug. I’m using WAMP so you can get to the php.ini file using the WAMP icon on the system tray.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 446px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7d9402729dbd6069fcac7dae78009592/6244b/15.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 150.99999999999997%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAIAAACjcKk8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFW0lEQVQ4y4XU21MTZxQA8H3um/0DqjN9K3LPdXez990QBCNYHXRUEMtVqBgBq8FE8IKALReFioDcgyKCAok4gDCopFXAShJC0EQgGRMEEywkEBy0ExWLYOs3O9/b75zz7TlzAIbEaBIlCYTABQQuwDEYQyEMhVAERAR8AcyDIS4McUE+h8/j8LhsLofFYQeyWQGBAX7ATrGQxFGGwkgS+f8QEMjh87g8LuuTB5R5eyPEQgpHGRKjSJRaV8XnngvyuXwem8dlc9iBQG9WSNuFeLGIZEiUfo8/+A8h/ttzuBwWcDPJ72FeyPG47QSG0NTH5F/zHJDvSQ48rxWbLoc1Zu4T0cQn+VUP8tl8HhvoOx2sTCNLk8VbhCRFoOv9+vevFM8BqiOhkq0+B8MImsLXyBWPErgnBLbawzwI5AGXIlh5e5A9oQRFYl/EHoZCBA7jGIShICrgITAXBtkgnw1IqU3h/hu30QLqS5lJAg0WEeKtNE0RBI4SBIphCIoKEARGEBhgvv9WDHoLGZIkkHUSEzI8kiza+F2JeLs0TVZzWK7IyFeeKuvLVgwVtY0AhABcz1YwLgrisgJrN2xoalF1GwzGx491kxbbnNM9O7fg+NsJrO7tehwk5EJQ1cZN12+oevQ63eCjQc1fT15O2Rz2V1M2G7AG0BTG0PjKRwoZXlBQXXBId6Oqe9RoeqzVDw3rTOYXDqfLMe9aiwkMxhAQw+D3LYFQxI9makPp9ra6mzPDA9ZH/XbNoHNMu2x+Nm/QrcYYicE5+Rc7Ou+q2trv3buvVv+h7u85e0abSFWk5nbJFJZDFROHa2xHaq2JV14UNpmA1QXjGHSlsd04YX2qH3luMjlmZ98uzxeXWvYzNb+eaWhsUNfWqVtadc2tuuuto3c7NP9iksKEKFheWN7fPaC+c79P1afuVBuGhi9lD0buat8XnS/LVJy/oFR2aauVo9Xdlk6t4yOmSRSn8TCI05RXldcwKS83SUrNScWTiWUv5Em9B0RVMZJLFy/frr72oLlT3zVoa+yf6tW/Bihq5c0URiBgQ3ll7+2eG/XNigrFtZrGvs7O3JN/Ru7uyDnffLm662qL+mrbQEuP/tbDqQdjrz/72ySJhmwVbQlh4hMOqG63t7a23eloSpNq9sfdN09OWC2mp6MjBq1m3Djmdjrcztm1raIIhMPyT0uV2F/PDGrUznf20oKZ3ZByZMQ4ZjBoNCOj+lHNsHZi0mJ3rMNChoBATnqqZNo+PfTkkXXW3HBUL/umckRnHB83GceML1/OLCwsOJ0ut9vtGU/PhH64Sc94cTkBkpRk++y8zjA+Z5vRDrxSKTSaZzqdTntCKj2anp6VKZfLTshkGYBnUWACIYXQBELhnjUWzGBZJ6Vv3izNzc+PG+4uLsy9e39sNitNEX6+3gH+vn6+3r4+m4HkhL1pKTEZ6XHFBVlFv2UVF54pKcq8rihzu5dcLpdrbvrN4qLbtbj89q3ZbA4WCbmcQAjkebYnlw20NlXcbCqrry5Q3qq6daO8rjK/siy3vqp4aWnJ6VqwOhYtr5zTjvnl5eXJiQmGJgP8fTnsQFagf4C/L3BHdfVafcnvF06VFGbVXimQH08Si+DsU8ftjlmbbWrcbB0zmU2TlunpaY1Wi2Got7eXj4+3l9cPmzd7AaePRpWcO5ybEVOSI6m+KDsvj0+JDo2NoA5Fi5MjQ1Njw5OitsXvFiVFiX8+sH1PGPljMLxvR1BUxJZwIQhkxIfKD4rlieJzqbuyj0TIEsTHYoJT9hIJO+HYcJ4kkjl7LF4eHXosfkdabLg0cadkf0j2Lz/lSONSo0P+Adz6GdUdSznfAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Open php.ini from WAMP System Tray Icon\"\n        title=\"Open php.ini from WAMP System Tray Icon\"\n        src=\"/static/7d9402729dbd6069fcac7dae78009592/6244b/15.png\"\n        srcset=\"/static/7d9402729dbd6069fcac7dae78009592/772e8/15.png 200w,\n/static/7d9402729dbd6069fcac7dae78009592/e17e5/15.png 400w,\n/static/7d9402729dbd6069fcac7dae78009592/6244b/15.png 446w\"\n        sizes=\"(max-width: 446px) 100vw, 446px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Once you open the php.ini file navigate to the bottom of the file where usually the XDebug settings are located (or you can search for XDebug and get there.) and there make sure that the XDebug Extension is installed (As you can see in the image bellow, the path to the “zend_extension” leads to where the Xdebug extension is installed.) and xdebug.remote_enable and xdebug.profiler_enable settings are as seen in the image bellow. (that means they are enabled.)</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 758px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/394c17c55093a27a8bcede2e644fac80/c8e86/16.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 31.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAIAAABM9SnKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwUlEQVQY04XPy27CMBAFUP//B9E1z30WoMqxwZhFyWsetiMMShikSEW0qOrZXY1Gc0dRSG3bMjMRDcMg3+4TeXF/ozqORETMl5xDCIAIRAAQY2RmRCJEACDClFLq+xAjIjLzOI7qtFzXRZG07o25WHt1TpyTnN8PPuNzpD5nH2a5MPOFXa3cZl0VRb/d3kIQkXEif1M7bXSpDwe3d6405dH7c1VZa733zBxT+vX5j+Wvc103VddBB9A0TZ4KXyfynwfuP1bznNXmQwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"php.ini Xdebug Settings.\"\n        title=\"php.ini Xdebug Settings.\"\n        src=\"/static/394c17c55093a27a8bcede2e644fac80/c8e86/16.png\"\n        srcset=\"/static/394c17c55093a27a8bcede2e644fac80/772e8/16.png 200w,\n/static/394c17c55093a27a8bcede2e644fac80/e17e5/16.png 400w,\n/static/394c17c55093a27a8bcede2e644fac80/c8e86/16.png 758w\"\n        sizes=\"(max-width: 758px) 100vw, 758px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Then you need to install XDebug Helper google extension in your chrome browser. To do that, google “Xdebug Helper” and you will see a link to chrome store with the name Xdebug Helper, which is a chrome extension. Click on it you will be taken to the page. There on the top right corner you can see add to chrome button (blue color). Click on it. I’ve already added the extension to chrome so mine is green :D</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3682fe0b3307418698e80cdb005ef7a3/adc48/1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABo0lEQVQY02WMzWvaYADGc+s/sHVDKR1j58Euw1pb0a3sUhiCukvb0GuR9GK8dzftvbLzTtsYtPRDnZp1MBi0lF5Ka/3AJG/im9RobBaTmPi+7wg79sfDw4/n8FC6MbxuXcmSzPN8t9sVRQEhRB6AsT/eXHz+Xt485JhvJVpt/qEmrqOPhhBCTdP6g3tVM1zXm7iT6XSKMUYI/ReMMSHkb5+HwrkqXir8uTlQKcMwRrpuWzbB2DTHnucRQqyx5dg2IcRz3bFpEkIQQo7jTJF/ghDBLu7rBnXbbh/8qBxz9aNa7ahWPa5V9yuV/XK5xNVPOO6kXi/99Pv32ZmiqjzPi4IgAaBAKEGF+vT1y8yrl48ji4/CodnF8JNIOBAJB5cis6HXTxdCz+Kx52/ic9HlxNaWCECr2Ww0GgBIqqIIMqQOS+XVD+kUTSc31lP0RtoPnVxf28nnPxYKq+n0i5W3wXgskckAIHU6nbZPB/Z6ACrU6ekvhtlm2Vw2y2azLMvmGGZ7r1gcW7ZpWvnC7nx0KfBu5T3D9CCUZUmSZRGAgabJ6t0/YeE2ppq8yQEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Xdebug Helper in Chrome Store\"\n        title=\"Xdebug Helper in Chrome Store\"\n        src=\"/static/3682fe0b3307418698e80cdb005ef7a3/5a190/1.png\"\n        srcset=\"/static/3682fe0b3307418698e80cdb005ef7a3/772e8/1.png 200w,\n/static/3682fe0b3307418698e80cdb005ef7a3/e17e5/1.png 400w,\n/static/3682fe0b3307418698e80cdb005ef7a3/5a190/1.png 800w,\n/static/3682fe0b3307418698e80cdb005ef7a3/adc48/1.png 979w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Then you need to go to chrome settings and go to Extensions tab. There you can see the Xdebug helper extension installed and it should be enabled.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5c591cac090285939902f1d36edaf135/ad00e/2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 46%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA/klEQVQoz22QCWoDMQxF5/5H6wG6ECikBBKS2PGmsSVraWdpSpn5CIOwHl9fA9bKRKlAw2YbqSrO2n4x85Be3/R8+fi8XO8+pZQBEKn/iohaa0SkqjuwEJmImRaoMDaoHYknx830DryMXOPNhcdYGwuLCouwcBfpzI2oM+87r9m6QCw5pFqqEq2FaETW+1QbWERmZ7XT+8v9dKw3RyFwCByD5Ww5S4zoHDunOS8HfMKIOCwb1OvZ+0fyEaEqoSDq7Dn5967jaCk94SVCKWVY+ng4xOPXeHfNe3oEzclKsVIkJfSeY9TpqP8EAGvmTlTGBo0ABfvfbmom87vVD/wNJlYPvyPQqQsAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Installed Xdebug Helper in Chrome Extensions\"\n        title=\"Installed Xdebug Helper in Chrome Extensions\"\n        src=\"/static/5c591cac090285939902f1d36edaf135/5a190/2.png\"\n        srcset=\"/static/5c591cac090285939902f1d36edaf135/772e8/2.png 200w,\n/static/5c591cac090285939902f1d36edaf135/e17e5/2.png 400w,\n/static/5c591cac090285939902f1d36edaf135/5a190/2.png 800w,\n/static/5c591cac090285939902f1d36edaf135/c1b63/2.png 1200w,\n/static/5c591cac090285939902f1d36edaf135/ad00e/2.png 1366w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Click on the options link as shown in the image bellow. It will take you to a new page with options to configure the Xdebug helper for chrome.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 762px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b90f90cdcb016b900e7e16ee771c81d0/a016c/3.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 18.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAfklEQVQI14WPMQ7CMBRDc/+ZC3AKJJBYuAtQQVPySfPzE8dBVRmYiuXV9rML8jIzK6UC7J1k3xSAWitJAG5/2fnndLtfx2GYQ1BNZlmz5q/sN0lSRLz3aC3G6HJVmUvwIoeTHM/j413QAKC1xcAGhVvLkmoMwZL+o17G12skP7xq6Tz3fGELAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Xdebug Helper Options Link\"\n        title=\"Xdebug Helper Options Link\"\n        src=\"/static/b90f90cdcb016b900e7e16ee771c81d0/a016c/3.png\"\n        srcset=\"/static/b90f90cdcb016b900e7e16ee771c81d0/772e8/3.png 200w,\n/static/b90f90cdcb016b900e7e16ee771c81d0/e17e5/3.png 400w,\n/static/b90f90cdcb016b900e7e16ee771c81d0/a016c/3.png 762w\"\n        sizes=\"(max-width: 762px) 100vw, 762px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>In this page, in the IDE Key section select the PhpStorm option from the dropdown list and close the tab.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ace075b2ef864687ef72293b24ef08a9/8dd93/5.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 47%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA5ElEQVQoz42Q226DMBBE8/+f1X5A25RCJRqFKPZysXfWgYIxBNOnSJGaqszzHM1lp5QCwDeBQaydl7CMNVdvyct7tk/yRFsNvrMBdV3vtNYigpsEQlYfjwc6K2saARyk7S4lSHBnE3kMa1afefqVZhWVIgghDGEg1ptgYv1RvGZFUnVlXOO6rvMybYSdtupEheuca8X7YfSjnzzx/7VZxOnmnKeZGCzLEmOMS5yum5LZiaPy9PS8z5JDU5FtGjC71m09jJj6cZinefjuffAPNwMwxuyUUr8PQ28ug+PWXqfwFwzgB1vo83EiOndlAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Xdebug Helper Options Page, Select The IDE\"\n        title=\"Xdebug Helper Options Page, Select The IDE\"\n        src=\"/static/ace075b2ef864687ef72293b24ef08a9/5a190/5.png\"\n        srcset=\"/static/ace075b2ef864687ef72293b24ef08a9/772e8/5.png 200w,\n/static/ace075b2ef864687ef72293b24ef08a9/e17e5/5.png 400w,\n/static/ace075b2ef864687ef72293b24ef08a9/5a190/5.png 800w,\n/static/ace075b2ef864687ef72293b24ef08a9/c1b63/5.png 1200w,\n/static/ace075b2ef864687ef72293b24ef08a9/8dd93/5.png 1369w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Next we need to go to PhpStorm. :D Open up PhpStorm and create a new PHP project. Then navigate to File > Settings to get to the settings window.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/453d7f14edca5e50954facf99e01a9fb/f0811/6.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVQoz4WObU+CUBiG+f+/Q3k5B9ClHt6y1bKWAxGVsIPJQMF825wfmsiBbFmuQrNr14dnz3ZtN9VCgmcqA11+NmRXlwa6NDSUgaG5hooNFeuqa6iuofnWVdD50rfqnqXh2xrlONgfT0bhSzCe+KNIq19fVCUkqzlr0rdVpFRqMlI0CuN+4HthOEqS7TaOJYRYhoEQAMAd/Hkf5DhREKjG5d1Do+OYT8kmTrNMlmWO4wRB4H+T+0AIy+UyVZfuK9VW48aOXzfZUQwAKBQKNE2zLAshzMdO34nCYDabZG8ZIeQ4LhaL9B4AQD7u9mzXdaMoyrIsTdOTMUMzp+Net+t53mKxIIQcx39xmP3oYIyn02m6R1EUAIAoisJZeJ7/iNfrdUJIHMe73Y4QghD6XMidhWXZUqlEed4w8P35fL5arZbLpW3b7Xbb+g/TNJvN5jt7Ye1vmnRw7gAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Navigating to Settings page in PhpStorm\"\n        title=\"Navigating to Settings page in PhpStorm\"\n        src=\"/static/453d7f14edca5e50954facf99e01a9fb/5a190/6.png\"\n        srcset=\"/static/453d7f14edca5e50954facf99e01a9fb/772e8/6.png 200w,\n/static/453d7f14edca5e50954facf99e01a9fb/e17e5/6.png 400w,\n/static/453d7f14edca5e50954facf99e01a9fb/5a190/6.png 800w,\n/static/453d7f14edca5e50954facf99e01a9fb/c1b63/6.png 1200w,\n/static/453d7f14edca5e50954facf99e01a9fb/f0811/6.png 1367w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>On the settings window, in the Project Settings section navigate to PHP > Debug section where you have debug options for PHP, there as the bellow image shows change the Max. Simultaneous connections value to 20 and leave the default settings the same (as the image) and click ok.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/92f054e9d51cfd1b8408a7e8091e62d7/f0811/7.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwElEQVQoz23Q2Y4SQRQGYN7/QbwgisyFicFhgoOytdFhraK7a9+rV2jIcAG0gXFwEj35Uzk3X+rPaSwmfT5o6uBOjlti1DJBe9VrPn56Fzy0B50P3z+/n3Rb4/u/mdx/nDy0B3fNWa/TmAWDDK5zxCumDiap01IQ9RPwkFqicmYKqq95XYjKscyoKcfDx4Y3nOB4/3yo6/p8Ptd1bb2HYcwZEYxKyQRnglNOCWeEM2qNclYn3g6/fmlUZUJQlGXF6Xh8wd57CNdRGOEYRTDCCBNCpJTqOsYYa633btTvNna547PpJslOp/P5eKrrOvEeo5gyRiK0+vbDUHoRV/MyxtxwZnMcHqrNrbZL0gWIMMYRZhBCCIAQwjn3H7yvMjQHvc70KaCLX3I5QnxNQEQIxpRSgkkcY86FVvr2+Ru8zVIloyWqin2VV7tyn/oEAIAR0kpZZ6XxnDNGmdb6n9qbVAla7Xa32kVeLqECK7qGjGAjuOXcWfu2tvmDt4WnKC7L7eVgF1sXRam1szYxNtHaX3PFzpnL663zSZIO+90Gx1ARIEikObKSWEm0QLeY18UKhOOo05+D+TRcPYWr6Szo/wZqlkS5CTdCnAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"PhpStorm Settings Window\"\n        title=\"PhpStorm Settings Window\"\n        src=\"/static/92f054e9d51cfd1b8408a7e8091e62d7/5a190/7.png\"\n        srcset=\"/static/92f054e9d51cfd1b8408a7e8091e62d7/772e8/7.png 200w,\n/static/92f054e9d51cfd1b8408a7e8091e62d7/e17e5/7.png 400w,\n/static/92f054e9d51cfd1b8408a7e8091e62d7/5a190/7.png 800w,\n/static/92f054e9d51cfd1b8408a7e8091e62d7/c1b63/7.png 1200w,\n/static/92f054e9d51cfd1b8408a7e8091e62d7/f0811/7.png 1367w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Now open up a browser tab and navigate to the project you create in the local server. My project is named TestProject and you can see the URL in the bellow image. If you have installed the Xdebug Helper extension successfully you can now see a little gray bugs icon in the address bar near the top right corner.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d2b3bae5a2c1f97a0239e775d87d9d49/ad00e/8.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 17.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAASElEQVQI12N49erVk7uXnpzf/vLavlfXiUNX97w5uv7pjqUMv379+v3n79/////9JwH8+/7776evDHDu/3+kIDBg+E8eABsBAIU15LHRNu+kAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Disabled Xdebug Helper Extension\"\n        title=\"Disabled Xdebug Helper Extension\"\n        src=\"/static/d2b3bae5a2c1f97a0239e775d87d9d49/5a190/8.png\"\n        srcset=\"/static/d2b3bae5a2c1f97a0239e775d87d9d49/772e8/8.png 200w,\n/static/d2b3bae5a2c1f97a0239e775d87d9d49/e17e5/8.png 400w,\n/static/d2b3bae5a2c1f97a0239e775d87d9d49/5a190/8.png 800w,\n/static/d2b3bae5a2c1f97a0239e775d87d9d49/c1b63/8.png 1200w,\n/static/d2b3bae5a2c1f97a0239e775d87d9d49/ad00e/8.png 1366w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Click on this bug icon. Don’t worry it won’t bite you. :P :D You will see a menu drop down. Right now its disabled. You need to click on the Debug menu option. Once you did that you can see that the gray bug turn green. That means you are ready to debug using Xdebug Helper.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 495px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/eccb26edbcd687437aefcc4c27c708f3/a4d88/9.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 68.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA90lEQVQoz9WQzUrDQBSF87Ku9BFq7Yv4ALoRU/AHQcRCqW40tQ20ZJLOTO2EZJrEFOdOGzO3i4C4MTFLP87qnvttjkX63ebYXWIfe3bH7/e8yxPnovPSO3SODqx8HTZmk0X5R6w2KQ3nM/q2mjrBw93MdSy9+6rLttCFUZFUxAfK07kbsUUq08gPRCwtU0tpSkTMXp+uR6f3w7PH0Xk+fkZEYwwiWlhL9fRJ/cnwajK4dQc3wIKqaJYroCgWImbL1buIdmX5ff+TrAD4knLGQiG2WreTtdacM58Q4hEAaCcDQJZlSZJIuVZKtZOr5X9O2EL+jX8q7wE3ix65hc1nowAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enabling Xdebug Helper in the Browser\"\n        title=\"Enabling Xdebug Helper in the Browser\"\n        src=\"/static/eccb26edbcd687437aefcc4c27c708f3/a4d88/9.png\"\n        srcset=\"/static/eccb26edbcd687437aefcc4c27c708f3/772e8/9.png 200w,\n/static/eccb26edbcd687437aefcc4c27c708f3/e17e5/9.png 400w,\n/static/eccb26edbcd687437aefcc4c27c708f3/a4d88/9.png 495w\"\n        sizes=\"(max-width: 495px) 100vw, 495px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Ok. We are close to finishing this. Just a few more steps. :D Go to your PhpStorm IDE, in the top right corner of the IDE you can see an icon that is kinda like a telephone with no signal :D Look closely in the bellow image.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b215d3be442bb424c92b102d873f0376/f0811/10.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDElEQVQoz8XOWUvDQBQF4Pz/H+KrIMUm1CdBlKS0RagmsUltlskynazNrMlMiUVwA6UvHr6H83K4V3u8vVzfXdn3k81cd83pxpo+P1w7lmGbum3qjmW4Yzde5sbr6uZku5x5y9nT5EIzrcVitd5FYBeCIErCOE8yBFIIMhinME7yKMnjNB8LyEZJHoI0jLOt42owz5q65owJIQTnVX2ACO+rrmi7EpMaM8wk4eozSblqCdUopUopKaVSahgGjOuyLaoGNs2+Yw0TmPfkO9ZjQg8a5/zDuGeUKCXfDW/6HwlBv4yH0yN/iRDiH8eMsfPGnHONEHL+Zd/zfN+LorgsS4QQhLD4LQghAEAQBEdxC3SWtLCkWQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Listen to Xdebug Connections\"\n        title=\"Listen to Xdebug Connections\"\n        src=\"/static/b215d3be442bb424c92b102d873f0376/5a190/10.png\"\n        srcset=\"/static/b215d3be442bb424c92b102d873f0376/772e8/10.png 200w,\n/static/b215d3be442bb424c92b102d873f0376/e17e5/10.png 400w,\n/static/b215d3be442bb424c92b102d873f0376/5a190/10.png 800w,\n/static/b215d3be442bb424c92b102d873f0376/c1b63/10.png 1200w,\n/static/b215d3be442bb424c92b102d873f0376/f0811/10.png 1367w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Once you hover over it a tooltip will pop out saying  “Start Listening for PHP Debug Connection”.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 363px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/28901183a7b58c15633eb7cae6240a8f/4e786/11.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 42%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsTAAALEwEAmpwYAAABH0lEQVQY033QW0/CMBwF8H7/z+Cbj6KJERnOmBiF0ZGY0V1Kx3CXbr3QSsIQJKABM66JiZz80pz/eSzQpyil1O79E62V1loIQSmNksQJAsu2IYSAnSKEUFyMxIGUSkolhDosSnA58rFGSIShkBKIbTgfMUbS5KXIYZq2aWbltJPErfj9NUvbrLBzamUFZOQpq11YN1fFfWNICMirUEpZmvZIvx4NTEKMPm5EkVn1vhH49ZA046EZDh/jt+uBcWl0WtRoRp4HHKe310Ou6yN05LmuXy3V6G35yHHx7d2gVkPmg40CwDk7Yqz4BzsVzmX1cxzaNijLz/MmW2U5253Tcv4xGUPc6tpdsFhtzvtarmeLn31frZffm/F8+oxNHOBfzgWlSuvT2mwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enabling Listing to Xdebug Connections\"\n        title=\"Enabling Listing to Xdebug Connections\"\n        src=\"/static/28901183a7b58c15633eb7cae6240a8f/4e786/11.png\"\n        srcset=\"/static/28901183a7b58c15633eb7cae6240a8f/772e8/11.png 200w,\n/static/28901183a7b58c15633eb7cae6240a8f/4e786/11.png 363w\"\n        sizes=\"(max-width: 363px) 100vw, 363px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>That’s right we need to listen to debug connections coming from Chrome with the help of Xdebug Helper. Click on this icon and it will turn in to a telephone that gets signal, makes sense right :D (Green icon, look in the image below).</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 345px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/51542c2d209e8cb9d9f73316ff5a7887/e4d6b/12.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABH0lEQVQoz6WL207CQBRF51vVB599MMaY8D0aYkIg5ROslF4gKUNpZ6a0nRmKQKj0RovWUBIjDw5eTtY5OXsnC6B24yfgTgM+3pnNW+X+Rr++6F+ea1dngOKRAEYgJfU9/O44tAYzoxc4JkUjQHkoYOrTqU9dL/Dq67u+25VIux0YQ8engDP2HTPOJ5Y1hiOEHIKRg5FvWY7Ugt0Ol2UbI6CdGlVVdd3QDzsYmJIEm02tp2gmBPjUEHIUkecRxqA1eVb6IIpexazX0VGz3q+DbflJBnFaionifJMUh3+TFNu8sl/slvqgKwbIy0pMku/S4v1rk23L+TwkhICsqMTE2S7dvn3GtKiyvFwtV5zzX8tZLS+WC8bYH+XlXub/kj8AwvS7xCoqQZMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enabling Listing to Xdebug Connections\"\n        title=\"Enabling Listing to Xdebug Connections\"\n        src=\"/static/51542c2d209e8cb9d9f73316ff5a7887/e4d6b/12.png\"\n        srcset=\"/static/51542c2d209e8cb9d9f73316ff5a7887/772e8/12.png 200w,\n/static/51542c2d209e8cb9d9f73316ff5a7887/e4d6b/12.png 345w\"\n        sizes=\"(max-width: 345px) 100vw, 345px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Go to PhpStorm and set a break point somewhere in your code. Now don’t tell me you don’t know what a breakpoint is :P Now go to your browser and refresh your project. And BAM, in the PhpStorm IDE you will get a dialog box similar to the one in the image bellow with the title “Incoming Connections from Xdebug”. That means we are successfully listening to Xdebug .</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/95fde1c5539512a21eaa276d0c5e647f/f0811/13.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABaUlEQVQoz5WOzXKbMBRGef9H6nSSZeqkbpvEODUSCP0gwICEicFCQtwOSTP1xMmiZ85Ci3tGX7ANQxShGMeU0jRNU0oxxnGSxC8khCSE4DgmhGQyW5CZyATnHCEUrFbf1uufbyFljOcyz4QQnAnOOGecUcG44IIztsg5Y4xRSlISVPt913XW2mmanLNtpZTUebRJf31N76/o/RVZfykfbm1nRt2P7V9tOxzVITDGAMA8zwDgve/79vCsRbLZbh4x+h0+PiQYSfo0eWPd8GY/2v5kjoG19iyejBkAQO/503YbRVG022GESxHDgj/XufFd7F+HlIW8vqU3Yf0DHVa7A6X85QbOcc59HD/r0tjJeZgArIe2LuCCT+NO5cMw2NE0edMp3VbiP+KjLsosVRm5uf4e3t3pgsDFbmttcDoNlzHADLNfXIbP8BHLz5ngRVFUVaW1bpqmrmu1oF9RqlVKq+Xxj6ZppJSMsT97s2uovoxyfgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Getting connections form Chrome\"\n        title=\"Getting connections form Chrome\"\n        src=\"/static/95fde1c5539512a21eaa276d0c5e647f/5a190/13.png\"\n        srcset=\"/static/95fde1c5539512a21eaa276d0c5e647f/772e8/13.png 200w,\n/static/95fde1c5539512a21eaa276d0c5e647f/e17e5/13.png 400w,\n/static/95fde1c5539512a21eaa276d0c5e647f/5a190/13.png 800w,\n/static/95fde1c5539512a21eaa276d0c5e647f/c1b63/13.png 1200w,\n/static/95fde1c5539512a21eaa276d0c5e647f/f0811/13.png 1367w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Click on the accept button. Immediately you will see that the IDE stops at the break point. And if you check the browser it has stopped. Look in the bellow image. Your IDE should look like that.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/cd8375a6d918181617aab30f3548b252/f0811/14.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 53.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABhklEQVQoz42QeWvbQBDF9/t/mLQhlJY29CCltuP0gkqxpb0vKZLsOtbh1Wp3VaRAITSFDD+GN8O8P+aBOIrSBCKEGGOUUsoYQhATjDBEGBKCCcEIIcqozrTOlM600kpKkcIUrJbLb1+/zz7KGWWUc6YZlYwqRiQlkk5aUiII5jMCI44hg4iAsijq49FaOzgfmvt0Sd6f6dUr/eUiW70urt+Uny/Kq5fl1fkjPr2o1pcaGHMaxzGEMI6j974+ttW++72vD/umbnrT+a59grbxTd2D3vRjmMwhBOecMWZ8Xg3WAjsMf2cfgnXuuWbngN5AhXnBswqLKsF5gnOqCp4VPH9M9rCs5F0p8lLkGWIgffvux89os0XJYr1dXsP1ehPHiksttRZq6g/MWgmVJCnFVAjJtwnYfFwsfhWL292HGwVZcTrem773c37/lvO+7tqTMWaw3eEA7piY0h588MH2dn7dP00Izlo/DKOfcvFtC8RtjOOIxnFByU6InZT7/zMdzGiEeBT9AXXyXl2PmcLtAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Debugging Php using PhpStorm Debugging tools\"\n        title=\"Debugging Php using PhpStorm Debugging tools\"\n        src=\"/static/cd8375a6d918181617aab30f3548b252/5a190/14.png\"\n        srcset=\"/static/cd8375a6d918181617aab30f3548b252/772e8/14.png 200w,\n/static/cd8375a6d918181617aab30f3548b252/e17e5/14.png 400w,\n/static/cd8375a6d918181617aab30f3548b252/5a190/14.png 800w,\n/static/cd8375a6d918181617aab30f3548b252/c1b63/14.png 1200w,\n/static/cd8375a6d918181617aab30f3548b252/f0811/14.png 1367w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>You breakpoint is highlighted in blue. That means the program execution is now stopped at that point. You can see you have additional panels opened up. This is the Debug panel where you have the option to step through the code using the buttons given, Stop debugging, and continue program execution (No. 2). Also you have variables view where you can view the contents of the variables in your code. Also to the left you can see a Watch panel where you can add variables to watch.</p>\n<p>So there you go folks. That’s it. You are now debugging PHP code. It’s easy and saves you tons of time.</p>","frontmatter":{"title":"Configure PhpStorm to debug PHP with Xdebug and Chrome","date":"December 12, 2014","originalDate":"2014-12-12","categories":["Debugging","Development","IDE","PHP"],"author":{"id":"kasun-kodagoda","name":"Kasun Kodagoda","description":"Kasun Kodagoda is a Senior Technical Lead at 99X working on the Microsoft stack. He is an Azure Cloud and Azure DevOps enthusiasts and contributes to few Open Source projects on GitHub, mainly focusing on Azure Pipelines Extensions. OWASP ZAP Scan, Slack Notification task are some of his popular Azure DevOps extension. Kasun is also a blogger, occasional gamer and creates YouTube videos on Azure, Azure DevOps and Gaming and loves creating Architectural and Interior Design visualizations when he finds time.","profile":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEtUlEQVQ4ywXB+U9aBwAA4PdfbGmypNlhllarVao4kPt+8OA9eJxKRQWlggeoqEWEYvFCi3hwC4hCRaqAnUhhgthj2mt2R5y1y5ol+3F/w74PCG6FQsmNxMZyKRPOl46KJ8+Lx+V8pXJcLp3mkhc/rh/veAsR7242Hk6uj42OGA0GywPLesIXjK4Ang2/wzkbcowXoq78UfGgVH5WPnpaONwOBTJBZyHuW3I5Q4/DqVxiPe4bHzcNGQyj98fWYh5/1A3MLy8OGgybQWtsy3vwUyFXOg5vRmVyWX0Dpr7uFggyZ+bntvcf7+xvxp9EbXZLn14/OzuZSvu8oUeAfcYeWrMU912BsDdXyEViESqFePPb6wwcho3H1FZ93dTU5A2tpNLRnb2Iw2HR9nQvzo4WD1a9vllAPzC8Hbb+eboaDC4d5jPaHhVCbtx19JeDzrJvLmnTkxtva3WaTDa6kwrOTlu03erxMeN6YD7ofQj09A64F0f+u1g+PfLkniZkQlZoWH6+MXe2FXgRC5Rd5iERGYI42WwsmfRPTIxo1F0262gk6Ays2gHz2JCqq6uSsXx6tXBaio3qZMF+wTv/5G/J0NtNz7O5IXs7GyI1et3WzY0F42BvX2+3Z8Wx5p5yL0wAq677MkVbZ0ere85Qzoft/RK3lrWkhVe1yGIHT0a+0ycgjMo49wfU2eSU1aw3Dmj24vadiDkVMQMnadPiuHp15t6LffP7sts3LnVpGP0i6nQnsmVS+Uf78/Mji1qJAoWPn+j8j/qMetWvh4O/PNW9TWuARb10y9T2IqZ9nbx3njGVwqY9i+I8aDtaGC4/Gn48oYubOqc1YOddZGFSnvKpWxXyQlRzluyqxNqBuBVJ2KX5tbbfE5JXGz2VbadLB7nVPIeKNyKkm+T8YSG1D23x2aTloDi9JDRqJAcrknJAWPTwgUJmJZtc2016DtPLB6mVnyt7LltvNxMz1Q46NQpbO6rjk2nYGw+MaDrmeF0OnVWS56fJdy8TZydx4NNfHz5evb+8PLu6evP58/uT5/vdahm9/jsFuU5MwTKbbpPu1Ehl8i+vfYUjUFVqzfScI74deXlavLh8A/xzWfr3qvz3RSmXjU7ZhllsVnV1dZsMNQ324hobrl/7YmrGpR+2VddibtbU1dzC4Il0AonK4nCVSjlQ8Cq9k2J9J8yik4kkGvYHMpFEhQTiPz5+jm/vEihM30ZK0dnXTGSR6Fw8kcYEkRYSA0/m1NY3A6pWGI/HUagUHk/A5YvpTIgFwi1ESmIns+aP3mpoHrFMowo1kcajMiAChcMARRQ6F0/h3m5oBoRCAZ8PIyIJIpKDEMriCPjCNhKVY7Y+fPvhgsbkovIOGL3LBEUMECHSuCxITAeFd3C02gYswGAwIVjKFUggYSuMtvH4Ii6soLERdY9+b/+QQGE1YEkMjkggUrIhKZ7MYfFlBBr3Zl0TBtsC0GgMJgdhgiIuLBOKlQiq5PClTJ4EQVvd3hBP2Eqm80FYAYmUNA6KI7IZXDEGS6q6UYfFUwE2KCBS2EQqF4KlMKqEJR2gQM6GpBxIbDJPQWg7hSngIq0svpzCQnBEdhOOVvV9zTdV1Y0/kP8Hsucu/18URfsAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/b06d893ba176e32c97ea1f1a58bfff43/b5a32/kasun-kodagoda.png","srcSet":"/static/b06d893ba176e32c97ea1f1a58bfff43/ca121/kasun-kodagoda.png 20w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/b5941/kasun-kodagoda.png 39w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/b5a32/kasun-kodagoda.png 78w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/d8a72/kasun-kodagoda.png 156w","sizes":"(min-width: 78px) 78px, 100vw"},"sources":[{"srcSet":"/static/b06d893ba176e32c97ea1f1a58bfff43/264f2/kasun-kodagoda.webp 20w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/72e27/kasun-kodagoda.webp 39w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/7a63e/kasun-kodagoda.webp 78w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/d1e3d/kasun-kodagoda.webp 156w","type":"image/webp","sizes":"(min-width: 78px) 78px, 100vw"}]},"width":78,"height":78}}},"socials":{"facebook":"https://www.facebook.com/kasun.kodagoda","github":"https://github.com/kasunkv","twitter":"https://twitter.com/kasun_kodagoda","linkedin":"https://www.linkedin.com/in/kasunkodagoda","website":"https://kasunkodagoda.com"}},"description":"Learn how to Configure PhpStorm to debug PHP with Xdebug and Chrome","tags":["Debugging","PHP","PhpStorm","XDebug"],"image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAQP/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGupqZbOAf/xAAdEAABAgcAAAAAAAAAAAAAAAACAAMBBBESMTIz/9oACAEBAAEFArk47EHKoczPIdf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAEAAAcAAAAAAAAAAAAAAAAAAQIQIUFxgf/aAAgBAQAGPwJbNJ9uoP/EABsQAQADAAMBAAAAAAAAAAAAAAEAETEhQWGh/9oACAEBAAE/IdlYwVUugjCxcx9HCaPifNP/2gAMAwEAAgADAAAAEEsv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EIx//8QAHRABAAIDAAMBAAAAAAAAAAAAAQARITFBYXGBsf/aAAgBAQABPxDg3oTMYmmjac78e5X0BTVxuY2wcCjUSAw7PjG7+fyf/9k="},"images":{"fallback":{"src":"/static/fde885beffd3375fbf58133af7c234d2/333cc/featured.jpg","srcSet":"/static/fde885beffd3375fbf58133af7c234d2/fd1a3/featured.jpg 300w,\n/static/fde885beffd3375fbf58133af7c234d2/c5f00/featured.jpg 600w,\n/static/fde885beffd3375fbf58133af7c234d2/333cc/featured.jpg 1200w","sizes":"(min-width: 1200px) 1200px, 100vw"},"sources":[{"srcSet":"/static/fde885beffd3375fbf58133af7c234d2/7987b/featured.webp 300w,\n/static/fde885beffd3375fbf58133af7c234d2/8a009/featured.webp 600w,\n/static/fde885beffd3375fbf58133af7c234d2/c06d5/featured.webp 1200w","type":"image/webp","sizes":"(min-width: 1200px) 1200px, 100vw"}]},"width":1200,"height":576},"resize":{"src":"/static/fde885beffd3375fbf58133af7c234d2/47498/featured.jpg","height":576,"width":1200}}}}},"previous":{"fields":{"slug":"/2014/07/24/create-a-fade-animation-using-blend/"},"frontmatter":{"title":"Create a Fade Animation using Blend","date":"July 24, 2014","image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAACY0lEQVQozwXBWU/aAAAA4P4QHYdVkyUzLupcXMRBcBzFgQeiDoaIbjIEJFSL3C0UCqW03JWjgB0wEWTLDHEmWzIf9rL9qH0fwBGeLzTyvei7xGH8woEG3DkqXitSfJG4YrB7nv434u6ucq0sNqil/o5av2+r35qZUafYLqeATtLRJhwYfOSwWZwnR5Ggh05Fq2yB5y75au6hW/wzLA/rZJOJ9KvJX73S4/CyW463CzibDgOVgHlNsaI3bDrtVu+ZMxJEYqg3n8HrLNNusv0ON+pVB3WKZ0IPHea+nRvUUq1ctJ4JMTEE8JhUU5Oimdln23rtuccR9J/FUC+VDNMkVsomG5Xsdbtxe92669V+3rCPg9KwRrSyYT6P5uMXAGKBVCvz01MiMSiWySRWy17A60pEfTjmT8UDRSZZLtA8V+p1ua837R99bsiRfC7SpEMUCgPufe3hjnpT/Xr55axQLASnQJ1WHfS5yUSYSkYzJF7IEo1KvlXLf26yg+urfrfBZrBK8pzwnwA6pUQPSY3rcp1SopEvSZeejwnGFxbnT+xHGTJOp/FUIkST0VIunaXibD5tNhvX1DIGdflcB4BtW/5hW2HVK816Vcy5k3DtvF1dmgBFY4In8lXZBeIm8CAahBPRgNv1ae7FnFA4vquTo/Ch+9gIGHWyLY1sA5Lurb+hz0yEe89h1HzchUxa2cxTEJwGDYatU6dtYx0SgxOL889OrVuI3eh3vkfsJgBafaVVLOuUkk1I6jnQOUyaA4PqdF9bx45pxKyWLojEAnB6UigSKKSLOGxhQjb4ePfc/s5m3vgPexcPP+0i8BsAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/25071a4e5adf779a3b86f72003b5ea17/36104/featured.png","srcSet":"/static/25071a4e5adf779a3b86f72003b5ea17/1b554/featured.png 150w,\n/static/25071a4e5adf779a3b86f72003b5ea17/58ba5/featured.png 300w,\n/static/25071a4e5adf779a3b86f72003b5ea17/36104/featured.png 600w,\n/static/25071a4e5adf779a3b86f72003b5ea17/c2ba3/featured.png 1200w","sizes":"(min-width: 600px) 600px, 100vw"},"sources":[{"srcSet":"/static/25071a4e5adf779a3b86f72003b5ea17/78240/featured.webp 150w,\n/static/25071a4e5adf779a3b86f72003b5ea17/7987b/featured.webp 300w,\n/static/25071a4e5adf779a3b86f72003b5ea17/8a009/featured.webp 600w,\n/static/25071a4e5adf779a3b86f72003b5ea17/c06d5/featured.webp 1200w","type":"image/webp","sizes":"(min-width: 600px) 600px, 100vw"}]},"width":600,"height":288}}}}},"next":{"fields":{"slug":"/2014/12/13/fix-this-computer-does-not-support-intel-virtualization-technology-vt-x-haxm-cannot-be-installed-error-when-installing-haxm-for-android-emulator/"},"frontmatter":{"title":"Fix “This computer does not support Intel Virtualization Technology (VT-x). HAXM cannot be installed” error when installing HAXM for Android Emulator.","date":"December 13, 2014","image":null}},"sidebarData":{"tags":[{"tag":".Net Core","totalCount":13},{"tag":"ARM","totalCount":2},{"tag":"ASP.Net Core","totalCount":17},{"tag":"AVD","totalCount":2},{"tag":"Active Directory","totalCount":7},{"tag":"Android","totalCount":2},{"tag":"Android Emulator","totalCount":1},{"tag":"Angular.JS","totalCount":3},{"tag":"Animation","totalCount":3},{"tag":"Api Management","totalCount":1},{"tag":"App Configuration","totalCount":14},{"tag":"App Service","totalCount":9},{"tag":"Application Insights","totalCount":1},{"tag":"Aurelia","totalCount":7},{"tag":"Automation","totalCount":1},{"tag":"AzSK","totalCount":3},{"tag":"Azure","totalCount":48},{"tag":"Azure Automation","totalCount":1},{"tag":"Azure CLI","totalCount":2},{"tag":"Azure DevOps","totalCount":16},{"tag":"Azure DevOps Extensions","totalCount":2},{"tag":"Azure Functions","totalCount":8},{"tag":"Azure Pipelines","totalCount":2},{"tag":"Azure Policy","totalCount":1},{"tag":"Azure Resource Manager","totalCount":4},{"tag":"Azure Resource Providers","totalCount":1},{"tag":"Azure Security","totalCount":2},{"tag":"Azure Subscription","totalCount":1},{"tag":"Branching Strategy","totalCount":2},{"tag":"Build Tasks","totalCount":1},{"tag":"C#","totalCount":9},{"tag":"CMS","totalCount":1},{"tag":"Certificates","totalCount":1},{"tag":"Chrome","totalCount":1},{"tag":"Cloud","totalCount":24},{"tag":"Cloud Patterns","totalCount":1},{"tag":"Cloud Security","totalCount":2},{"tag":"Code Quality","totalCount":2},{"tag":"Compliance","totalCount":1},{"tag":"Configuration Management","totalCount":2},{"tag":"Continuous Delivery","totalCount":3},{"tag":"Continuous Deployment","totalCount":1},{"tag":"Continuous Integration","totalCount":2},{"tag":"Counter Expressions","totalCount":1},{"tag":"Custom Controls","totalCount":3},{"tag":"Custom Extensions","totalCount":1},{"tag":"DNS","totalCount":1},{"tag":"Debugging","totalCount":1},{"tag":"Dependency Injection","totalCount":4},{"tag":"DevOps","totalCount":23},{"tag":"Development","totalCount":33},{"tag":"Documentation","totalCount":1},{"tag":"Dynamic Refresh","totalCount":1},{"tag":"Emulator","totalCount":3},{"tag":"End-to-End Testing","totalCount":1},{"tag":"Error Tracking","totalCount":1},{"tag":"Extensions","totalCount":2},{"tag":"Feature Flags","totalCount":7},{"tag":"Feature Management","totalCount":13},{"tag":"Federated Identity","totalCount":1},{"tag":"FireFox OS","totalCount":1},{"tag":"Git","totalCount":4},{"tag":"GitFlow","totalCount":2},{"tag":"GitHub","totalCount":3},{"tag":"Google","totalCount":1},{"tag":"Google Maps","totalCount":2},{"tag":"Governance","totalCount":1},{"tag":"HAXM","totalCount":2},{"tag":"Hypervisor","totalCount":1},{"tag":"IaaS","totalCount":1},{"tag":"Implicit Typing","totalCount":1},{"tag":"JSON Templates","totalCount":1},{"tag":"JavaScript","totalCount":11},{"tag":"Joomla","totalCount":1},{"tag":"Key Rotation","totalCount":1},{"tag":"Key Vault","totalCount":8},{"tag":"Late Binding","totalCount":1},{"tag":"Localization","totalCount":1},{"tag":"Managed Identity","totalCount":8},{"tag":"Marketing","totalCount":1},{"tag":"Microsoft","totalCount":16},{"tag":"Monitoring","totalCount":1},{"tag":"NPM","totalCount":1},{"tag":"Networking","totalCount":1},{"tag":"NuGet","totalCount":1},{"tag":"OWASP","totalCount":4},{"tag":"OWASP ZAP","totalCount":4},{"tag":"Offline Cache","totalCount":2},{"tag":"Online Presence","totalCount":1},{"tag":"OpenSSL","totalCount":1},{"tag":"OpenSource","totalCount":1},{"tag":"PHP","totalCount":1},{"tag":"PaaS","totalCount":1},{"tag":"Personal Development","totalCount":1},{"tag":"PhpStorm","totalCount":1},{"tag":"PowerShell","totalCount":3},{"tag":"Premium Hosting","totalCount":1},{"tag":"Protractor","totalCount":1},{"tag":"Pull Requests","totalCount":1},{"tag":"Release Pipeline","totalCount":1},{"tag":"SEO","totalCount":1},{"tag":"SPA","totalCount":8},{"tag":"SQL Server","totalCount":2},{"tag":"Security","totalCount":17},{"tag":"Security Center","totalCount":1},{"tag":"Security Testing","totalCount":4},{"tag":"Sentry","totalCount":1},{"tag":"Serverless","totalCount":6},{"tag":"Service Bus","totalCount":1},{"tag":"Sharpen Your C#","totalCount":3},{"tag":"SonarQube","totalCount":2},{"tag":"Testing","totalCount":6},{"tag":"Tips & Tricks","totalCount":10},{"tag":"Tracking Branches","totalCount":1},{"tag":"USB Disks","totalCount":1},{"tag":"VSTS","totalCount":1},{"tag":"VT-X","totalCount":1},{"tag":"Validation","totalCount":1},{"tag":"Version Control","totalCount":3},{"tag":"Virtual Machines","totalCount":4},{"tag":"Visual Studio","totalCount":6},{"tag":"Visual Studio Code","totalCount":1},{"tag":"Visual Studio Team Services","totalCount":1},{"tag":"Wiki","totalCount":1},{"tag":"Windows","totalCount":1},{"tag":"Windows Phone","totalCount":5},{"tag":"XAML","totalCount":3},{"tag":"XDebug","totalCount":1}],"categories":[{"category":".Net Core","totalCount":20},{"category":"ASP.Net Core","totalCount":21},{"category":"Active Directory","totalCount":8},{"category":"Android","totalCount":2},{"category":"Angular.JS","totalCount":3},{"category":"Animation","totalCount":3},{"category":"Api Management","totalCount":1},{"category":"App Configuration","totalCount":14},{"category":"App Service","totalCount":15},{"category":"Application Insights","totalCount":1},{"category":"Aurelia","totalCount":7},{"category":"AzSK","totalCount":3},{"category":"Azure","totalCount":49},{"category":"Azure CLI","totalCount":3},{"category":"Azure DevOps","totalCount":19},{"category":"Azure DevOps Extensions","totalCount":3},{"category":"Azure Functions","totalCount":7},{"category":"Azure Pipelines","totalCount":2},{"category":"Azure Policy","totalCount":1},{"category":"Azure Resource Manager","totalCount":2},{"category":"Azure Subscription","totalCount":1},{"category":"C#","totalCount":15},{"category":"CMS","totalCount":1},{"category":"Chrome","totalCount":1},{"category":"Cloud","totalCount":41},{"category":"Cloud Patterns","totalCount":1},{"category":"Code Quality","totalCount":3},{"category":"Compliance","totalCount":1},{"category":"Configuration Management","totalCount":2},{"category":"Continuous Delivery","totalCount":6},{"category":"Custom Controls","totalCount":3},{"category":"DNS","totalCount":1},{"category":"Debugging","totalCount":1},{"category":"Dependency Injection","totalCount":4},{"category":"Design Patterns","totalCount":1},{"category":"DevOps","totalCount":29},{"category":"Development","totalCount":77},{"category":"Emulator","totalCount":2},{"category":"End-to-End Testing","totalCount":1},{"category":"Extension Development","totalCount":1},{"category":"Feature Flags","totalCount":7},{"category":"Feature Management","totalCount":7},{"category":"FireFox OS","totalCount":1},{"category":"Git","totalCount":5},{"category":"Git Workflows","totalCount":3},{"category":"GitHub","totalCount":6},{"category":"Google","totalCount":1},{"category":"Google Maps","totalCount":2},{"category":"Governance","totalCount":1},{"category":"IDE","totalCount":1},{"category":"IaaS","totalCount":1},{"category":"Identity","totalCount":2},{"category":"JavaScript","totalCount":11},{"category":"Joomla","totalCount":1},{"category":"Key Rotation","totalCount":1},{"category":"Key Vault","totalCount":8},{"category":"Localization","totalCount":1},{"category":"Managed Identity","totalCount":6},{"category":"Marketing","totalCount":1},{"category":"Microsoft","totalCount":43},{"category":"Networking","totalCount":1},{"category":"OWASP","totalCount":3},{"category":"Online Presence","totalCount":1},{"category":"PHP","totalCount":1},{"category":"PaaS","totalCount":6},{"category":"Personal Development","totalCount":1},{"category":"Protractor","totalCount":1},{"category":"SPA","totalCount":1},{"category":"SSL","totalCount":1},{"category":"Security","totalCount":21},{"category":"Security Center","totalCount":1},{"category":"Serverless","totalCount":6},{"category":"Sharpen Your C#","totalCount":3},{"category":"Single Page Applications","totalCount":8},{"category":"Social Media","totalCount":1},{"category":"SonarQube","totalCount":2},{"category":"Testing","totalCount":3},{"category":"Tips & Tricks","totalCount":12},{"category":"Virtual Machines","totalCount":7},{"category":"Visual Studio","totalCount":11},{"category":"Visual Studio Code","totalCount":2},{"category":"Visual Studio Team Services","totalCount":1},{"category":"Windows Phone","totalCount":5},{"category":"XAML","totalCount":3}],"archives":[{"archive":"2014","totalCount":14},{"archive":"2015","totalCount":2},{"archive":"2016","totalCount":10},{"archive":"2017","totalCount":23},{"archive":"2018","totalCount":14},{"archive":"2019","totalCount":16},{"archive":"2020","totalCount":13}]}},"pageContext":{"id":"fd62bcf8-22ec-5948-ac64-6bfe342e1980","previousPostId":"0fc719a5-ba70-5d7e-8b55-9e79cdd8ccce","nextPostId":"4abf8298-ef80-5be9-a85c-d2faecee3129"}},
    "staticQueryHashes": ["4067043902"]}