Last active
September 5, 2024 01:57
Revisions
-
Ahmad Awais ⚡️ revised this gist
Apr 3, 2019 . 1 changed file with 3 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,6 +4,7 @@ VSCode WordPress Debugging Setup: WordPress Xdebug Setup for Local by FlyWheel with VSCode </h1><br> > Consider supporting my work by purchasing the course this tutorial is a part of i.e. [VSCode Power User](https://VSCode.pro) → ## 🚅 TL;DR - Make sure your `Local by FlyWheel` WordPress install is a custom install @@ -130,6 +131,8 @@ You can also install a local plugin called [`local-addon-xdebug-control`](https:  > Consider supporting my work by purchasing the course this tutorial is a part of i.e. [VSCode Power User](https://VSCode.pro) → > For more follow [@MrAhmadAwais](https://twitter.com/MrAhmadAwais/) → Peace! ✌️ -
Sep 4, 2018 . 1 changed file with 6 additions and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,25 +4,25 @@ VSCode WordPress Debugging Setup: WordPress Xdebug Setup for Local by FlyWheel with VSCode </h1><br> ## 🚅 TL;DR - Make sure your `Local by FlyWheel` WordPress install is a custom install - Configure `xdebug.remote_autostart = 1` - Restart your site container in `Local by FlyWheel` to apply new settings - Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the `Listen for Xdebug` section i.e. Add this `"pathMappings": {"/app/public": "${workspaceRoot}"}` ## 🚥 Detailed Tutorial Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode: - [🚅 TL;DR](#%F0%9F%9A%85-tldr) - [🚥 Detailed Tutorial](#%F0%9F%9A%A5-detailed-tutorial) - [1️⃣ Custom WordPress Install](#1%EF%B8%8F%E2%83%A3-custom-wordpress-install) - [2️⃣ Configure Xdebug](#2%EF%B8%8F%E2%83%A3-configure-xdebug) - [3️⃣ Restart The Site](#3%EF%B8%8F%E2%83%A3-restart-the-site) - [4️⃣ Visual Studio Code Configuration](#4%EF%B8%8F%E2%83%A3-visual-studio-code-configuration) - [5️⃣ Debug Your WordPress](#5%EF%B8%8F%E2%83%A3-debug-your-wordpress) - [🔥 Extra Plugin (optional)](#%F0%9F%94%A5-extra-plugin-optional) ### 1️⃣ Custom WordPress Install @@ -122,7 +122,7 @@ In short, your debug `launch.json` file will look like this: >Remember to stop debugging process when you stop working. A good theme helps with that, install [🦄 Shades of Purple →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) ## 🔥 Extra Plugin (optional) You can also install a local plugin called [`local-addon-xdebug-control`](https://github.com/lucatume/local-addon-xdebug-control) for UI based control of Xdebug settings in your `Local by FlyWheel` software. -
Sep 4, 2018 . 1 changed file with 15 additions and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,7 +15,16 @@ Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode: - [TL;DR](#tldr) - [Detailed Tutorial](#detailed-tutorial) - [1️⃣ Custom WordPress Install](#1%EF%B8%8F%E2%83%A3-custom-wordpress-install) - [2️⃣ Configure Xdebug](#2%EF%B8%8F%E2%83%A3-configure-xdebug) - [3️⃣ Restart The Site](#3%EF%B8%8F%E2%83%A3-restart-the-site) - [4️⃣ Visual Studio Code Configuration](#4%EF%B8%8F%E2%83%A3-visual-studio-code-configuration) - [5️⃣ Debug Your WordPress](#5%EF%B8%8F%E2%83%A3-debug-your-wordpress) - [Extra Plugin (optional)](#extra-plugin-optional) ### 1️⃣ Custom WordPress Install > Make sure your `Local by FlyWheel` WordPress install is a custom install. @@ -24,7 +33,7 @@ Here're are some easy steps to follow to make sure you can debug WordPress in Lo - ⚠️ If not, just export your site, import it back while creating a new site and this time choose “Custom”. ### 2️⃣ Configure Xdebug > Configure `xdebug.remote_autostart = 1`. @@ -50,7 +59,7 @@ xdebug.remote_connect_back = 1 Save the php.ini file. ### 3️⃣ Restart The Site > Restart your site container in `Local by FlyWheel` to apply new settings. @@ -59,7 +68,7 @@ Save the php.ini file.  ### 4️⃣ Visual Studio Code Configuration Let's start configuration of VSCode: @@ -100,11 +109,11 @@ In short, your debug `launch.json` file will look like this: } ``` ### 5️⃣ Debug Your WordPress > Now go ahead and debug your WordPress app/plugin/theme and what not.  - After all this, click the play button next to “Listen for Xdebug” in the top debug bar - Create a breakpoint in your PHP code e.g. add this line and a breakpoint`<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?>` to `header.php` of your theme -
Sep 4, 2018 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,7 +57,7 @@ Save the php.ini file. - On the left side menu, right click on your site - Select `Restart` option to restart the site.  ## Visual Studio Code Configuration @@ -104,7 +104,7 @@ In short, your debug `launch.json` file will look like this: > Now go ahead and debug your WordPress app/plugin/theme and what not.  - After all this, click the play button next to “Listen for Xdebug” in the top debug bar - Create a breakpoint in your PHP code e.g. add this line and a breakpoint`<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?>` to `header.php` of your theme -
Sep 4, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,7 +57,7 @@ Save the php.ini file. - On the left side menu, right click on your site - Select `Restart` option to restart the site.  ## Visual Studio Code Configuration -
Sep 4, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,7 +57,7 @@ Save the php.ini file. - On the left side menu, right click on your site - Select `Restart` option to restart the site.  ## Visual Studio Code Configuration -
Sep 4, 2018 . 1 changed file with 10 additions and 10 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,15 +1,15 @@ <h1 align="center"> <img src="https://on.ahmda.ws/qMzI/c" /> VSCode WordPress Debugging Setup: WordPress Xdebug Setup for Local by FlyWheel with VSCode </h1><br> ## TL;DR - Make sure your `Local by FlyWheel` WordPress install is a custom install - Configure `xdebug.remote_autostart = 1` - Restart your site container in `Local by FlyWheel` to apply new settings - Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the `Listen for Xdebug` section i.e. Add this `"pathMappings": {"/app/public": "${workspaceRoot}"}` ## Detailed Tutorial @@ -19,16 +19,16 @@ Here're are some easy steps to follow to make sure you can debug WordPress in Lo > Make sure your `Local by FlyWheel` WordPress install is a custom install. - ✅ Flywheel Local has Xdebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment. - ⚠️ You can check your already installed WP with the ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running and you have Xdebug installed. - ⚠️ If not, just export your site, import it back while creating a new site and this time choose “Custom”. ## Configure Xdebug > Configure `xdebug.remote_autostart = 1`. Now in the right environment we need to configure Xdebug for that: - Go to your local WordPress install path E.g. `/PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini` - Search for the `[Xdebug]` section @@ -68,7 +68,7 @@ Let's start configuration of VSCode: - Go to the Debug view in VSCode `COMMAND (⌘) + SHIFT (⇧) + D` - Click “Add configuration” from the top toolbar - Select `PHP` and add the configuration - In the `.vscode/launch.json` file that was created inside the `Listen for Xdebug` section add `"pathMappings": {"/app/public": "${workspaceRoot}"}` In short, your debug `launch.json` file will look like this: @@ -80,7 +80,7 @@ In short, your debug `launch.json` file will look like this: "version": "0.2.0", "configurations": [ { "name": "Listen for Xdebug", "type": "php", "request": "launch", "port": 9000, @@ -106,7 +106,7 @@ In short, your debug `launch.json` file will look like this:  - After all this, click the play button next to “Listen for Xdebug” in the top debug bar - Create a breakpoint in your PHP code e.g. add this line and a breakpoint`<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?>` to `header.php` of your theme - Browse your site and VSCode should pop up showing all your debug info @@ -115,7 +115,7 @@ In short, your debug `launch.json` file will look like this: ## Extra Plugin (optional) You can also install a local plugin called [`local-addon-xdebug-control`](https://github.com/lucatume/local-addon-xdebug-control) for UI based control of Xdebug settings in your `Local by FlyWheel` software. > Make sure everything is set to yes for a sane debugging experience. -
Sep 4, 2018 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,7 @@ <h1 align="center"> <img src="https://on.ahmda.ws/qMzI/c" /> VSCode WordPress Debugging Setup: WordPress xDebug Setup for Local by FlyWheel with VSCode </h1><br> ## TL;DR @@ -11,6 +11,7 @@ - Restart your site container in `Local by FlyWheel` to apply new settings - Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the “Listen for XDebug” section i.e. Add this `"pathMappings": {"/app/public": "${workspaceRoot}"}` ## Detailed Tutorial Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode: -
Sep 4, 2018 . 1 changed file with 10 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -110,7 +110,16 @@ In short, your debug `launch.json` file will look like this: - Browse your site and VSCode should pop up showing all your debug info >Remember to stop debugging process when you stop working. A good theme helps with that, install [🦄 Shades of Purple →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) ## Extra Plugin (optional) You can also install a local plugin called [`local-addon-xdebug-control`](https://github.com/lucatume/local-addon-xdebug-control) for UI based control of xDebug settings in your `Local by FlyWheel` software. > Make sure everything is set to yes for a sane debugging experience.  > For more follow [@MrAhmadAwais](https://twitter.com/MrAhmadAwais/) → Peace! ✌️ -
Sep 4, 2018 . 1 changed file with 100 additions and 19 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,35 +1,116 @@ <h1 align="center"> <img src="https://on.ahmda.ws/qMzI/c" /> WordPress xDebug Setup for Local by FlyWheel with VSCode </h1><br> ## TL;DR - Make sure your `Local by FlyWheel` WordPress install is a custom install - Configure `xdebug.remote_autostart = 1` - Restart your site container in `Local by FlyWheel` to apply new settings - Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the “Listen for XDebug” section i.e. Add this `"pathMappings": {"/app/public": "${workspaceRoot}"}` Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode: ## Custom WordPress Install > Make sure your `Local by FlyWheel` WordPress install is a custom install. - ✅ Flywheel Local has xDebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment. - ⚠️ You can check your already installed WP with the ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running and you have xDebug installed. - ⚠️ If not, just export your site, import it back while creating a new site and this time choose “Custom”. ## Configure xDebug > Configure `xdebug.remote_autostart = 1`. Now in the right environment we need to configure xDebug for that: - Go to your local WordPress install path E.g. `/PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini` - Search for the `[Xdebug]` section - Add the following line in this section ```ini xdebug.remote_autostart = 1 ``` > While only the above option is required but some 3rd party extension/plugin for local can sometimes change things so make sure in the `[Xdebug]` section all the following settings are set to `1` (only if your debugger is not working). ```ini xdebug.scream = 1 xdebug.remote_enable = 1 xdebug.show_local_vars = 1 xdebug.remote_autostart = 1 xdebug.remote_connect_back = 1 ``` Save the php.ini file. ## Restart The Site > Restart your site container in `Local by FlyWheel` to apply new settings. - On the left side menu, right click on your site - Select `Restart` option to restart the site.  ## Visual Studio Code Configuration Let's start configuration of VSCode: - First of all, install [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) extension - Open your Local WordPress site project folder in VSCode. You should open the entire WordPress site folder i.e. `/PATH_WHERE_YOU_INSTALLED_WORDPRESS/app/public` - Go to the Debug view in VSCode `COMMAND (⌘) + SHIFT (⇧) + D` - Click “Add configuration” from the top toolbar - Select `PHP` and add the configuration - In the `.vscode/launch.json` file that was created inside the “Listen for XDebug” section add `"pathMappings": {"/app/public": "${workspaceRoot}"}` In short, your debug `launch.json` file will look like this: ``` json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "pathMappings": { "/app/public": "${workspaceRoot}" } }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 9000 } ] } ``` ## Debug Your WordPress > Now go ahead and debug your WordPress app/plugin/theme and what not.  - After all this, click the play button next to “Listen for XDebug” in the top debug bar - Create a breakpoint in your PHP code e.g. add this line and a breakpoint`<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?>` to `header.php` of your theme - Browse your site and VSCode should pop up showing all your debug info >Remember to stop debugging process when you stop working. A good theme helps with that, install [🦄 Shades of Purple →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) > For more follow [@MrAhmadAwais](https://twitter.com/MrAhmadAwais/) → Peace! ✌️ -
May 5, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,5 @@ <h1 align="center"> <img src="https://on.ahmda.ws/qMzI/c" /> WordPress xDebug Setup for Local by FlyWheel with VSCode </h1> -
Mar 22, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,35 @@ <h1 align="center"> <img src="http://on.ahmda.ws/qMzI/c" /> WordPress xDebug Setup for Local by FlyWheel with VSCode </h1> Flywheel Local has XDebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment. If you don’t know which your current site is running, you can detect it by going to ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running. If not, just export your site, import it back and choose “Custom”. Now that we have the right environment, remember what PHP version you are running, open the right PHP settings file (for example `/Local Sites/my_site/conf/php/7.0.3/php.ini`) and add these lines in the `[Xdebug]` section: ``` xdebug.remote_autostart=1 ``` Save the php.ini and restart your site container in Flywheel to apply new settings. ## Visual Studio Code configuration Install PHP Debug extension to VSC from the Extensions tab https://github.com/felixfbecker/vscode-php-debug Open your Local site project folder if it’s not open yet. Go to the Debug tab, click “Add configuration” from the top toolbar, select “PHP” and add your project root directories to “Listen for XDebug” section in launch.json: ``` { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "pathMappings": { "/var/www/html": "${workspaceRoot}", "/app": "/Users/YOURUSERNAME/path/to/Local/courses/app/" } } ``` After that, click the play button next to “Listen for XDebug” in the top bar, do something in your code that leads to PHP error, load the site in your browser and VSCode should pop up showing the error. Remember to stop debugging process when you stop working, running it on two local sites at the same time seems to result in weird errors and overall slowiness.
Ahmad Awais ⚡️
revised
this gist