Related
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 :-)
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".
I am setting up the op-tee in ARM-64. and I'm wondering if it is possible to debug it using visual studio code running under ubuntu 18.04.
So far I was able to compile and run the op-tee in QEMU. and also being able to connect the gdb-server using the command line gdb (following this link: https://www.op-tee.org/docs/debug/).
Now I would like to use some GUI instead of gdb. Since I was working wih visual studio code, so I was wondering if it is possible to configure vsCode to do so?
I have tried installing the cortex-debug extension (I'm not sure if that it the right one) and also tried c/c++ debug attach as well. But I cannot make them work!
Here is 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": "(gdb) Attach",
"type": "cppdbg",
"request": "attach",
"program": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"miDebuggerServerAddress": "localhost:1234",
"processId": "${command:pickProcess}",
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
},
{
"text": "optee"
}
]
},
{
"cwd": "${workspaceRoot}",
"executable": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"name": "Debug Microcontroller",
"request": "attach",
"type": "cortex-debug",
"servertype": "openocd"
}
]
}
I expect to be able to debug the arm application by remotely connecting to the gdb-server which is running under QEMU using the Microsoft visual code.
Any suggestion of using extensions is appreciated.
I found the solution which works for me:
First it is needed to install the Native Debug extension for VS Code.
Then Add the following configuration into the launch.json file:
{
"type": "gdb",
"request": "attach",
"name": "Attach to QEMU",
"executable": "${workspaceFolder}/optee_os/out/arm/core/tee.elf",
"target": "localhost:1234",
"remote": true,
"cwd": "${workspaceRoot}",
"gdbpath": "~/devel/optee/toolchains/aarch64/bin/aarch64-linux-gnu-gdb"
}
Notes:
You can connect to QEMU only if the app is not running:
It should either be at initial state before typing c in QEMU
or it is stopped in a breakpoint
There should be no other clients connected to it.
Reference:
http://austinhanson.com/vscode-gdb-and-debugging-an-os
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}"
}
I want to run and debug an html page with a javascript file in a mini website when I hit F5.
How do I configure VSCode to open the html page in the browser and then allow me to set breakpoints in the javescript file which will be triggered by my interaction with the app in the browser?
In Visual Studio this would "just work", because it fires up its own web server, IIS Express. In VSCode I'm not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.
I have seen some examples of debugging javascript apps, for example this launch.json:
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch Bjarte's app",
"type": "node",
"program": "app.js",
"stopOnEntry": true,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArguments": [],
"env": {},
"sourceMaps": false
},
{
"name": "Attach",
"type": "node",
"address": "localhost",
"port": 5858,
"sourceMaps": false
}
]
}
This will run the js file, but I don't understand how I can interact with the app.
It is now possible to debug Chrome web pages in vscode via Chrome remote debugging with a extension released by Microsoft.
Debugger for Chrome
As you can see from that page there are two modes of debugging, Launch and Attach. I only managed to use the Attach mode, probably because i don't have a server running. This extension has all important debug tools functional: local variables, breakpoints, console, call stack.
Another reason to revisit vscode is that it now has IntelliSense support for ECMAScript 6, which displays methods not visible in other "IntelliSense like" solutions I've tried, like SublimeCodeIntel or the latest version of WebStorm.
It seems what I want to do is not possible in VSCode (yet?). My solution at the moment, is to use the node package live-server. Install with
> npm install -g live-server
Then open VSCode, right-click any file in the root folder of your project and select "Open in Console". Then type
> live-server
to start a server with your project as root folder. Live-server will open your default browser and also monitors your project folder for any file changes, and reloads the html page every time you do any changes.
I should mention that my solution using live-server doesn't allow me to debug my app in VSCode, only run it in the browser. I am debugging in Chrome.
Like others have said you install this:
You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
And if you are not running a localhost but some HTML and JavaScript you can use this launch.json code.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
}
]
}
VSCode will use node to launch your app, which means your app is running on some PORT. You can interact with your app by visiting http://localhost:PORT/
If you set a breakpoint in app.js it should be hit once you visit your site that is running local via node.
Here is a nice demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs
I didn't want to run a server just for some HTML and JavaScript (unlike a similar example) this VS Code launch configuration along with the 'Debugger for Chrome' extension did the trick on my Windows 10 machine:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch HTML file",
"type": "chrome",
"request": "launch",
"file": "${file}"
}
]
}
In case you have # in path like C:\C#\mypage.htm, you may use FF & ex. fileBasename or Similar variable - does not work in Chrome:
.vscode\launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch HTML file",
"type": "firefox",
"request": "launch",
"file": "C:/C%23/${fileBasename}"
}
]
}
Or simple full path tested with node.js:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/${fileBasename}"
}
]
}
You can use https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
In the launch.json you just have to pu the url value of the server that you are using and then you can debug your html + js with your editor visual studio code
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:8081",
"webRoot": "${workspaceFolder}"
}
]
}