• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / Xdebug in Visual Code Studio with Local by Flywheel

Xdebug in Visual Code Studio with Local by Flywheel

Last updated on September 18, 2018 by Sal Ferrarello

I’ve been using Local by Flywheel for my local WordPress development and I wanted to use Xdebug with Visual Code Studio with it.

Note: I’m running this on a Mac, your experience may vary if you’re using a Windows machine.

Local by Flywheel Setup

It is important that your site is setup as a Custom site (rather than “Preferred”).

Visual Code Studio Setup

  • Click the gear in the bottom left corner
  • Choose Extensions from the menu that opens
  • In the Search Extensions in Marketplace search box type PHP Debug
  • Click PHP Debug by Felix Becker from the dropdown
  • Click Install
  • Click Reload
  • Go to the Debug drop down menu along the top of the screen and click Open Configurations
  • You should now see the launch.json file in your editor
  • Add pathMappings under the object named Listen for XDebug, mapping /app/public to ${workspaceFolder}

Thanks to Eli Dalbey for his help with these settings.

My launch.json file

{
// 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",
// See https://salferrarello.com/xdebug-in-visual-code-studio-with-local-by-flywheel/
"pathMappings": {
// Map path within Local by Flywheel (i.e. after you SSH in) (/app/public)
// to the path of the folder opened in VS Code ${workspaceFolder}
"/app/public": "${workspaceFolder}",
},
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
view raw launch hosted with ❤ by GitHub

Chrome Setup

You need to add the URL parameter ?XDEBUG_SESSION_START to your URL to trigger Xdebug. Alternatively, you can use the Xdebug helper Chrome Extension to automatically send the information to trigger Xdebug.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming, Solution Tagged With: Local by Flywheel, PHP, Visual Code Studio, Xdebug

Reader Interactions

Comments

  1. Eli Dalbey says

    September 17, 2018 at 9:07 am

    The last step gave me an error when I copy and pasted it. Believe it’s because it has left and right quotations in it.

    I pasted the update below. VScode hollered that server+local source routes had been deprecated also. I put the updated version pathMappings config in here.

    Awesome article Sal!

    
    "serverSourceRoot": "/app/public", // Path within Local by Flywheel (i.e. after you SSH in)
    "localSourceRoot": "${workspaceRoot}",
    
    // New version
    "pathMappings": {
        "/app/public": "${workspaceRoot}",
    }
    
    Reply
    • Sal Ferrarello says

      September 18, 2018 at 9:17 am

      Thanks Eli,

      I’ve removed the example with the left/right quotations and updated the configuration to use pathMappings as you suggested – thank you.

      Your notes also helped me discover that ${workspaceRoot} has been deprecated and the ${workspaceFolder} is the preferred variable (see Visual Code Studio Variables Reference) so I’ve made that change, as well.

      Thanks again.

      Reply
  2. Kyle Laverty says

    October 10, 2018 at 9:51 am

    When I click open configurations, the file that opens is workspace.json. Am I missing something?

    Reply
    • Sal Ferrarello says

      October 10, 2018 at 1:58 pm

      Hi Kyle,

      Just to clarify, you are opening the Debug dropdown and clicking Open Configurations from the dropdown menu, correct?

      When I do this on my Mac running Visual Studio Code v1.28.0 with extension PHP Debug v1.12.6, I am placed in the file launch.json.

      The Visual Studio Code website has more information on the launch.json file.

      Is it possible you have another extension running that is modifying the behavior in your copy of Visual Code Studio?

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in