Xdebug + MAMP not working (macOS Monterey + M1 CPU) - macos

I just received my new MacBook Pro 16 inch with M1 CPU. Everything runs fine, but Debug gives me headaches.
For local (PHP) development I am using MAMP and doing so also installs Xdebug. Normally I also change Xdebug settings like so:
Files to change:
/Applications/MAMP/conf/php[version]/php.ini
/Applications/MAMP/bin/php/php[version]/conf/php.ini
Locate the xdebug section at the bottom of both of these files
Uncomment zend_extension line in both files (remove the ;)
Add the following lines to the xdebug section in both files:
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1 # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true
Gotten from here: https://joshbuchea.com/mac-enable-xdebug-in-mamp
For Visual Studio Code I use these settings:
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
}
Has always worked 100% on an Intel chip. Now, with the M1, it doesn't. Press F5 so the debugger starts, but no stops at breakpoints occur.
The problem for me is that googling this tells me *) that the chip architecture doesn't match (x86/M1) and that I need to use pecl and such (bit new to this). But I'm using MAMP, which has already installed Xdebug.
Does anyone know how to fix this and help me get Xdebug up and running?
Development without debugging doesn't work...
*) https://crossrt.me/install-php-xdebug-on-m1-macbook-pro/
Xdebug failed install on Mac m1

Thanks to Derick I saw the error in my ways. Thanks very much! I had been (again...) trying for hours to get it to work.
Maybe someone else will come by and has the same issue, so I'll post what I did to finally fix it:
Apply the following to both of these files:
Applications/MAMP/conf/php[version]/php.ini
Applications/MAMP/bin/php/php[version]/conf/php.ini
1 Locate the xdebug section at the bottom of both of these files
2 Uncomment zend_extension line in both files (remove the ;)
3 Add the following lines to the xdebug section in both files:
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9003
xdebug.client_host = "127.0.0.1"
xdebug.idekey = VSCODE
My (debug) launch.json file holds the following:
{
"version": "0.3.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9003
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9003
}
]
}
Works like a charm now :-)

Related

Debugging React client on port 8001 and Node Server Port 3000 with VSCode Chrome-Extension

I have tried and tried and tried to debug the app in VSCode using chrome-extension until i come here to ask for help. I have read the manuals how to debug etc , but i miss something .
Until now what i achieved is only to debug the React Client on localhost:8001 with the below:
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"urlFilter": "http://127.0.0.1:8001/*",
"webRoot": "${workspaceFolder}"
}
I don't want it to open any new Chrome Tabs so i found out the above works after doing some work around with Chrome launching adding --remote-debugging-port=9222:
Now my problem is i can't debug the Node.js server which is running on port 3000:
{
"name": "Attach to Node",
"port": 3000,
"request": "attach",
"type": "pwa-node"
}
I have tried the above it doesn't work .
I am starting my project using $ npm start. My project code looks like this i am using webpack-dev-server .

Debugger runs for 1 or 2 seconds and disappears... not working

I'm trying to get the debugger working in vscode and it is failing to run. I have tried using the debugger on a normal python file and also in my Django project. Please help
//launch.json
{
"name": "Python: Django",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/manage.py",
"console": "integratedTerminal",
"args": [
"runserver",
"--noreload",
"--nothreading"
],
"django": true
},
I had the exact same problem after vs code updated to 1.39. I tried creating a new launch.json and all the normal restarts (computer, vs code etc...). Nothing was working so I started the process of downgrading vs code. I went into settings and changed the auto-update settings to "manual". This caused vs code to restart. Once it did this, the debugger problem went away. Not sure why this was related to the debugger, but it solved my problem.

Firefox does not open when debugging in Visual Studio Code

When I start debugging with my launch configuration for Chrome, the browser opens. But when I use my launch configuration for Firefox, the browser does not open. A Firefox process is started though. There are no error messages.
Visual Studio Code 1.36.1
Debugger for Firefox 1.8.1
Firefox 68.0.1
Windows 10 1803
Angular 7.0.0 (should not matter)
.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chrome + localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Firefox + localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
]
}
To use attach mode, you have to launch Firefox manually from a terminal with remote debugging enabled. Note that if you don't use Firefox Developer Edition, you must first configure Firefox to allow remote debugging. To do this, open the Developer Tools Settings and check the checkboxes labeled "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" (as described here). Alternatively you can set the following values in about:config:
Preference Name Value Comment
devtools.debugger.remote-enabled true Required
devtools.chrome.enabled true Required
devtools.debugger.prompt-connection false Recommended
devtools.debugger.force-local false Set this only if you want to attach VS Code to Firefox running on a different machine (using the host property in the attach configuration)
Then close Firefox and start it from a terminal like this:
Windows
"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server
OS X
/Applications/Firefox.app/Contents/MacOS/firefox -start-debugger-server
Linux
firefox -start-debugger-server
Navigate to your web application and use this launch.json configuration to attach to Firefox:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "firefox",
"request": "attach"
}
]
}
If your application is running on a Webserver, you need to add the url and webRoot properties to the configuration (as in the second launch configuration example above).
My configuration and work flow.
P.S. I updated Firefox configuration in about:config, but I didn't get a needed simple result like Google Chrome.
I have installed the following browsers (Ubuntu 20.04 x64):
Firefox for Ubuntu 94.0
Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)
Microsoft Edge Version 96.0.1054.34 (Official build) beta (64-bit)
For all the browsers I didn't change their configuration.
My extensions for debugging (only one): Debugger for Firefox.
My VS Code:
Version: 1.62.3
Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
Date: 2021-11-17T08:00:36.721Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.11.0-40-generic
Configuration
{
"configurations": [
{
// Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Firefox + File",
"file": "${file}"
},
{
// Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Firefox + Server",
"url": "http://localhost:8080/${fileBasename}",
// "url": "http://localhost:8080/index.html",
"webRoot": "${workspaceFolder}/public/"
}
{
"type": "pwa-chrome",
"name": "Chrome + File",
"request": "launch",
"file": "${file}"
},
{
"type": "pwa-chrome",
"name": "Chrome + Server",
"request": "launch",
"url": "http://localhost:8080/${fileBasename}",
// "url": "http://localhost:8080", // the index file
"webRoot": "${workspaceFolder}/public"
},
{
"name": "Edge + Server",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:8080/${fileBasename}",
// "url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/public",
"runtimeExecutable":"/opt/microsoft/msedge-beta/msedge"
}
]
}
I can run my index.html and other html files as a local file and as a server page only in the public directory. On my server the file is in the public directory. I work from the root directory where the public directory is in it.
I have some unpleasant problems only with Firefox. Now it works with the following workaround and the configuration above.
Steps to start debugging in Firefox:
Use the provided configuration and we can change paths or files if it needs. https://code.visualstudio.com/docs/editor/variables-reference But for me it works when I use specified file in the URL, for example, /index.html.
Start the debugging (choose the configuration and press F5).
Firefox have been opened, but the debugging hasn't still worked.
Open DevTools (F12). Yes, without it the debugging doesn't work for me.
Reload the page (press F5 in the browser or Ctrl+R or another combination in your OS).
Debugging has been started with your breakpoints.
I have got the following message of VS Code, but it works without additional paths:
This file's path isn't mapped to any url that was loaded by Firefox. Either this file hasn't been loaded by Firefox yet or your debug configuration needs a pathMapping for this file - do you think the file has already been loaded and want to let the Path Mapping Wizard try to create a pathMapping for you?
I have had a little fix for the Microsoft Edge browser. I set a path to the bin file of the browser: "runtimeExecutable":"/opt/microsoft/msedge-beta/msedge".

Remote Debugging Go REST Endpoints

I am new to Go and new to VSCode. I have also never used Delve before. I am trying to set up remote debugging but i can't seem to hit breakpoints.
My project hosts REST endpoints on localhost:8080. What should the launch.json file look like in order to have delve attach and listen so that I can put breakpoints on my REST endpoints? Currently, this is what i have:
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "remote",
"remotePath": "",
"port": 8080,
"host": "127.0.0.1",
"program": "${workspaceRoot}",
"env": {},
"args": [],
"showLog": true
}
Thanks in advance!
This article mentioned:
Unfortunately, you won’t be able to debug an application when running with buffalo dev. You’ll need to build an executable that skips compiler optimizations like function invocation inlining.
If you skip these build flags Gogland won’t stop on your break points.
More on that on "Debugging Go Code with GDB ".
The code generated by the gc compiler includes inlining of function invocations and registerization of variables. These optimizations can sometimes make debugging with gdb harder.
After that, you can follow "Remote Debugging"
To remote debug using VS Code, you must first run a headless Delve server on the target machine. For example:
$ dlv debug --headless --listen=:2345 --log
Then your launcher can apply.

google chrome debugger in visual studio "site cannot be reached localhost refused to connect"

I am currently trying to open a html file written in visual studio in google chrome browser and run Google Chromes debugging extension in visual studio
the following is the .json file and i am using the first configuration
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
but when it open in google chrome i recieve the error
This site can’t be reached
localhost refused to connect.
I had the same issue.
There is a temporary solution that is to add "file": "${workspaceRoot}/index.html" to the launch.json config.
This change will allow you to open your webapp in the Chrome browser, and you will be able to do debugging, break points...however, take into account that the browser will render your project as if it was opeining a local file, and NOT using a webserver environment.
Here is the launch.json config file:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}",
"file": "${workspaceRoot}/index.html"
}
]
}
After spending sometime with VScode debugging, I realized about the following facts:
VScode can debug natively any .js file.
VScode can debug .html & .js files with the help of extensions like
"Debugger for Chrome" (you need to apply #Machavity changes for rendering it without live-sever.
If you want to render your .html & .js files as it was a webserver (
similar to as if was being served from Apache ), you will need some
node extension like "live-server".
How to debug with "Debugger for Chrome" & "live-server" extension:
Change the configuration options for "Chrome debugger" in the
launch.json file, and make the parameter "url" to match the host that
the "live-server" will use for rendering: for example, localhost.
Open your index.html file and open the terminal, run "live-server".
You can customize the port, host and other settings of the
live-server from the command line.
Start the debugger and apply your breakpoints where necessary.
More info:
- Debugger for Chrome
- Node live-server
Finded out one more option:
run ng serve in terminal
press F5 in vscode to start chrome debugger
Found this related issue which recommends that the port is forwarded to the proper local IP address for your server (it may have changed) and make sure the firewall rules are setup properly on the server.
Another suggested solution based from this link is changing the port number in your project.
Project Properties -> Web -> Servers -> Project Url
You can also follow this workaround from this SO question:
Go to the LAN settings (in Chrome : Tools-> Options-> Under the hood -> Change Proxy setting -> LAN Setting)
There will be a checkbox for "Bypass proxy server for local address"
Tick the checkbox.
On Mac/Apple: Chrome uses system preferences for localhost exclusion:
Go to System Preferences -> Network -> advanced -> Proxy settings
add 'localhost' at the bottom where it says: 'ignore proxy settings for these hosts and domains' (exceptions are separated by a comma)
Hope this helps!
None of the other solutions worked (related to SO link in question), I didn't try the change hosts file solution. This solution below worked
https://www.webucator.com/blog/2016/06/launch-files-browser-visual-studio-code/
CTRL+SHIFT+P
CTR
"other" → tasks.json
Paste the following code:
{
"version": "0.1.0",
"command": "Chrome",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": ["${file}"]
}
On the index.html file or whatever file your working on, press CTRL+SHIFT+B.
EDIT
This solution is not the best since it requires you to refresh / rebuild all assets everytime you make a change, making it rather slow, especially when you use jquery
EDIT EDIT
For anyone reading this I run windows 10 and tested almost every solution I possibly could on stackoverflow but just ended up using atom + atom-live-server which pretty much took me 5 minutes to install and setup. Setup on how to do it here: https://www.youtube.com/watch?v=xg-W86U6_Ng
I had the same issue, solved it by starting the server first, and then launch the chrome debugger.
You can't run the chrome debugger on a server that doesn't exist, or has been started.
Just modify launch chrome configuration and add this one line at the end
{
"name": "no change",
"request": "no change",
"type": "no change",
"url": "no change",
"webroot": "no change",
"file": "${file}"
}

Resources